/**
 * Pattern: Highlight band (maroon)  (P6)
 *   patterns/highlight-band-{list,para,quote}.php  ·  .kd-highlightband*
 *
 * A content-width maroon highlight band (1216 content column, 112px page-bg
 * margins at 1440 — NOT viewport full-bleed; same width model as P7 CTA band).
 * SQUARE (--kd-radius-0; the Figma rects carry a corner radius → stripped, Gracie
 * square rule + P7 precedent). All text is WHITE, scoped LOCALLY under
 * .kd-highlightband* — the global <h2> is maroon (F1) and is NOT touched (P7
 * precedent: a single class only ties theme.json's maroon h2, so the white uses a
 * two-class 0,2,0 selector to win deterministically regardless of print order).
 *
 * Three content shapes, one partial, one namespace:
 *   (a) --list   heading + para + ghost button   | P5 on-band divider list  (Home 2:801)
 *   (b) --para   heading statement | 3-paragraph body                        (Who  2:1227)
 *   (c) --quote  single centred statement                                    (About 2:971)
 *
 * Design source (file g3BMymX7x188yz0AGwEMkL):
 *   Band 2:801  1216x474 @x112  Home  — "Who I work with"
 *   Band 2:1227 1216x413 @x112  Who   — intro statement + body
 *   Band 2:971  1216x474 @x112  About — mission quote (centred, measure 699px)
 *
 * !! BACKGROUND — NODE GRADIENT (flag 1 RESOLVED by Alain 2026-07-15) !!
 *   The LIVE Figma rectangles 2:801 (variant a) and 2:971 (variant c) are authored
 *   as a LEFT->RIGHT gradient #900000 -> #d62609; only 2:1227 (variant b) is FLAT
 *   #900000. Alain confirmed: honour the nodes — give variants a (--list) + c
 *   (--quote) the gradient, keep variant b (--para) FLAT. Per Alain's explicit call
 *   the gradient is an EXPORTED FIGMA RASTER background-image (the P1/P7 convention,
 *   NOT a CSS linear-gradient): assets/images/gg-highlightband-gradient.webp (the
 *   2:801 fill; 2:801 and 2:971 are the same gradient, so one asset covers both).
 *   It sits OVER the .kd-highlightband maroon background-color, which stays as the
 *   fallback (shows if the webp fails, and IS the fill for variant b).
 *
 * TOKEN-DRY: every colour/size/font flows through a --kd-* token. One-off literals
 * (band min-heights 474/413, the 28px quote size [off the 15/16/17/20/30/36 scale],
 * the 699px quote measure, the 38/30 statement leading, the 0.15px heading tracking,
 * the 23/17 body leading) are pattern-specific + commented. Namespace .kd-highlightband*
 * — distinct from .kd-ctaband / .kd-dividerlist / .kd-mediasplit / .kd-values.
 */

/* == The band — content-width maroon panel (all variants) =====================
   No align on the pattern group -> as a default-align child of the constrained
   post-content it caps at the 1216 content column (112px page-bg margins at 1440),
   matching the comp — no full-bleed breakout, no card. Square. Flat maroon. */
.kd-highlightband {
	background-color: var(--kd-color-secondary); /* maroon #900000 — the flat fill for variant b + the fallback under the gradient raster on a/c (see BACKGROUND flag above) */
	border-radius: var(--kd-radius-0); /* SQUARE — decision-log shape rule */
	padding-block: var(--kd-space-xl); /* 64px internal top/bottom inset (comp ~64) */
	padding-inline: var(--kd-space-xl); /* 64px side inset (comp band-edge -> content ~70-83) */
}

/* == Gradient fill — variants (a) --list + (c) --quote ONLY (flag 1, Alain) ===
   Nodes 2:801 (a) + 2:971 (c) are a #900000->#d62609 L->R gradient; variant (b)
   --para stays FLAT (its node 2:1227 is flat, and it is intentionally NOT listed
   here). Exported Figma raster (P1/P7 convention, NOT a CSS gradient — Alain's
   call), layered over the maroon background-color fallback above. Same relative
   asset-path style as .kd-ctaband / .kd-hero-banner. */
.kd-highlightband--list,
.kd-highlightband--quote {
	background-image: url(../../images/gg-highlightband-gradient.webp);
	background-size: 100% 100%; /* stretch: full L->R #900000->#d62609 range edge-to-edge at any band height (band height varies 474/474; same handling as .kd-hero-banner) */
	background-repeat: no-repeat;
}

/* == Split variants (a, b) — 2-column, vertically centred ==================== */
.kd-highlightband--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--kd-space-xl); /* 64px column gap */
	align-items: center;
	align-content: center;
	min-height: 474px; /* comp 2:801 band height (one-off structural literal) */
}
/* Neutralise WP flow block-gap margins on the grid items (grid gap owns rhythm). */
.kd-highlightband--split > * {
	margin-block: 0;
}
/* Variant (b) band is shorter. */
.kd-highlightband--para {
	min-height: 413px; /* comp 2:1227 band height (one-off) */
}

