/**
 * Pattern: CTA Band — Gradient  (P7)
 *   patterns/cta-band.php  ·  .kd-ctaband
 *
 * Full re-skin of the NHC stock CTA. Dropped: the alignfull cover + Featured
 * Image, the 807px / 24px-radius purple card, Montserrat, and the Donate +
 * Volunteer pill pair. Rebuilt to the Gracie home CTA comp.
 *
 * Design source (file g3BMymX7x188yz0AGwEMkL), home instance:
 *   • Band rect   2:759  x112 y3230 1213×400 — gradient raster fill, SQUARE
 *                        corners, sits at CONTENT width (1216 — 112px page-bg
 *                        margins each side at 1440), NOT viewport full-bleed.
 *   • Heading     2:821  Public Sans Medium 30/38, WHITE, centred, 2 lines
 *   • Paragraph   2:820  Inter Regular 16/24, WHITE, centred, ~3 lines (568px)
 *   • Button      2:816  "Connect Today" — 2px WHITE border, TRANSPARENT fill,
 *                        white DM Sans 17, 49px, square. A white-outline GHOST
 *                        button, NOT the filled F3 primary (which would vanish on
 *                        the red gradient). Identical geometry to F3.
 *   All three CTA instances (Home 2:759, About 22:637, Who 22:645) share the
 *   identical gradient + composition.
 *
 * GRADIENT (decision-log Q10): the fill is a baked raster, not a CSS gradient.
 *   Exported the exact band crop of the Figma raster fill at 2x
 *   (assets/images/gg-cta-gradient.webp, 2425×800) and set it as background-image
 *   over a maroon (--kd-color-secondary) fallback.
 *
 * WHITE TEXT scoped LOCALLY (F1 flag): the global <h2> is maroon #900000. On this
 *   dark gradient the heading + paragraph are white, scoped under .kd-ctaband only
 *   — the global h2/button rules are untouched.
 *
 * Every design value goes through a --kd-* token (TOKEN-DRY). The only literals are
 * commented one-off structural values (band min-height, content measure, the
 * ghost-button border width, the gradient asset path).
 */

/* ── The band — content-width gradient panel ─────────────────────────────────
   No align: as a default-align child of the constrained post-content it caps at
   the 1216 content column (matches the comp's 112px page-bg margins) — no
   full-bleed breakout, no card. Square corners. Its own padding-block is the
   internal inset; the 100px section rhythm above it comes from the global owl. */
.kd-ctaband {
	min-height: 400px; /* comp 2:759 band height (one-off structural literal) */
	display: flex;
	flex-direction: column;
	align-items: center; /* centre the content column horizontally */
	justify-content: center; /* centre it vertically within the 400px band */
	padding-block: var(--kd-space-xl); /* 64px — min top/bottom inset (comp ~65px) */
	padding-inline: var(--kd-space-md); /* 24px — side inset (mobile safety; moot on desktop) */
	border-radius: var(--kd-radius-0); /* SQUARE — decision-log shape rule */
	background-color: var(--kd-color-secondary); /* maroon fallback under the raster */
	background-image: url(../../images/gg-cta-gradient.webp);
	background-size: cover;
	/* Asset aspect (3.03) ≈ band aspect on desktop → near-zero crop, matches the
	   comp; on portrait mobile `center` shows the mid-red-top slice so the text
	   stays legible (the light top-left corner never sits under text). */
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
}

/* ── Centred content column, capped to a measure ─────────────────────────────
   600px ≈ the comp's paragraph (568px) / heading (432px) block. */
.kd-ctaband__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kd-space-md); /* 24px — heading → paragraph (comp) */
	width: 100%;
	max-width: 35.5rem; /* 568px content measure = the comp's paragraph width (node 2:820) — one-off */
}

/* Reset WP block-gap margins so the flex gap above is the only vertical rhythm. */
.kd-ctaband__content > * {
	margin-block: 0;
}

/* ── Heading — WHITE, local scope (global h2 is maroon) ──────────────────────
   Inherits the theme.json H2 SIZE (Public Sans Medium 30px) + the global <768
   24px derivation; only colour + the tighter CTA line-height are set here.
   Two-class scope (0,2,0) so the white BEATS theme.json's emitted elements.h2
   colour (maroon, 0,1,0) deterministically — a single class only ties it and
   the winner would depend on stylesheet print order (WP-version dependent). */
.kd-ctaband .kd-ctaband__heading {
	color: var(--kd-color-white);
	line-height: var(--kd-lh-mid); /* 1.3 ≈ 39px — the comp's tight 38px CTA heading (vs the 46px section H2) */
}

/* ── Paragraph — WHITE, Inter 16/24 (matches comp 2:820) ─────────────────────── */
.kd-ctaband__lead {
	color: var(--kd-color-white);
	font-size: var(--kd-size-body); /* 16px */
	line-height: var(--kd-lh-body); /* 1.5 → 24px */
}

/* ── Button group — +24px over the 24px column gap = 48px paragraph → button ─── */
.kd-ctaband__buttons {
	margin-top: var(--kd-space-md); /* 24px (+ the 24px column gap = 48px, comp) */
}

/* ── White-outline GHOST button (comp 2:816) ─────────────────────────────────
   Scoped LOCALLY under .kd-ctaband — the global F3 primary is untouched. Geometry
   (49px height, 30px pad, DM Sans 17, square radius) is INHERITED from
   gg-buttons.css's base rule, not re-declared (button size stays single-sourced).
   Specificity (0,5,0) = gg-buttons' primary selector + 1 class, so it wins
   regardless of glob load order (cta-band.css loads before gg-buttons.css). */
.kd-ctaband
	.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) */
}

/* Hover / active — DERIVED (the comp designs no state for this ghost button):
   invert to a solid white fill with maroon text — high contrast, on-brand. */
.kd-ctaband
	.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 on white */
	border-color: var(--kd-color-white);
}

.kd-ctaband
	.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 maroon ring would VANISH on this maroon gradient, so
   scope a WHITE ring offset off the white border (the dark gradient shows in the
   3px gap → clearly visible). Specificity (0,3,0) beats gg-buttons' (0,2,0). */
.kd-ctaband .wp-block-button__link:focus-visible {
	outline: 2px solid var(--kd-color-white);
	outline-offset: 3px;
}

/* ── Mobile (<768) — keep the gradient, tighten the vertical inset ────────────
   Heading auto-drops to 24px via the global <768 h2 rule (D1). The 20px page
   gutter is handled globally; the band fills the content column and stacks. */
@media (max-width: 767.98px) {
	.kd-ctaband {
		padding-block: var(--kd-space-lg); /* 40px */
	}
}