/**
 * Pattern: Hero — Home  (P1)
 *   patterns/hero-home.php  ·  .kd-hero-home
 *
 * Net-new (no NHC stock). The top-of-home hero: a maroon gradient text panel
 * (white heading + lead + primary button) beside a photo, full-bleed.
 *
 * .kd-hero-home is the theme's reserved home-hero class — global.css references it
 * ONLY inside :has() guards (main:has(.kd-hero-home) → suppress the no-hero top pad;
 * the home hero's next band is intentionally flush). It sets no properties on the
 * class, so this partial owns all styling and there is NO shared-file edit.
 *
 * Design source (file g3BMymX7x188yz0AGwEMkL), Home frame 1:118:
 *   • Hero band     y100 → y818, FULL-BLEED (edge to edge, 1440 wide × 718 tall).
 *   • Gradient panel 2:758  x0   w833 (57.85% of 1440) — raster gradient fill, SQUARE.
 *   • Image          2:760  x833 w607 (42.15% of 1440) — photo, SQUARE.
 *   • Heading        2:778  Public Sans Medium 36/40, WHITE, centred, 2 lines (538px).
 *   • Lead           2:780  Inter Regular 17/23, WHITE, centred, 3 lines (476px).
 *   • Button         2:762  "Start a Conversation" — the F3 PRIMARY (#d62609 fill,
 *                    white DM Sans 17, 49px, square). Reads fine on the dark gradient,
 *                    so NO ghost variant (unlike P7's CTA button) — plain wp:button
 *                    inherits gg-buttons.css. Only the focus ring is re-scoped white.
 *   Content column is centred BOTH axes in the panel band.
 *
 * Mobile mock 2011:96 (frame 2011:98 / panel 2011:109) — DESIGNED, D1:
 *   • Stacks TEXT-PANEL FIRST (2011:109, 375×353), image BELOW (2011:114, 375×240).
 *     NOT image-first (that's the media SPLITS, P3) — the hero stacks panel-first.
 *   • Panel content is LEFT-aligned (heading/lead/button all at x20), 20px gutters.
 *   • Heading 28/34 (H1 mobile derivation), lead 15/22 (node 2011:111).
 *   • Panel gradient is a real 2-stop CSS def: linear-gradient(to right,#900000,#2a0000).
 *
 * GRADIENT (decision-log Q10):
 *   • Desktop = exported Figma raster fill (assets/images/gg-hero-gradient.webp,
 *     2000×1809, light warm top-left → deep maroon/black bottom-right) as
 *     background-image over a --kd-color-secondary maroon fallback. Differs from the
 *     CTA gradient (that stays maroon; the hero goes to black) → its own asset.
 *   • Mobile <768 = the node's own 2-stop CSS gradient (2011:109). Both stops derived
 *     from --kd-color-secondary (dark stop = color-mix 29% on black = #2a0000) so no
 *     raw hex. Dark everywhere → white text clears AA with margin (per-viewport a11y).
 *
 * WHITE TEXT scoped LOCALLY (F1 band-pattern flag): the global <h1> is black and
 *   <h2> is maroon. Here the heading + lead are white, scoped under .kd-hero-home only —
 *   the global h1/h2/button rules are untouched. Two-class scope (0,2,0) so white
 *   BEATS theme.json's element colour deterministically regardless of print order.
 *
 * Every design value goes through a --kd-* token (TOKEN-DRY). The only literals are
 * commented one-off structural values (the 833/607 split ratio, the 607/718 + 375/240
 * image aspects, the content measure, the gradient asset path).
 */

/* ── Full-bleed 2-column hero ────────────────────────────────────────────────
   .kd-hero-home is alignfull → spans the viewport, root padding zeroed. A CSS grid
   splits it into the gradient panel + the image at the comp's 833:607 ratio. Both
   columns stretch to a shared height, which the image aspect drives (below).
   blockGap:0 is set on the block, but reset the flow margin here too so a grid item
   (the 2nd column) never inherits WP's 24px block-gap as a margin-top. */
