/**
 * Pattern: Stats / Impact Row  (patterns/stats-row.php)
 *
 * "Our Impact" band — centered H2 + photo-backed stat cards.
 *
 * 2026-08-21 (Alain's direction, reference: a dark gradient-over-photo insight
 * card): the stats were plain centered text blocks and the numbers did not
 * carry. They are now core `wp:cover` cards — real member photo, Deep Petrol
 * scrim, Sky Cyan label chip, oversized number, headline, supporting line.
 * The reference's ingredients were translated to BLG's palette and type rather
 * than copied: its green→black gradient becomes Georgia Blue → Deep Petrol,
 * its neutral sans becomes Raleway/Inter, its pill controls are dropped (they
 * implied an interactive dashboard widget this is not).
 *
 * Why Cover and not a hand-rolled div with a CSS background: Cover keeps the
 * image an attachment, so it survives a domain change and stays swappable in
 * the editor (decision #8). CSS only adds what Cover cannot — the brand
 * gradient and the bottom scrim that make bottom-anchored text legible over an
 * arbitrary photo.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 */

/* ── Section band ──────────────────────────────────────────────────────────── */
.kd-stats-section {
	text-align: center;
	background-color: var(--blg-color-base);
	padding-block: var(--blg-band-pad-y);
}

/* ── Section heading ───────────────────────────────────────────────────────
   Sentence case, Deep Petrol, on this page's H2 scale. The donor comp had it
   Title-Cased, Georgia Blue and 50px — corrected once the band shipped next to
   real neighbours: blue is the label/number role here, and using it for the
   heading too made the band read as three competing blues. */
/* Type comes from the shared `.kd-section-heading` class in global.css (the
   same 32→50px clamp `.kd-split__heading` uses), so this band's head reads
   identically to the split heads above it — Alain: "the split card h2 are 50
   and they look great, so why is this one smaller". Only the trailing margin
   and the case reset belong to this pattern. The donor styling was
   36px/900 Georgia Blue Title-Case; blue is the label/number role here, so
   using it for the heading too made the band read as three competing blues. */
.kd-stats-section__heading {
	text-transform: none;
	color: var(--blg-color-contrast);
	margin: 0 0 var(--blg-space-lg); /* 40px heading → grid */
}

/* ── Grid ──────────────────────────────────────────────────────────────────
   layout:default on the group = is-layout-flow; overridden to grid. Cards are
   equal-height by grid default, which is what keeps two very different number
   lengths ("39" vs "$202,393,427") sitting on the same baseline. */
.kd-stats-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--blg-space-md) !important; /* 24px */
	margin: 0 auto !important;
	width: 100% !important;
	max-width: var(--blg-content-max, 75rem);
	text-align: left;
}

/* Zero WP's is-layout-flow child margin so the grid gap drives spacing. */
.kd-stats-grid > * {
	margin-block: 0 !important;
}

/* 2-up variant — two confirmed numbers, so two cards (see the pattern's
   data-gating note). */
