/**
 * Pattern: Hero — Interior (Banner)  (P2)
 *   patterns/hero-banner.php  ·  .kd-hero-banner
 *
 * Net-new. The maroon-gradient banner + white page title at the top of EVERY
 * interior page (About, Ways I Support, Who I Support, Portfolio, Contact).
 * Full-bleed band; the title is constrained to the site content column and
 * left-aligned, vertically centred in the band.
 *
 * NAMESPACE NOTE — why .kd-hero-banner and NOT .kd-hero-interior:
 *   .kd-hero-interior is already occupied by dead NHC-leftover rules in the SHARED
 *   global.css (a wp-block-cover post-title hero keyed off the stale
 *   --kd-hero-interior-min:452px !important + a MISSING hero-gradient.svg, consumed
 *   by parts/hero-interior.html + single/single-post/archive templates — none of
 *   which Gracie uses). Reusing that class would inherit its !important
 *   min-height/padding and fight this pattern, and the isolation rule forbids
 *   editing global.css. So P2 lives in its own namespace. Those dead global rules
 *   (+ the stale token + the orphaned part/templates) are a global.css-cleanup
 *   candidate — flagged in the handoff, NOT touched here.
 *
 * Design source (file g3BMymX7x188yz0AGwEMkL):
 *   • Band   2:1237 / 14:161 — x0 y100, FULL-BLEED 1440×218, maroon→dark raster
 *     gradient fill (bright red-orange top-left → near-black bottom-right). The same
 *     gradient renders on every interior page (both band screenshots byte-identical).
 *   • Title  2:1238 "About Tanya Gracie" — x112 (= the content-column left edge),
 *     LEFT-aligned, vertically ~centred. Public Sans SemiBold 36/40, WHITE,
 *     letter-spacing 0.72px (tracking).
 *     ⚠ Contact node 14:164 draws the same title as Public Sans MEDIUM with no
 *     tracking — an in-file inconsistency. Built to the figma-analysis canonical
 *     spec (Interior page title = SemiBold + 0.72px, cites 2:1238). Flagged.
 *
 * Band height 218px desktop → 140px mobile (decision-log D1). One-off commented
 * literals: no correct token exists (--kd-hero-interior-min is the stale 452px NHC
 * value). A --kd-hero-banner-height (218/140) token is a Foundation follow-up
 * candidate — flagged, NOT inlined into tokens.css from a pattern build.
 *
 * GRADIENT (decision-log Q10): the band's own exported Figma render →
 * assets/images/gg-hero-interior-gradient.webp (2880×436, pre-cropped to the band's
 * 1440:218 framing) as background-image over a --kd-color-secondary maroon fallback.
 * background-size:100% 100% (stretch) keeps the full light→dark range edge-to-edge at
 * any band width — a smooth gradient shows no artifact under non-uniform scaling,
 * whereas `cover` would centre-crop away the bright-left/dark-right framing when the
 * band is narrower than 1440:218 (tablet/mobile).
 *
 * WHITE TITLE scoped LOCALLY (F1 band-pattern flag): the global <h1> is black. Here
 * the title is white, scoped under .kd-hero-banner only — the global h1/h2 rules are
 * untouched. 2-class scope (0,2,0) beats theme.json's emitted h1 colour
 * deterministically. Weight is overridden Medium→SemiBold (theme.json h1 is 500; node
 * 2:1238 is 600). Size (36→28 <768), line-height, and the 20px mobile gutter all
 * inherit from theme.json + tokens.css because the title is a real <h1>.
 *
 * a11y: white title on the gradient, sampled under the title at its vertical centre —
 * worst case (band x112, where the title starts) = white on rgb(196,17,2) = 6.13:1,
 * improving to ~11:1 rightward. Passes WCAG AA for normal AND large text (the title is
 * also large: 36/28px). The title sits at the band's vertical centre, past the
 * brightest top-left corner, so contrast never drops to the corner's value.
 *
 * TOKEN-DRY: every value goes through a --kd-* token except the commented one-off band
 * heights (218/140, no token yet) and the tracking (0.02em = 0.72px @36px). Square.
 */

/* ── Full-bleed maroon-gradient band ─────────────────────────────────────────
   alignfull → spans the viewport. HORIZONTAL alignment: the band pads by the plain
   site gutter (--kd-gutter) and the title (rule below) is capped at --kd-content-max
   and centred within that gutter box — together that reproduces the site content
   column's exact left edge, max(gutter, (viewport - content-max)/2), at EVERY width
   (title + content share the one contentSize token, so they track through the clamp).
   This REPLACED an earlier `padding-inline: --kd-edge-pad`, which drifted the title
   LEFT of the content on wide screens: edge-pad's (100% - content-max)/2 term resolves
   `100%` against the gutter-inset containing block on an alignfull element, so it
   under-inset by one gutter once contentSize became a wide clamp (see the __title note
   + the padding-inline note below). NOTE this is NOT the header/footer mechanism (those
   bands aren't alignfull-inside-the-content-flow). Flex column + justify-content centre
   vertically centres the (possibly wrapping) title. */