.kd-hero-home {
	display: grid;
	grid-template-columns: 833fr 607fr; /* comp 2:758 : 2:760 = 57.85% : 42.15% (one-off structural ratio) */
	align-items: stretch; /* panel + image share the taller column's height */
}

.kd-hero-home > * {
	margin-block: 0;
}

/* ── Gradient text panel (left) ──────────────────────────────────────────────
   Content centred both axes within the band. padding-inline uses the site gutter
   token: on desktop the clamp (~112px @1440) + centred content reproduces the
   comp's ~148px text inset; on mobile it resolves to the fixed 20px gutter. */
.kd-hero-home__panel {
	display: flex;
	align-items: center; /* vertical-centre the content column in the band */
	justify-content: center; /* horizontal-centre it */
	/* Band height = the comp's fixed desktop hero height (node 2:758 = 718px @1440;
	   Alain 2026-07-15: fixed 718, NOT proportional — so it doesn't grow past 718 on
	   wide screens). Driving it off the panel (a grid item) makes the row this tall and
	   the image stretches to match; if content is ever taller the band still grows
	   (min-height), and the 833:607 column ratio holds either way. Reset to content-
	   height when the hero stacks (<1024, see mobile block). */
	min-height: 718px; /* comp 2:758 hero band height — fixed desktop (Alain 2026-07-15) */
	padding-block: var(--kd-space-lg); /* 40px — floor inset so content never touches band edges */
	padding-inline: var(--kd-gutter); /* site gutter (≈112px @1440 → 20px <768) */
	background-color: var(--kd-color-secondary); /* maroon fallback under the raster */
	background-image: url(../../images/gg-hero-gradient.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ── Centred content column, capped to the comp's heading measure ───────────── */
.kd-hero-home__content {
	width: 100%;
	max-width: 33.75rem; /* 540px ≈ comp heading width (node 2:778, 538px) — one-off measure */
	text-align: center;
}

/* Reset WP block margins; the rhythm below is the only vertical spacing. */
.kd-hero-home__content > * {
	margin-block: 0;
}

/* ── Heading — WHITE, local scope (global h1 is black) ───────────────────────
   Inherits the responsive H1 SIZE from theme.json (36/40 Medium) + the <768 → 28/34
   derivation from tokens.css; only the colour is set here. Two-class scope (0,2,0)
   beats theme.json's emitted element colour (0,1,0) deterministically. */
.kd-hero-home .kd-hero-home__title {
	color: var(--kd-color-white);
}

/* ── Lead — WHITE, Inter 17/23 (node 2:780) ─────────────────────────────────── */
.kd-hero-home .kd-hero-home__lead {
	color: var(--kd-color-white);
}

.kd-hero-home__lead {
	margin-top: var(--kd-gap-normal); /* 12px heading → lead (comp ~11px) */
	font-size: var(--kd-size-footer-link); /* 17px — the scale's 17px step (node 2:780) */
	line-height: var(--kd-lh-mid); /* 1.3 → 22.1 ≈ comp 23 (nearest lh token, P7 precedent) */
}

/* ── Button group — F3 primary, centred. +24px over the lead ────────────────── */
.kd-hero-home__buttons {
	margin-top: var(--kd-space-md); /* 24px lead → button (comp ~27px) */
}

/* Desktop: centre the button (the block carries no WP justifyContent, so alignment
   is controlled here — 2-class scope so it beats WP's flex-container default). */
.kd-hero-home__content .kd-hero-home__buttons {
	justify-content: center;
}

/* Focus-visible — the global F3 ring is maroon (#900000); on this maroon/dark
   gradient it would be near-invisible, so scope a WHITE ring locally (like P7).
   The 2px dark-gradient gap around it keeps the ring clearly visible.
   (0,3,0) beats gg-buttons' (0,2,0) focus rule. */
.kd-hero-home .wp-block-button__link:focus-visible {
	outline: 2px solid var(--kd-color-white);
	outline-offset: 2px;
}

/* ── Image (right) — square photo, fills its grid track ──────────────────────
   The band height is driven by the panel's min-height (above); this column just
   fills its track width and stretches to the shared row height. Its rendered
   proportions come out ≈607:718 (comp) since track width + band height both
   scale with the viewport. */
.kd-hero-home__media {
	display: flex;
	/* No aspect-ratio here on desktop: the media fills its grid track (width) and
	   stretches to the row height driven by the panel's min-height. Its proportions
	   come out ≈607:718 (track width : band height both scale with the viewport).
	   Keeping aspect-ratio here would let a tall row widen the element past its track
	   → overflow/h-scroll. Mobile sets its own aspect-ratio (stacked, full width). */
	min-width: 0;
}

/* Empty-state placeholder. WP strips an unset core/image on the front end, leaving
   the media group blank — render a neutral square so the composition reads as
   intentional pre-content (swap for a real image via the editor when it lands). */
.kd-hero-home__media:not(:has(img))::before {
	content: "";
	flex: 1 1 auto;
	background: var(--kd-color-neutral-300); /* placeholder grey (comp 2:760 / mock 2011:114) */
	border-radius: var(--kd-radius-0); /* SQUARE — decision-log shape rule */
}

/* Real image (once added): fill the column, square corners, cover. */
.kd-hero-home__media .kd-hero-home__image {
	margin: 0 !important; /* reset WP block margin */
	flex: 1 1 auto;
	display: flex;
}

.kd-hero-home__media .kd-hero-home__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--kd-radius-0); /* SQUARE — never rounded/circle */
}