.kd-stats-grid.kd-stats-grid--2up {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ── Card ──────────────────────────────────────────────────────────────────
   Cover supplies the photo + flat dim. Everything below is the part Cover
   can't do. */
.kd-stats-grid .kd-stat-card.wp-block-cover {
	border-radius: var(--blg-radius-lg); /* 24px — matches the inline attr */
	overflow: hidden;
	padding: var(--blg-space-lg); /* 40px */
	min-height: 30rem; /* 480px */
}

/* ── The scrim ─────────────────────────────────────────────────────────────
   Painted ON COVER'S OWN BACKGROUND LAYER, not as a ::after on the card.

   Two earlier attempts used `.kd-stat-card::after` with a raised z-index on
   the inner container, and both rendered the copy unreadable — Alain:
   "the text + number are barely readable" — because the override never took
   and the scrim painted straight over the text. Core's rule is
   `body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(
   .wp-block-cover__background + .wp-block-cover__inner-container))
   .wp-block-cover__inner-container` — (0,6,1) once the nested :has() is counted
   properly, which is why a 4- then 5-class override both lost. `pointer-events:
   none` on the pseudo also hid the problem from elementFromPoint, so a hit test
   reported the number on top while the eye said otherwise.

   `.wp-block-cover__background` already sits below the inner container by
   core's own ordering, so putting the gradient there needs no z-index at all
   and nothing to out-specify. Its `opacity` (from has-background-dim-NN) is
   overridden to 1 and the alpha moved into the gradient stops, which also
   makes the scrim independently tunable from the block's dimRatio.

   The gradient does two jobs: tint the photo into the palette (Georgia Blue
   from the top-left), and guarantee contrast for bottom-anchored text over a
   photo we do not control. */
.kd-stats-grid .kd-stat-card .wp-block-cover__background {
	opacity: 1; /* alpha lives in the stops below */
	/* !important because WP's preset colour classes ship as
	   `.has-contrast-background-color{background-color:…!important}` — without
	   it the span stayed solid Deep Petrol at opacity 1 and the photograph was
	   completely hidden behind it. Measured, after two passes where the cards
	   rendered as flat blue rectangles. */
	background-color: transparent !important;
	background-image:
		/* Brand wash — a tint across the top-left, NOT a cover. Kept light so
		   the photograph is still a photograph: the first pass at this scrim
		   was opaque enough that both cards read as flat blue rectangles and
		   the images were invisible. */
		linear-gradient(
			160deg,
			color-mix(in srgb, var(--blg-color-primary) 38%, transparent) 0%,
			transparent 58%
		),
		/* Bottom scrim — solid where the copy sits, gone by the top third so
		   the image reads. Content is bottom-anchored (the label row uses
		   margin-bottom:auto), so the top ~35% of the card is deliberately
		   free of text and is where the photo shows. */
		linear-gradient(
				to top,
				var(--blg-color-contrast) 24%,
				color-mix(in srgb, var(--blg-color-contrast) 78%, transparent)
					46%,
				color-mix(in srgb, var(--blg-color-contrast) 34%, transparent)
					68%,
				transparent 92%
			);
}

/* The inner container must FILL the card, otherwise the label's
   `margin-bottom:auto` has no space to push into and the label just sits on
   top of the number instead of at the top of the card (Alain: "can we put
   Combined impact and Georgia B Corps on top of their cards always"). Cover's
   `contentPosition` was doing the opposite — bottom-anchoring the whole block
   — so it was removed from the pattern rather than fought here. */
.kd-stats-grid .kd-stat-card.wp-block-cover {
	align-items: stretch;
}

.kd-stats-grid .kd-stat-card .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-self: stretch;
}

/* ── Label row — chip + text ───────────────────────────────────────────────
   margin-bottom:auto pushes everything else to the bottom of the card, which
   is the reference's anatomy: label pinned top, number + copy pinned bottom. */
.kd-stats-grid .kd-stat-card__label {
	display: flex;
	align-items: center;
	gap: 0.625rem; /* 10px */
	margin: 0 0 auto !important;
	font-family: var(--blg-font-heading);
	font-size: var(--blg-size-eyebrow);
	font-weight: var(--blg-fw-heading);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blg-color-base);
	/* The label sits high on the card, where the scrim is deliberately weak so
	   the photo can show — so it carries its own shadow rather than relying on
	   the gradient. */
	text-shadow: 0 1px 10px
		color-mix(in srgb, var(--blg-color-contrast) 85%, transparent);
}

/* Smaller sibling of the sitewide .blg-icon circle (56px) — a 32px chip suits
   a label row; forcing the shared 28px glyph into it would overflow. */
.kd-stats-grid .kd-stat-card__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: var(--blg-color-accent); /* Sky Cyan */
	color: var(--blg-color-contrast);
}