.kd-hero-banner {
	display: flex;
	flex-direction: column;
	justify-content: center; /* vertical-centre the title in the band */
	/* Sit FLUSH below the header. The default page.html <main> (.kd-main--no-hero)
	   adds --kd-no-hero-top (134px) top clearance for pages whose first block is NOT
	   a hero. An interior banner IS the page hero (Figma: band y100, flush below the
	   98px nav), and it's always the page's first content block — so cancel that
	   clearance with an equal, token-based negative margin. This is the ISOLATED
	   alternative to editing the shared no-hero-top guard in global.css (line ~1043,
	   which only exempts the .kd-hero-interior/.kd-hero-home template-part heroes, not
	   a content pattern). The cleaner-but-SHARED fix = add .kd-hero-banner to that
	   :not(:has()) guard and drop this line; the two are mutually exclusive — flagged
	   for the global.css cleanup, NOT applied here. Assumes the standard page template
	   (interior pages use page.html + this pattern first), not page-with-hero.
	   The actual declaration is one rule down at (0,2,0) — see the note there. */
	min-height: 218px; /* interior banner height — decision-log D1 (one-off; no token yet, see header note) */
	padding-block: var(--kd-space-md); /* 24px floor so a wrapped title never touches the band edges */
	padding-inline: var(--kd-gutter); /* just the site gutter (112px @1440 → 20px <768). The title itself is
	   capped + centred at --kd-content-max below, so the two together reproduce the CONTENT column's exact
	   layout (gutter + constrained contentSize, centred) at EVERY width — see the __title note. NOT --kd-edge-pad:
	   edge-pad folds the centring into the padding via (100% - content-max)/2, but on an alignfull banner `100%`
	   resolves against the gutter-inset containing block, so on wide screens (contentSize is now a clamp) it
	   under-insets the title by the gutter and the title drifts LEFT of the content column. */
	background-color: var(--kd-color-secondary); /* maroon fallback under the raster (webp fail / no image) */
	background-image: url(../../images/gg-hero-interior-gradient.webp);
	background-size: 100% 100%; /* stretch: full light→dark range edge-to-edge at any band width */
	background-repeat: no-repeat;
	border-radius: var(--kd-radius-0); /* SQUARE — decision-log shape rule (full-bleed has no corners; set for intent) */
}

/* Flush pull-up (see the note in .kd-hero-banner above). WP core resets the first
   content block's top margin via `:root :where(.is-layout-constrained) > :first-child
   { margin-block-start: 0 }` (specificity 0,1,0, LOGICAL property) — which ties+beats a
   plain physical `margin-top`. So set the SAME logical property at (0,2,0): the band is
   always .alignfull, so `.kd-hero-banner.alignfull` reliably wins and the −134px pull
   applies, seating the banner flush under the header. */
.kd-hero-banner.alignfull {
	margin-block-start: calc(-1 * var(--kd-no-hero-top));
}

/* ── White page title — LOCAL scope (global h1 is black) ──────────────────────
   Only colour, weight (Medium→SemiBold, node 2:1238) and tracking are set here;
   family/size/line-height are inherited (real <h1>). 2-class scope (0,2,0) beats
   theme.json's emitted h1 element colour regardless of print order. */
.kd-hero-banner .kd-hero-banner__title {
	/* Cap + centre the title at the content width so it tracks the site content column.
	   Inside the gutter-padded band this reproduces WP's constrained-layout centring
	   EXACTLY: at ≤~1440 the title fills the gutter box (left edge = gutter, unchanged);
	   on wider screens it caps at contentSize and centres, adding the same offset the
	   content column gets — so title-left == content-left at every width (algebraically
	   identical to max(gutter,(vw-contentSize)/2)). --kd-content-max is the SAME token
	   (theme.json contentSize) the constrained content is capped at.
	   NOTE the flex mechanics: the title is a flex item (band is a flex column), so
	   `margin-inline:auto`/`max-width` alone would shrink it to its text and mis-centre
	   THAT — an explicit `width` + `align-self:center` is what keeps it a content-width
	   BLOCK (text left-aligned inside) that centres on the cross axis. */
	width: min(100%, var(--kd-content-max)); /* fill the gutter box, capped at contentSize */
	align-self: center; /* centre the capped block on the flex cross (horizontal) axis */
	margin-block: 0; /* drop the default heading block margins; the band centres it vertically */
	color: var(--kd-color-white);
	font-weight: var(--kd-fw-heading); /* SemiBold 600 (node 2:1238); theme.json h1 is Medium 500 */
	letter-spacing: 0.02em; /* 0.72px @36px — node 2:1238 tracking (scales to 0.56px at the 28px mobile step) */
}

/* ── Mobile (<768): band 218→140px (decision-log D1). The title 36→28 and the fixed
   20px gutter come from tokens.css (its h1 element rule + the --kd-gutter/--kd-edge-pad
   override), so only the band height changes here. */
@media (max-width: 767.98px) {
	.kd-hero-banner {
		min-height: 140px; /* interior banner height, mobile — decision-log D1 (one-off) */
	}
}