/*
 * Media: Stats — firsttracks-theme/media-stats
 *
 * Fourth member of the media family. The media half carries NO CSS here: it
 * consumes `.tc-media` from patterns/media-basic/media-basic.css, which loads
 * on every request regardless (environment-facts §7). This file carries only
 * the deltas — the scheme surface, the stats row, the band rhythm between the
 * two rows, and the decorative globe.
 *
 * Breakpoints are written at the token values with the token named
 * (conventions §4); custom properties cannot be used in media conditions.
 * `63.9375rem` = the family's own "below lg" boundary (media-basic.css), used
 * verbatim so this member stacks at exactly the same width the family does.
 *
 * Specificity note (house rule: beat on specificity, never on order). Below lg
 * the family already stacks every `.tc-media .wp-block-columns` and puts a
 * `gap: large` between the stacked children (media-basic.css). That rule is
 * (0,3,0) and the stats row is one of those columns blocks, so the overrides
 * here that must beat it add `.wp-block-columns` — a class the row already
 * carries — to reach (0,4,0) rather than tie at (0,3,0) and lean on glob order.
 *
 * @package tonercable-2026
 */

/* ─────────────────────────────────────────────────────────────────────────
 * Scheme surface
 *
 * `.ftm-scheme-secondary-subtle` only sets the role custom properties
 * (page-sections-schemes.css); nothing global paints them. Every family member
 * that shows a scheme surface paints it itself — media-alternating and
 * media-featured both do exactly this — so media-stats must too, or the band
 * renders on the page's default (white) surface.
 * ───────────────────────────────────────────────────────────────────────── */

.tc-media-stats[class*='ftm-scheme-'] {
	background-color: var(--ftm-scheme-bg);
	color: var(--ftm-scheme-text);
}