/* The FA kit swaps <i> for <svg> at runtime and colours via `fill`, not
   `color` alone — the same trap already documented in values-row.css. */
.kd-stats-grid .kd-stat-card__chip i,
.kd-stats-grid .kd-stat-card__chip svg {
	width: 0.875rem;
	height: 0.875rem;
	font-size: 0.875rem;
	color: var(--blg-color-contrast);
	fill: var(--blg-color-contrast);
}

/* ── The number — the reason this pattern exists ───────────────────────── */
.kd-stats-grid .kd-stat-card__number {
	display: block;
	margin: var(--blg-space-lg) 0 0 !important;
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: clamp(3.5rem, 8vw, 6.5rem); /* 56 → 104px */
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--blg-color-base);
	/* Belt-and-braces over an uncontrolled photo: the scrim does the work, this
	   just keeps the counters crisp where the image is busiest. */
	text-shadow: 0 2px 24px
		color-mix(in srgb, var(--blg-color-contrast) 55%, transparent);
}

/* "$202,393,427" is eleven glyphs against "39"'s two. Left at the same visual
   weight it would either overflow or force the short card down to match, so
   this variant steps down and is allowed to wrap — the figure stays exact
   (rounding a client statistic in CSS is still rounding it). */
.kd-stats-grid .kd-stat-card__number--long {
	font-size: clamp(1.75rem, 5.2vw, 4.25rem); /* 28 → 68px */
	letter-spacing: -0.02em;
	/* NO word-break. An earlier pass set `word-break: break-word` here as
	   overflow insurance and it did exactly what it was told — at 375px the
	   figure rendered as "$202,393,4 / 27", split mid-number across two lines.
	   A currency figure is one atomic token; it must never break. With the
	   default `word-break: normal` it can't (the string has no spaces), so the
	   only real job is sizing it to fit: the floor dropped 36px → 28px, which
	   measures ~215px including the trend arrow inside a 270px content box at
	   375. If a longer figure ever overflows, that is a visible bug worth
	   catching — not something to paper over by mangling the number. */
}

/* The trend arrows that sat beside each number are gone (Alain: "I don't
   think we need the little arrows in the cards"). They also implied a
   measured change over time that neither figure actually states, and on
   mobile they were stealing width the long revenue figure needed. */

.kd-stats-grid .kd-stat-card__title {
	font-family: var(--blg-font-heading);
	font-weight: 700;
	font-size: clamp(1.125rem, 2vw, 1.375rem); /* 18 → 22px */
	line-height: 1.3;
	color: var(--blg-color-base);
	margin: var(--blg-space-sm) 0 0 !important; /* 16px */
	text-shadow: 0 1px 12px
		color-mix(in srgb, var(--blg-color-contrast) 60%, transparent);
}

.kd-stats-grid .kd-stat-card__desc {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body);
	line-height: 1.6;
	/* Sky Tint at 88% rather than plain white: the supporting line should read
	   as secondary to the title above it, and tint keeps it in-palette instead
	   of going grey over a colour photo. */
	color: var(--blg-color-tint);
	margin: 0.625rem 0 0 !important;
	max-width: 34rem;
	text-shadow: 0 1px 12px
		color-mix(in srgb, var(--blg-color-contrast) 60%, transparent);
}

/* ── Tablet (≤1024px) ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.kd-stats-grid .kd-stat-card.wp-block-cover {
		min-height: 26rem; /* 416px */
		padding: var(--blg-space-md); /* 24px */
	}
}

/* ── Mobile (≤768px) — one card per row ────────────────────────────────── */
@media (max-width: 768px) {
	.kd-stats-grid,
	.kd-stats-grid.kd-stats-grid--2up {
		grid-template-columns: 1fr !important;
	}

	.kd-stats-grid .kd-stat-card.wp-block-cover {
		min-height: 23rem; /* 368px */
	}
}