/* == Centre variant (c) — single centred statement ========================== */
.kd-highlightband--center {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 474px; /* comp 2:971 band height (one-off) */
}

/* == Heading — WHITE, local scope (global h2 stays maroon) ===================
   Two-class scope (0,2,0) beats theme.json's maroon h2 deterministically,
   independent of stylesheet print order (P7's hard-won precedent). Size (30px) +
   family (Public Sans Medium 500) inherit from theme.json elements.h2; the <768
   24px derivation also inherits (tokens.css). */
.kd-highlightband .kd-highlightband__heading {
	color: var(--kd-color-white);
}
/* Variant (a) section-style heading carries the 0.15px H2 tracking (comp 2:806). */
.kd-highlightband--list .kd-highlightband__heading {
	letter-spacing: 0.15px; /* comp 2:806 — matches the section-H2 tracking */
}
/* Variant (b) statement heading — tighter 38px leading, no tracking (comp 2:1229). */
.kd-highlightband--para .kd-highlightband__heading {
	line-height: 1.2667; /* 38/30 — comp 2:1229 (vs the 46px section default) */
}

/* == Variant (a) left column — centred lead: heading + para + button ========= */
.kd-highlightband__col--lead {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kd-space-md); /* 24px — heading -> para -> button rhythm (comp ~19-22) */
	text-align: center;
}
.kd-highlightband__col--lead > * {
	margin-block: 0; /* flex gap owns the rhythm */
}
/* Variant (a) paragraph — WHITE Inter 16/24 (comp 2:805). */
.kd-highlightband__lead {
	color: var(--kd-color-white);
	font-size: var(--kd-size-body); /* 16px */
	line-height: var(--kd-lh-body); /* 1.5 -> 24px */
}

/* == Variant (b) right column — left-aligned 3-paragraph body ================
   Node 2:1230 is authored Work Sans Regular 17/23. FLAGS: (1) Work Sans is NOT a
   theme font -> mapped to the theme body font (Inter, inherited). (2) 17px is off
   the 16px body — it is the scale's "lead" size (P1 hero node 2:780); no dedicated
   --kd-size-lead token exists, nearest is the 17px footer-link/btn preset. Both
   flagged for the designer / a foundation pass. */
.kd-highlightband__body > * {
	margin-block: 0;
}
.kd-highlightband__body > * + * {
	margin-block-start: var(--kd-space-sm); /* 16px between paragraphs (comp mb-16) */
}
.kd-highlightband__body p {
	color: var(--kd-color-white);
	font-size: var(--kd-size-footer-link); /* 17px lead (node 2:1230) — see FLAG above */
	line-height: 1.3529; /* 23/17 — comp 2:1230 */
}

/* == Variant (c) quote — centred, capped measure ============================
   Inter Regular 400 (body defaults inherited) 28/42 white, measure ~699px. */
.kd-highlightband__quote {
	max-width: 699px; /* comp 2:981 measure (one-off literal) */
	margin-inline: auto;
	color: var(--kd-color-white);
	font-size: 1.75rem; /* 28px — comp 2:981; OFF the 15/16/17/20/30/36 scale (one-off; foundation-flag) */
	line-height: var(--kd-lh-body); /* 1.5 -> 42px (42/28) */
}

/* == Variant (d) --cream — left-aligned closing statement (Who I Support page
   closing, 2026-09 designer revision; Alain + Sara approved; Figma group
   2052:113 "Closing statement (Sara: light yellow box)" — box 2052:110,
   statement 2052:111, closing line 2052:112). CREAM, not maroon: overrides
   only background + text colour from the base .kd-highlightband rule above
   (same same-specificity/source-order precedent --para uses to override
   --split's min-height) — no gradient, no border, no shadow, single column,
   left-aligned, full inner width (both lines are plain block <p>s). */
.kd-highlightband--cream {
	background-color: var(--kd-color-cream); /* #fff8d4 — same token the footer band uses */
	padding-block: var(--kd-space-xl); /* 64px top/bottom (comp 2052:110) */
	padding-inline: 80px; /* 80px sides (comp) — off the --kd-space scale (64/96); one-off literal */
}

/* Statement (2052:111) — Public Sans Medium 500, 30/38, maroon, left-aligned.
   A <p>, not an <h2> (Sara: keep the document outline clean) — so it can't
   inherit theme.json's elements.h2 styling; declared explicitly here to match
   it (same family/weight/colour theme.json gives the real H2). */
.kd-highlightband--cream .kd-highlightband__statement {
	margin: 0;
	font-family: var(--kd-font-heading); /* Public Sans */
	font-weight: 500; /* Medium — matches theme.json elements.h2 */
	font-size: var(--kd-size-h2); /* 30px */
	line-height: 1.2667; /* 38/30 — same ratio --highlightband--para uses for its heading */
	color: var(--kd-color-secondary); /* maroon #900000 — theme.json's H2 colour token */
	text-align: left;
}

/* Closing line (2052:112) — Public Sans Medium 500, 20/28, maroon, 24px below
   the statement (comp). */
