/* ============================================================
 * Keystone Pitch Banner
 * ============================================================
 * Full-width statement section: large headline + supporting
 * paragraph on a brand-coloured background. Used to break
 * rhythm between content blocks with a single big claim.
 *
 * Pattern slug: keystone/pitch-banner
 * Replaces the legacy "Only 3% of Web3 Organizations…" block
 * on /rma-badges/. Reusable for any stat-led claim or
 * single-message banner across brands.
 *
 * Variants:
 *   .keystone-pitch-banner--centered    (heading + lead centered)
 *   .keystone-pitch-banner--dark        (navy ground, white text)
 *   .keystone-pitch-banner--with-media  (split layout: text + CTA / media)
 * ============================================================ */

.keystone-pitch-banner {
	--keystone-pitch-banner-bg:       linear-gradient(135deg, #3a6bff 0%, #1a4ad6 100%);
	--keystone-pitch-banner-heading:  #ffffff;
	--keystone-pitch-banner-text:     #ffffff;

	/* CTA — flat solid pill, jiggles on hover (shared motion language). */
	--keystone-pitch-banner-cta-bg:       #3a6bff;
	--keystone-pitch-banner-cta-bg-hover: #4a7bff;
	--keystone-pitch-banner-cta-text:     #ffffff;

	background:     var(--keystone-pitch-banner-bg);
	color:          var(--keystone-pitch-banner-text);
	padding-block:  clamp(3rem, 8vw, 6rem);
	padding-inline: var(--wp--preset--spacing--50, clamp(30px, 5vw, 50px)) !important;

	margin-top:    0 !important;
	margin-bottom: 0 !important;
}

.keystone-pitch-banner__inner {
	display:        flex;
	flex-direction: column;
	gap:            clamp(1.5rem, 4vw, 3rem);
	max-width:      var(--wp--style--global--wide-size, 1340px);
	margin-inline:  auto;
}

/* ── Inline stat number (inside heading or lead text) ──────
 * Drops into any __heading or __lead via a <span>.
 * Inherits colour from its parent but can be tinted per brand. */
.keystone-pitch-banner__stat {
	font-variant-numeric: tabular-nums;
	font-weight:          inherit;
	color:                inherit;
}

/* ── Secondary stat block (divider + sub-line) ─────────────
 * Used when a second number supports the primary statement. */
.keystone-pitch-banner__secondary {
	display:        flex;
	flex-direction: column;
	gap:            0.5rem;
	padding-top:    clamp(1.25rem, 3vw, 2rem);
}

.keystone-pitch-banner__sub {
	margin:      0;
	font-size:   clamp(1rem, 1.6vw, 1.2rem);
	font-weight: 400;
	line-height: 1.55;
	color:       var(--keystone-pitch-banner-text);
}

/* The stat inside __sub is bolder so it punches through */
.keystone-pitch-banner__secondary .keystone-pitch-banner__stat {
	font-weight: 700;
}

/* ── Heading: oversized, tight tracking ────────────────────── */
.keystone-pitch-banner__heading {
	color:          var(--keystone-pitch-banner-heading);
	margin:         0;
	font-size:      clamp(1.5rem, 3.5vw, 2.25rem);
	line-height:    1.05;
	font-weight:    800;
	letter-spacing: -0.02em;
}

.keystone-pitch-banner__lead {
	color:       var(--keystone-pitch-banner-text);
	margin:      0;
	font-size:   clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.6;
	max-width:   52rem;
}

/* ── Variant: --centered ───────────────────────────────────── */
.keystone-pitch-banner--centered .keystone-pitch-banner__inner {
	align-items: center;
	text-align:  center;
}

.keystone-pitch-banner--centered .keystone-pitch-banner__lead {
	margin-inline: auto;
}

/* ── Variant: --dark (navy ground) ─────────────────────────── */
.keystone-pitch-banner--dark {
	--keystone-pitch-banner-bg: linear-gradient(135deg, #0a1834 0%, #16307c 60%, #1a1a72 100%);
}

/* ── Variant: --with-media (split layout w/ media + CTA) ──── */
.keystone-pitch-banner--with-media .keystone-pitch-banner__inner {
	display:               grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap:                   clamp(2rem, 5vw, 5rem);
	align-items:           center;
}

.keystone-pitch-banner__text {
	display:        flex;
	flex-direction: column;
	gap:            clamp(1.25rem, 3vw, 2rem);
}

.keystone-pitch-banner__media {
	display:         flex;
	justify-content: flex-end;
	align-items:     center;
}

.keystone-pitch-banner__media figure {
	margin:    0;
	width:     max-content;
	max-width: 100%;
}

.keystone-pitch-banner__media img,
.keystone-pitch-banner__media svg {
	display:   block;
	max-width: 100%;
	height:    auto;
}

/* Media-left variant flip */
.keystone-pitch-banner--media-left .keystone-pitch-banner__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.keystone-pitch-banner--media-left .keystone-pitch-banner__media { order: 1; justify-content: flex-start; }
.keystone-pitch-banner--media-left .keystone-pitch-banner__text  { order: 2; }

/* ── CTA — flat solid pill, jiggle on hover ─────────────────
 * Same motion language as the Step Grid CTA and the Swift Cargo
 * nav button (keystone-button-jiggle keyframe in tokens.css).
 * ──────────────────────────────────────────────────────────── */
.keystone-pitch-banner__cta-wrap {
	display: flex;
}

.keystone-pitch-banner__cta {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         0.875rem 1.75rem;
	border:          0;
	border-radius:   999px;
	background:      var(--keystone-pitch-banner-cta-bg);
	color:           var(--keystone-pitch-banner-cta-text);
	font-weight:     600;
	font-size:       1rem;
	line-height:     1.2;
	text-decoration: none;
	cursor:          pointer;
	transition:      background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.keystone-pitch-banner__cta:hover,
.keystone-pitch-banner__cta:focus-visible {
	background: var(--keystone-pitch-banner-cta-bg-hover);
	animation:  keystone-button-jiggle 0.4s ease;
	box-shadow: 0 4px 12px rgba(58, 107, 255, 0.45);
}

/* ── Mobile stack ──────────────────────────────────────────── */
@media (max-width: 781px) {
	.keystone-pitch-banner--with-media .keystone-pitch-banner__inner,
	.keystone-pitch-banner--media-left .keystone-pitch-banner__inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	/* Image first on mobile, text + CTA below — matches the screenshot. */
	.keystone-pitch-banner--with-media .keystone-pitch-banner__media,
	.keystone-pitch-banner--media-left .keystone-pitch-banner__media {
		order: 1;
		justify-content: center;
	}

	.keystone-pitch-banner--with-media .keystone-pitch-banner__text,
	.keystone-pitch-banner--media-left .keystone-pitch-banner__text {
		order: 2;
	}

	.keystone-pitch-banner__media img,
	.keystone-pitch-banner__media svg {
		max-width: 320px;
		margin-inline: auto;
	}
}

/* ============================================================
 * BRAND: VaaSBlock
 * Match the bright royal-blue used on the live /rma-badges/
 * "Only 3%" banner.
 * ============================================================ */
body.brand-vaasblock .keystone-pitch-banner {
	--keystone-pitch-banner-bg:      linear-gradient(135deg, #3a6bff 0%, #1a4ad6 100%);
	--keystone-pitch-banner-heading: #ffffff;
	--keystone-pitch-banner-text:    #e6ecff;
}

body.brand-vaasblock .keystone-pitch-banner--dark {
	--keystone-pitch-banner-bg:      linear-gradient(135deg, #0a1834 0%, #16307c 60%, #1a1a72 100%);
	--keystone-pitch-banner-heading: #ffffff;
	--keystone-pitch-banner-text:    #c7d1ff;

	--keystone-pitch-banner-cta-bg:       #3a6bff;
	--keystone-pitch-banner-cta-bg-hover: #4a7bff;
}