.tc-media-stats[class*='ftm-scheme-'] :where(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
	color: var(--ftm-scheme-heading);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Band
 * ───────────────────────────────────────────────────────────────────────── */

.tc-media-stats {
	position: relative; /* containing block for the globe */
	overflow: hidden;   /* clips the globe's right overhang */

	/*
	 * Media row → stats row. Stepped, not fluid: 40 → 80 → 112 is a two-segment
	 * curve that no single clamp fits (a linear fit through any two of the three
	 * frame values misses the third by 27–107px). J23.
	 * All three ARE Figma spacing vars; none has a WP preset — F9.
	 */
	--tc-stats-band-gap: 2.5rem; /* 40 — frame @304 */
}

@media (min-width: 48rem) { /* breakpoint/md */

	.tc-media-stats {
		--tc-stats-band-gap: 5rem; /* 80 — frame @736; the family's documented 5rem one-off */
	}
}

@media (min-width: 64rem) { /* breakpoint/lg */

	.tc-media-stats {
		--tc-stats-band-gap: 7rem; /* 112 — frame @1888 */
	}
}

.tc-media.tc-media-stats > .tc-stats-row {
	margin-block-start: var(--tc-stats-band-gap);
}

/*
 * The globe is a z-index:0 positioned pseudo-element, so non-positioned block
 * content would paint UNDER it — the hero-overlay trap (DECISIONS 2026-07-22).
 * Lift both rows into the positioned layer explicitly.
 */
.tc-media-stats > * {
	position: relative;
	z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Decorative globe — lg and up only (J24)
 *
 * Box mechanics, asset and mask live in the shared globe kit (style.css); this
 * block sets only the positioning contract and the colour.
 *
 * DECISION A (lead developer, 2026-08-31) — THE GLOBE SCALES WITH THE BAND.
 * J24 made the same fixed-size call heading-banner did, and it lands harder
 * here because this globe is the larger of the two: measured before the
 * change, the flat 1026.44px square covered 42.9% of the band at 1920 and
 * 80.4% at 1024, and its arcs ran 223px into the media column at 1024.
 *
 * The 1920 frame stays the source; its geometry is now read as a ratio of the
 * band rather than as two lengths. THE RATIO IS THIS PATTERN'S OWN, not
 * heading-banner's — each globe keeps the coverage its own frame draws at
 * 1920, which is what "the 1920 ratio" means. Normalising the two patterns
 * onto one ratio would change this band at the one width it was drawn at.
 *
 *   size  = 1026.44 / 1920 = 53.4604% of the band, capped at 1026.44px
 *   bleed = 202.71 / 1026.44 = 19.75% of the size
 *
 * The `min()` cap means 1920 renders EXACTLY as it did before — 1026.44px at
 * −202.71px — and above 1920 the globe stops growing.
 * ───────────────────────────────────────────────────────────────────────── */

@media (min-width: 64rem) { /* breakpoint/lg */

	.tc-media-stats {
		--tc-globe-on: "";
		--tc-globe-size: min( 53.4604%, 1026.44px );
		--tc-globe-bleed: calc( var( --tc-globe-size ) * 0.1975 );

		/*
		 * COLOUR — read from the frame's DECLARED values, not sampled from a
		 * composited pixel. Figma node 43657:7012 (svg1827) exports
		 * `stroke="#7DD3FC"` on all six paths, which is the bound variable
		 * `color/secondary/300`, and carries `opacity="0.3"` on the layer
		 * itself. The token is opaque, so the alpha lives in the opacity
		 * property — exactly one of the two carries it.
		 *
		 * PER-PATTERN, NOT SITE-WIDE. Each globe is coloured against its own
		 * band: hero-overlay declares secondary-500 and product-grid declares
		 * white-alpha-300 over the navy. Do not normalise these to one value.
		 */
		--tc-globe-paint: var( --wp--custom--color--secondary--300, #7dd3fc );
		--tc-globe-opacity: 0.3;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * Stats row — shared
 *
 * Structure contract (F10): each column is
 *   <p> figure  +  <div.wp-block-group> ( <p> label, <p> supporting )
 * Selectors are positional so that adding a stat is a native column add and a
 * hand-built column needs no Additional CSS class.
 * ───────────────────────────────────────────────────────────────────────── */

.tc-media-stats .tc-stats-row > .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xsmall, 0.5rem); /* 8 — figure → text, every breakpoint */
}

/*
 * Figure. Type is byte-identical to the family h2 (heading medium / 700 / −2%),
 * consumed from the family custom properties (media-basic.css F6 hoist) rather
 * than restated. The fallbacks are a non-fluid safety net for a missed hoist,
 * not the intended values; frame verification catches it if they ever fire.
 */
.tc-media-stats .tc-stats-row > .wp-block-column > p:first-child {
	margin-block: 0;
	font-size: var(--tc-heading-medium-size, var(--wp--preset--font-size--heading-medium, 2.5625rem));
	font-weight: 700;
	line-height: var(--tc-heading-medium-line-height, 1.171);
	letter-spacing: -0.02em;
	color: var(--wp--custom--color--secondary--600, #057db9);

	/* Holds digit width steady while the count-up runs (see
	 * assets/js/stat-count-up.js). Harmless when the animation is skipped. */
	font-variant-numeric: tabular-nums;
}

/*
 * `margin-block-start: 0` since QA batch D (R4-5, 2026-09-29). The group kept
 * WordPress's flow-layout block gap (`:root :where(.is-layout-flow) > *`, 24),
 * which ADDED to the column's 8: figure -> text was 32, not the frames' 8
 * (desktop 43324:16692, mobile 43324:16408), and at 768-1023, where the row
 * turns flex, it pushed the label 24 below the figure's top where the tablet
 * frame (43324:16574) draws the two tops level. (0,3,0) beats the (0,1,0)
 * layout rule outright.
 */
.tc-media-stats .tc-stats-row .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxsmall, 0.25rem); /* 4 */
	margin-block-start: 0;
}

.tc-media-stats .tc-stats-row .wp-block-group > p {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--body-small, 1rem);
	line-height: 1.5; /* 24/16 — flat in both Figma typescale modes */
}

/* Label. Figma binds `body small` but draws a raw Inter Bold — designer item. */
.tc-media-stats .tc-stats-row .wp-block-group > p:first-child {
	font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Below lg: stats dividers and row padding
 *
 * The single-track pins that used to live here are GONE (2026-07-24). They
 * existed only because the design system laid these rows out as a grid, which
 * made the family's flex stacking inert and opened the 810–1023 side-by-side
 * window. media-basic.css now restores flex for the whole family, so stacking
 * is core's flex-wrap again and the family rule covers both rows. What remains
 * below is genuinely media-stats' own: the row rhythm and the dividers.
 * ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 63.9375rem) { /* below breakpoint/lg */

	.tc-media.tc-media-stats .tc-stats-row.wp-block-columns {
		row-gap: 0; /* separation is padding + divider, not the family gap */

		--tc-stat-row-pad: var(--wp--preset--spacing--large, 1.5rem); /* 24 — frame @304 */
	}

	.tc-media.tc-media-stats .tc-stats-row > .wp-block-column {
		padding-block: var(--tc-stat-row-pad);
	}

	.tc-media.tc-media-stats .tc-stats-row > .wp-block-column:first-child {
		padding-block-start: 0;
	}

	/* Mobile frame carries a trailing 24 below the last stat; normalised out — J27. */
	.tc-media.tc-media-stats .tc-stats-row > .wp-block-column:last-child {
		padding-block-end: 0;
	}

	.tc-media.tc-media-stats .tc-stats-row > .wp-block-column:not(:last-child) {
		border-block-end: 1px solid var(--wp--custom--color--neutral--300, #ced4da);
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * Stats row — md only: figure moves LEFT of the text
 * Placed after the block above so it re-points --tc-stat-row-pad without
 * re-declaring padding-block (which would undo the first/last zeroing).
 * ───────────────────────────────────────────────────────────────────────── */

@media (min-width: 48rem) and (max-width: 63.9375rem) { /* breakpoint/md → below lg */

	.tc-media.tc-media-stats .tc-stats-row.wp-block-columns {
		--tc-stat-row-pad: var(--wp--preset--spacing--xlarge, 2.5rem); /* 40 — frame @736 */
	}

	.tc-media.tc-media-stats .tc-stats-row > .wp-block-column {
		flex-direction: row;
		align-items: flex-start;
	}

	.tc-media.tc-media-stats .tc-stats-row > .wp-block-column > p:first-child {
		flex: 0 0 200px; /* frame: 200 figure / 8 gap / 473 text */
	}

	.tc-media.tc-media-stats .tc-stats-row > .wp-block-column > .wp-block-group {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * Stats row — lg and up: 3-up on the frame gutter
 *
 * The three-track pin is GONE (2026-07-24). It only ever existed to work
 * around the design system's grid: under `auto-fit` + this 143 gutter three
 * 22rem tracks did not fit until the row passed ~1350px, so from 1024 to there
 * the third stat wrapped to a second row. On flex the three stats carry no
 * inline width, so core gives them `flex-basis: 0; flex-grow: 1` and they come
 * out equal by construction — 371 each at the 1400 wide size, which is what the
 * pin was reproducing. The frame's 332px columns are an auto-layout hug
 * artifact (J16), not the target.
 *
 * The gutter is the one thing still genuinely media-stats': the family's
 * `gap: large` is 24, and this row binds 143. `.wp-block-columns` keeps it
 * above the family's own rules on specificity rather than source order.
 * ───────────────────────────────────────────────────────────────────────── */

@media (min-width: 64rem) { /* breakpoint/lg */

	.tc-media.tc-media-stats .tc-stats-row.wp-block-columns {
		/* Matched by the media row, which derives the same 143 from
		 * space-between. Both rows are `alignwide`, so their outer edges
		 * coincide at the 1400 wide size. */
		column-gap: 143px;
	}
}

/* The media row needs nothing here any more. Its 569 / 143 / 688 split is the
 * family's: the inline flex-basis (40.64% / 49.14%) is live again under flex,
 * and `justify-content: space-between` (media-basic.css) turns the 10.22%
 * remainder into the 143 gutter at the 1400 wide size. See media-basic.css. */