/* ── Compact mode (<1024) — STACK: gradient text panel FIRST, image BELOW ──────
   The 2-col band needs a WIDE panel to keep the centred white heading clear of the
   raster's light top-left corner and still meet WCAG AA. Verified: the heading
   clears 3:1 at ≥1024 (1024 = 3.22:1, 1440 = 5.1:1) but drops to 1.81:1 at 768.
   So below 1024 — exactly where F5 collapses the nav to a hamburger (the site's
   "compact" breakpoint) — the hero stacks (panel first, image below, per mock
   2011:96) and the panel switches to the node's own dark 2-stop CSS gradient
   (2011:109), which keeps white text ≥10:1 at any width. Coherent with the nav:
   ≥1024 desktop (full nav + 2-col), <1024 compact (hamburger + stacked). */
@media (max-width: 1023.98px) {
	.kd-hero-home {
		grid-template-columns: 1fr; /* stack */
	}

	.kd-hero-home__panel {
		/* The node's real gradient (2011:109): maroon → near-black, left→right.
		   Dark stop = color-mix 29% of secondary on black = #2a0000 (token-derived,
		   no raw hex). A clean 2-stop CSS gradient can't band and is dark throughout. */
		background-image: linear-gradient(
			to right,
			var(--kd-color-secondary),
			color-mix(in srgb, var(--kd-color-secondary) 29%, var(--kd-color-contrast))
		);
		align-items: flex-start; /* left-align content */
		justify-content: flex-start; /* top-anchor content (mock has ~48px top pad) */
		text-align: left;
		min-height: 0; /* stacked: panel is content-height (mock 2011:109), not the band */
	}

	.kd-hero-home__content {
		text-align: left;
		/* keep the base 540px cap so the heading doesn't sprawl on a wide tablet;
		   on mobile the 20px-gutter column is far narrower than 540 → content fills. */
	}

	/* Button left-aligned when stacked (mock button at x20, not centred). */
	.kd-hero-home__content .kd-hero-home__buttons {
		justify-content: flex-start;
	}

	/* Image below the panel, full-bleed, 375×240 proportions (mock 2011:114). */
	.kd-hero-home__media {
		aspect-ratio: 375 / 240; /* comp mobile image proportions (one-off) */
	}
}

/* ── Mobile (<768) — type derivation (D1): lead 17→15. The heading 36→28 and the
   20px gutter come from tokens.css (its h1 element rule + --kd-gutter override). */
@media (max-width: 767.98px) {
	.kd-hero-home__lead {
		font-size: var(--kd-size-xs); /* 15px (node 2011:111) */
		line-height: var(--kd-lh-body); /* 1.5 → 22.5 ≈ node 22 */
	}
}