/* ============================================================
 * Keystone Hero Banner
 * ============================================================
 * Full-width hero section with gradient background.
 * Two-column on desktop (text + image), stacked on mobile.
 *
 * Brand colours via CSS custom properties — override per brand
 * using `body.brand-{slug} .keystone-hero-banner { ... }`.
 *
 * Usage: insert via block inserter → "Hero banner (full-bleed)"
 * Pattern slug: keystone/hero-banner
 * ============================================================ */

.keystone-hero-banner {
	/* Defaults: dark navy gradient. Override per brand below. */
	--keystone-hero-bg:         linear-gradient(135deg, #0a1834 0%, #16307c 60%, #1d3eaa 100%);
	--keystone-hero-text:       rgba(255, 255, 255, 0.88);
	--keystone-hero-heading:    #ffffff;
	--keystone-hero-cta-bg:     #2563eb;
	--keystone-hero-cta-bg-hov: #1d4ed8;
	--keystone-hero-cta-text:   #ffffff;
	--keystone-hero-radius:     20px;

	background: var(--keystone-hero-bg);
	color:      var(--keystone-hero-text);
	padding-block:  clamp(2.5rem, 6vw, 5rem);
	/* Horizontal padding directly on the section because WP's layout
	   engine inlines `padding:0` and zeroes out has-global-padding. */
	padding-inline: var(--wp--preset--spacing--50, clamp(30px, 5vw, 50px)) !important;
	overflow:   hidden;
	margin-top:    0 !important;
	margin-bottom: 0 !important;
}

/* Inner sits inside the alignwide container so it respects the theme's
   wideSize (1340px) while the gradient extends full bleed. */
.keystone-hero-banner__inner {
	display:               grid;
	/* minmax(0, 1fr) lets columns shrink below their intrinsic content
	   width — without it, a wide image would push the grid past the
	   alignwide constraint and bleed off the right viewport edge. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/* Reduced from clamp(2rem, 4vw, 4rem) so the text column has more
	   width — keeps the lead line on one row at desktop sizes. */
	gap:                   clamp(1.25rem, 2.5vw, 2.5rem);
	align-items:           center;
}

/* ── Text column ───────────────────────────────────────────── */
.keystone-hero-banner__text {
	display:        flex;
	flex-direction: column;
	gap:            1.25rem;
}

.keystone-hero-banner__heading {
	color:        var(--keystone-hero-heading);
	margin:       0;
	/* Cap at 3rem so "Earn the RMA™ Badge" fits on a single line at
	   desktop widths (~580 px text column). Lower bound preserves
	   readability on tablet/small desktop. */
	font-size:    clamp(2rem, 4vw, 3rem);
	line-height:  1.1;
	font-weight:  700;
	letter-spacing: -0.02em;
}

/* Each line of the heading renders on its own row — using spans because
   WP's sanitizer strips bare <br> tags from headings inside wp:html. */
.keystone-hero-banner__heading-line {
	display: block;
}

/* GLOBAL RULE — text respects column margins, no Xch width caps. */
.keystone-hero-banner__subtitle {
	color:        var(--keystone-hero-text);
	font-size:    clamp(1rem, 1.4vw, 1.125rem);
	line-height:  1.55;
	margin:       0;
}

/* CTA button — round-pill style, primary brand colour. */
.keystone-hero-banner__cta {
	margin-top: 0.75rem;
}

.keystone-hero-banner__cta .wp-block-button__link {
	background:    var(--keystone-hero-cta-bg);
	color:         var(--keystone-hero-cta-text);
	border-radius: 999px;
	padding:       0.875rem 2rem;
	font-weight:   600;
	font-size:     1rem;
	border:        none;
	transition:    background 0.2s ease, transform 0.2s ease;
	display:       inline-block;
}

.keystone-hero-banner__cta .wp-block-button__link:hover,
.keystone-hero-banner__cta .wp-block-button__link:focus {
	background: var(--keystone-hero-cta-bg-hov);
	transform:  translateY(-1px);
}

/* ── Image column ──────────────────────────────────────────── */
.keystone-hero-banner__image {
	display:         flex;
	justify-content: center;
}

.keystone-hero-banner__image figure,
.keystone-hero-banner__visual {
	margin:        0;
	width:         100%;
	max-width:     100%;
}

.keystone-hero-banner__image img {
	display:       block;
	width:         100%;
	height:        auto;
	border-radius: var(--keystone-hero-radius);
	box-shadow:    0 30px 60px -15px rgba(0, 0, 0, 0.35);
}

/* ── Mobile stack ──────────────────────────────────────────── */
@media (max-width: 781px) {
	.keystone-hero-banner__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	/* Text first, then image — matches the mobile screenshot reference. */
	.keystone-hero-banner__text  { order: 1; }
	.keystone-hero-banner__image { order: 2; }

	.keystone-hero-banner__cta {
		margin-top: 1rem;
	}
}

/* ============================================================
 * BRAND: VaaSBlock
 * Navy gradient matching the brand's existing visual language.
 * Primary navy #1a1a72 · Accent #0978fe
 * ============================================================ */
body.brand-vaasblock .keystone-hero-banner {
	--keystone-hero-bg:         linear-gradient(135deg, #0a1834 0%, #16307c 55%, #1a1a72 100%);
	--keystone-hero-cta-bg:     #2b6cf6;
	--keystone-hero-cta-bg-hov: #0978fe;
}