/* Prevent horizontal scrollbar from large-intrinsic-size content.
 * style.css is only served when SCRIPT_DEBUG=true, so this rule lives here
 * in an always-enqueued file instead. */
html {
	overflow-x: clip;
}

/* ============================================================
 * 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;
}

/* Prevent WordPress's constrained-layout negative margins from escaping
   the hero banner's padding-inline. The hero banner is alignfull so WP
   still calculates alignwide margins against the global content width,
   which can push the inner grid left of the padding zone. Zeroing those
   margins here makes the inner grid fill the padded width correctly. */
.keystone-hero-banner .alignwide {
	margin-left:  0 !important;
	margin-right: 0 !important;
	max-width:    100%;
}

/* Inner is capped at the site wideSize so the hero content aligns with
   every other section's content edge. The section's padding-inline
   provides side margins at narrow viewports; margin-inline: auto centres
   the inner at wide viewports — exactly matching the max-width + auto
   pattern used by keystone-ampulse-why__inner, keystone-ampulse-savings__inner, etc. */
.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
	   wideSize constraint and bleed off the right viewport edge. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap:                   clamp(1.25rem, 2.5vw, 2.5rem);
	align-items:           center;
	overflow-x:            clip;
	/* Match other sections: cap at 1340 px, auto-centre within the
	   section's padded area. Replaces the previous width:100% / margin:0
	   approach that let the grid expand beyond the wideSize at large
	   viewports. */
	max-width:             var(--wp--style--global--wide-size, 1340px);
	margin-inline:         auto;
	width:                 100%;
}

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

.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;
	/* Prevent long inline words (URLs, emails) from forcing overflow. */
	overflow-wrap: break-word;
	max-width:     100%;
}

/* 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 ──────────────────────────────────────────── */
/* min-width:0 prevents a large natural-size image from overriding the
   grid track's minmax(0,1fr) minimum via automatic min-size calculation. */
.keystone-hero-banner__image {
	display:         flex;
	justify-content: center;
	min-width:       0;
}

.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 {
		/* minmax(0, 1fr) prevents the column auto-minimum from sizing to
		   the grid items' content width (which an image could make huge). */
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

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

	.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;
}

/* ============================================================
 * BRAND: Ampulse Energy
 * Deep eco-green gradient + solar yellow CTA.
 * Primary green #1a4d2e · Accent #F7A825
 * ============================================================ */
body.brand-ampulse .keystone-hero-banner {
	--keystone-hero-bg:         linear-gradient(135deg, #0d1f4a 0%, #1a3380 55%, #1f67e7 100%);
	--keystone-hero-cta-bg:     #F7A825;
	--keystone-hero-cta-bg-hov: #e0951c;
	--keystone-hero-cta-text:   #0d1f4a;
}