.kd-highlightband--cream .kd-highlightband__closing {
	margin: var(--kd-space-md) 0 0; /* 24px below the statement (comp) */
	font-family: var(--kd-font-heading);
	font-weight: 500;
	font-size: var(--kd-size-contact-info); /* 20px */
	line-height: 1.4; /* 28/20 (comp) */
	color: var(--kd-color-secondary);
	text-align: left;
}

/* == Variant (a) button — white-outline GHOST (a11y fix; flag RESOLVED) ========
   Was the F3 filled primary (#d62609). On this #900000 maroon band that failed
   twice: (1) resting boundary #d62609-fill vs #900000-band ≈ 1.9:1 (< WCAG
   1.4.11's 3:1 non-text contrast for the button edge); (2) F3's hover fill IS
   #900000 = the band, so the button VANISHED on hover. Fixed to a ghost — the
   same resolution P7's .kd-ctaband derived for the identical problem on its band.
   Scoped under .kd-highlightband--list (the --list class exists on variant (a)
   ONLY; variants (b/c) and the global F3 button are untouched — no leak). Geometry
   — 49px height, horizontal padding, --kd-radius-0 square — is INHERITED from
   gg-buttons.css and NOT re-declared (button size stays single-sourced); only
   border/background/colour are overridden. Specificity (0,5,0) = gg-buttons'
   primary selector (0,4,0) + the --list class, so it wins regardless of glob load
   order. */
.kd-highlightband--list
	.wp-block-button:not(.is-style-outline):not(.is-style-text-link)
	.wp-block-button__link {
	background-color: transparent;
	color: var(--kd-color-white);
	border: 2px solid var(--kd-color-white); /* 2px = the theme's border width (forms + F3 focus + P7 ghost); known shared-token candidate — commented, NOT promoted */
}

/* Hover — invert to a solid white fill + maroon text so the button stays clearly
   visible on the band (P7's derived state; the comp designs no ghost hover). */
.kd-highlightband--list
	.wp-block-button:not(.is-style-outline):not(.is-style-text-link)
	.wp-block-button__link:hover {
	background-color: var(--kd-color-white);
	color: var(--kd-color-secondary); /* maroon #900000 on white */
	border-color: var(--kd-color-white);
}

/* Active — white fill + the pressed maroon shade (mirrors P7 exactly). */
.kd-highlightband--list
	.wp-block-button:not(.is-style-outline):not(.is-style-text-link)
	.wp-block-button__link:active {
	background-color: var(--kd-color-white);
	color: var(--kd-color-maroon-active); /* #6b0000 on white */
	border-color: var(--kd-color-white);
}

/* Focus-visible — the global F3 ring is maroon #900000 -> INVISIBLE on this maroon
   band, so scope a WHITE ring (a11y, WCAG 2.4.7 — same necessity + precedent as
   P7). (0,3,0) beats gg-buttons' (0,2,0) focus rule. Kept from the filled build. */
.kd-highlightband .wp-block-button__link:focus-visible {
	outline: 2px solid var(--kd-color-white);
	outline-offset: 2px;
}

/* == Mobile (<768) — stack the 2-col variants, tighten insets ================
   The band stays content-width (the 20px page gutter is global -> maroon reaches
   20px from the viewport edge). Heading auto-drops to 24px via the global <768 h2
   rule (tokens.css). */
@media (max-width: 767.98px) {
	.kd-highlightband {
		padding-block: var(--kd-space-lg); /* 40px */
		padding-inline: var(--kd-space-md); /* 24px — text inset inside the band */
	}
	.kd-highlightband--split {
		grid-template-columns: 1fr; /* stack: heading/lead above, list/para below */
		gap: var(--kd-space-lg); /* 40px row gap */
		min-height: 0; /* stacked content defines height */
	}
	.kd-highlightband--center {
		min-height: 0;
	}

	/* Variant (d) --cream mobile inset (comp): 32px top/bottom. Sides already
	   fall through to the base rule's 24px (--kd-space-md) above — same value
	   the comp wants, no override needed. */
	.kd-highlightband--cream {
		padding-block: 32px; /* comp mobile inset — off the space scale (24/40); one-off literal */
	}

	/* Statement steps down to the theme's H2 mobile derivation (D1: 30→24,
	   32/24 leading). Declared directly here (not inherited): a <p> was never
	   going to pick up tokens.css's h2-element mobile rule, which on <768 h2
	   elements themselves is separately blocked by stale global.css !important
	   rules anyway (see tokens.css ~L286) — irrelevant here either way since
	   this is a <p>, but the target VALUE (24/32) is the same one D1 specifies. */
	.kd-highlightband--cream .kd-highlightband__statement {
		font-size: 1.5rem; /* 24px */
		line-height: 1.333; /* 32/24 */
	}

	/* Closing line mobile size (comp) — OFF the 15/16/17/20/30/36 scale, same
	   one-off-literal precedent as the About quote's 28px above. */
	.kd-highlightband--cream .kd-highlightband__closing {
		font-size: 18px;
		line-height: 1.444; /* 26/18 */
	}
}