/**
 * Meridian Sections — Stats
 *
 * Two layouts over one content model:
 *
 * - Centred row (Figma 273:383) — a brand-blue band on a dotted ground: yellow
 *   eyebrow, a row of very large white figures with light-blue captions, then a
 *   lede and a footnote.
 * - Divided columns (Figma 232:61, "StatHighlights") — the same figures as an
 *   edge-to-edge band of equal cells separated by pale vertical rules, with yellow
 *   captions and no surrounding copy.
 *
 * They share the ground, the figures, the captions and the count-up, so the second
 * is a modifier rather than a second widget. Everything the two comps genuinely
 * disagree about is a custom property with the centred layout's value as its
 * default, so that layout is untouched by the second one existing.
 */

.md-section.md-stats {
	padding-block: var(--md-section-pt, 4rem) var(--md-section-pb, 4.0625rem); /* 64 / 65 */
	/*
	 * Stated here rather than through --md-dot-ground. .md-dots declares its own
	 * background-color at (0,1,0) and this selector is (0,2,0), so this
	 * declaration wins either way — setting the property as well would look like
	 * it were doing something. The band is blue with the dots switched off too.
	 */
	background-color: var(--md-blue, #006bb6);
	color: var(--md-white, #fff);
	text-align: center;
}

/*
 * The comp draws an opaque #ebebeb hairline — measured at the band's last row.
 * --md-color-rule cannot be used: it is rgba(ink, 0.08), which over a saturated
 * blue darkens rather than lightens and effectively disappears. #ebebeb is what
 * that token resolves to when flattened against white, which is why it reads as
 * the same rule as every other band's. A local property until a second section
 * on a saturated ground needs it, at which point it earns a theme token.
 */
.md-stats--ruled {
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-stats-rule, #ebebeb);
}

/*
 * Same construction as the Office Locations band (18:9927) — the wash comes in
 * from both edges and thins around the middle — but in blue. Measured from the
 * 1:1 render: dots on a 20px pitch, contrast nil at both edges and peaking at
 * 49.9% of the height, which is the 49.55% stop below.
 *
 * Pitch, dot size and dot ink are the primitive's defaults. The comp's dot
 * solves to black at about 0.063 against this ground; --md-color-dot is
 * rgba(ink, 0.06), which lands within 2/255 of it on the strongest row.
 *
 * The transparent stop is written out because a custom property cannot carry a
 * token's value at zero alpha; it is --md-blue, faded.
 */
/*
 * Scoped away from the divided layout, whose wash runs in one direction. A custom
 * property cannot be un-set back to its own fallback without relying on `initial`
 * resolving to the guaranteed-invalid value, and :not() says what it means.
 */
.md-stats.md-dots:not(.md-stats--divided) {
	--md-dot-wash-image: linear-gradient(
		180deg,
		var(--md-blue, #006bb6) 0%,
		rgba(0, 107, 182, 0) 49.55%,
		var(--md-blue, #006bb6) 100%
	);
}

/* --- Eyebrow ------------------------------------------------------------- */
/*
 * The 11px eyebrow rather than .md-eyebrow's 13px, in yellow — see the contrast
 * note in the README: on this blue it measures 3.85:1, which is short of AA.
 */
.md-stats__eyebrow {
	margin: 0 0 var(--md-space-lg, 2rem); /* 32px */
	color: var(--md-yellow, #ecdd01);
	font-size: var(--md-text-micro, 0.6875rem); /* 11px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.5; /* 16.5px */
	letter-spacing: 0.22em; /* 2.42px on 11px */
	text-transform: uppercase;
}

/* --- Figures ------------------------------------------------------------- */
/*
 * The comp separates two figures by 48 + a 30px spacer + 48 = 126px. The spacer
 * is an empty box in Figma with nothing drawn in it, so it is spacing, not a
 * divider — translated as one gap rather than reproduced as an element.
 *
 * flex-end because the comp bottom-aligns the pair: a caption that wraps to two
 * lines then grows downward and the figures still sit on one line.
 */
.md-stats__list {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	gap: var(--md-space-lg, 2rem) var(--md-stats-gap, 7.875rem); /* 126px */
	margin: 0 0 var(--md-space-lg, 2rem); /* 32px */
	padding: 0;
	list-style: none;
}

.md-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/*
 * 112px at the comp's width, down to 56px on a phone. Capped, because this is
 * the largest type on the site and an unbounded figure would outrun the band.
 */
.md-stats__value {
	margin: 0;
	color: var(--md-white, #fff);
	font-family: var(--md-font-heading, "Cabin", sans-serif);
	/*
	 * Two levels on purpose. --md-stats-size is what the Figure Size control writes,
	 * and it has to win outright; --md-stats-size-default is how a *layout* changes
	 * the fluid ramp underneath it. Both cannot be the same property: the control's
	 * selector is (0,2,0) and a layout rule would be too, leaving the winner to
	 * stylesheet order rather than to intent.
	 */
	font-size: var(
		--md-stats-size,
		var(--md-stats-size-default, clamp(3.5rem, 1.2rem + 9.8vw, 7rem))
	);
	font-weight: var(--md-weight-bold, 700);
	/* The comp's 112 on 112 — a figure this large needs no leading. */
	line-height: 1;
	/*
	 * Even-width digits where the face offers them, so a counting figure moves
	 * less. stats.js locks the width regardless, because Cabin does not.
	 */
	font-variant-numeric: tabular-nums;
}

/*
 * Three properties, because 232:61 draws this same caption in yellow, a hair
 * tighter, and 12px under the figure rather than 8px. Defaults are 273:383's.
 */
.md-stats__label {
	margin: var(--md-stats-label-gap, 0.5rem) 0 0; /* 8px */
	color: var(--md-stats-label-ink, var(--md-light-blue, #8ac9ec));
	font-size: var(--md-text-micro, 0.6875rem); /* 11px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.5; /* 16.5px */
	letter-spacing: var(--md-stats-label-tracking, 0.2em); /* 2.2px on 11px */
	text-transform: uppercase;
}

/* --- Lede and footnote --------------------------------------------------- */
.md-stats__lede {
	/* 701px in the comp. */
	max-width: 43.8125rem;
	margin: 0 auto 0.75rem; /* 12px */
	color: var(--md-white, #fff);
	/* 16px, not the 15px drawn — the site's body-copy floor. See --md-text-small. */
	font-size: var(--md-text-small, 1rem); /* 16px */
	line-height: 1.625; /* 26px */
}

.md-stats__footnote {
	margin: 0;
	color: var(--md-white, #fff);
	font-size: var(--md-text-micro, 0.6875rem); /* 11px */
	line-height: 1.5; /* 16.5px */
}

/* --- Stacked ------------------------------------------------------------- */
/*
 * No media query for the gap on purpose. The comp's 126px is measured between
 * two figures on one line and is far too wide once they wrap, but the Figure Gap
 * control owns --md-stats-gap at all three breakpoints through per-device
 * defaults (126 / 126 / 48). A query restating column-gap here would beat that
 * control, so an editor's mobile value would silently do nothing — which is
 * exactly the trap the Page Hero's height fell into first.
 */

/*
 * The lede is a rich editor, so this is a wrapper with the editor's paragraphs
 * inside. The auto margins that centre it stay on the wrapper.
 */
.md-stats__lede > p {
	margin: 0;
}

.md-stats__lede > p + p {
	/* 12px, matching the margin the old sibling paragraphs each carried. */
	margin-block-start: 0.75rem;
}

/* On this ground a link has to be white and underlined to read as one at all. */
.md-stats__lede a {
	color: var(--md-white, #fff);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* --- Divided columns — Figma 232:61 --------------------------------------- *
 * The whole layout lives at the end of the file. These rules override the centred
 * layout's on properties of equal specificity, and a media query adds none, so
 * source order is what decides — placed above, the grid would silently lose to the
 * flex row.
 * ------------------------------------------------------------------------- */

/*
 * No band padding at all: the comp's frame is 212.5px and its cells are 212.5px, so
 * every pixel of vertical space belongs to the cells. That is what lets the rules
 * run the full height of the band rather than stopping short of it.
 *
 * Cell Padding is the control for this layout; Padding Top/Bottom is the control for
 * the centred one.
 */
.md-section.md-stats--divided {
	padding-block: 0;
}

/*
 * Edge to edge, as drawn — the cells span the comp's full 1148 of 1149. This does
 * mean Content Width has nothing to act on in this layout, which the layout
 * control's own description says out loud.
 */
.md-stats--divided > .md-container {
	max-width: none;
	padding-inline: 0;
}

/*
 * Measured from the 1:1 render. The ground is flat brand blue, the dots sit on a
 * 20px pitch at 5px across, and contrast climbs linearly from nothing at the top to
 * full strength at the bottom — a one-directional 0deg wash, not the two-ended one
 * the centred comp draws.
 *
 * --md-dot-wash-color has to come off white: the primitive washes to white, which
 * over a saturated blue would bleach the top of the band rather than leave it blue.
 *
 * The dot ink is this comp's own. Solving the wash out of eight dot rows (Δ on the
 * blue channel: 4, 5, 6, 7, 8, 9, 10, 11 at y = 60…200) puts the unwashed alpha at
 * about 0.085, where --md-color-dot's 0.06 would give Δ8.5 at full strength. Dots
 * need more ink to read on blue than on a near-white tint, and 3/255 is past the
 * rounding the centred comp was accepted within.
 */
.md-stats--divided.md-dots {
	--md-dot-wash: 0deg;
	--md-dot-wash-color: var(--md-blue, #006bb6);
	--md-dot-size: 2.5px;
	--md-color-dot: rgba(10, 22, 40, 0.085);
}

/*
 * stretch, not the centred layout's flex-end: cells in a row have to be one height
 * or the rules between them stop at different points.
 */
.md-stats--divided .md-stats__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
	margin: 0;
}

.md-stats--divided .md-stats__item {
	justify-content: center;
	padding-block: var(--md-stats-cell-py, 3rem); /* 48px */
	padding-inline: var(--md-stats-cell-px, 2rem); /* 32px */
	/*
	 * Makes the cell the sizing context for the figure below. Safe here because a
	 * cell's width comes from its `minmax(0, 1fr)` track rather than its contents,
	 * so nothing circular is being asked for.
	 */
	container-type: inline-size;
}

/*
 * 88px at the comp's 1149, down to 48px on a phone. Solved on the ramp rather than
 * stepped, so there is no jump at a breakpoint.
 *
 * The ramp alone is not enough, and the reason is worth stating: it scales with the
 * *viewport* while the cell scales with the viewport divided by the column count.
 * At four columns the ramp pins to 88px from about 1150px upward while the cell
 * keeps shrinking, so a long figure runs straight through the rule beside it —
 * measured at 14px over on "1,200+" at 1200px, and 28px at 992px.
 *
 * --md-stats-fit is how wide a figure can be and still clear its own cell: the room
 * inside the cell divided by the widest figure's character count. 0.55em per
 * character is the average advance measured off this face at 88px — the digits ran
 * 0.45 to 0.52, and the margin covers a "%" or a "$". The widget counts the
 * characters, because CSS cannot.
 *
 * 100cqw is already the cell's CONTENT box — container query units resolve against
 * the container's content box, not its border box — so the side padding must not be
 * subtracted again here. Doing so was measured shrinking the comp's own 4-up band
 * from the 79.9px its ramp asks for at 992px down to 72.7px.
 *
 * Applied to the *default* only, so an editor who sets Figure Size explicitly gets
 * exactly what they asked for. The cap is a better default, not an override.
 */
.md-stats--divided .md-stats__value {
	--md-stats-fit: calc(100cqw / (var(--md-stats-chars, 3) * 0.55));
	--md-stats-size-default: min(
		clamp(3rem, 1.789rem + 5.168vw, 5.5rem),
		var(--md-stats-fit)
	);
}

.md-stats--divided .md-stats__label {
	--md-stats-label-gap: var(--md-space-xs, 0.75rem); /* 12px */
	--md-stats-label-ink: var(--md-yellow, #ecdd01);
	--md-stats-label-tracking: 0.18em; /* 1.98px on 11px */
}

/*
 * Stacked. One column with a rule between rows, the way the Differentiators band
 * (1:960) handles the same problem — four 88px figures cannot share a phone.
 */
.md-stats--divided .md-stats__item + .md-stats__item {
	border-block-start: var(--md-border-width, 1px) solid
		var(--md-stats-divider, rgba(255, 255, 255, 0.3));
}

/*
 * The comp has no eyebrow, lede or footnote. If an editor adds one it still needs
 * the page gutter back — the container above gave it up — and room away from the
 * band, which now has no padding of its own.
 */
.md-stats--divided .md-stats__eyebrow,
.md-stats--divided .md-stats__lede,
.md-stats--divided .md-stats__footnote {
	padding-inline: var(--md-container-gutter, 1.5rem);
}

.md-stats--divided .md-stats__eyebrow {
	margin-block: var(--md-stats-cell-py, 3rem) var(--md-space-lg, 2rem);
}

.md-stats--divided .md-stats__list + .md-stats__lede,
.md-stats--divided .md-stats__list + .md-stats__footnote {
	margin-block-start: var(--md-stats-cell-py, 3rem);
}

.md-stats--divided .md-stats__footnote:last-child {
	padding-block-end: var(--md-space-lg, 2rem);
}

/* --- Divided columns, in columns ----------------------------------------- */
@media (min-width: 48em) {
	/*
	 * Half-columns: twice the tracks, every cell spanning two of them.
	 *
	 * Purely so a last row that cannot fill itself can be centred. A row of three
	 * cells in a four-column band needs half a column of air either side, and a
	 * whole-column grid cannot express a half. The widget writes the start line on
	 * the one cell that opens such a row — see --md-stats-start below — and the
	 * rest auto-place after it.
	 *
	 * Every cell still measures exactly one column, so nothing about the full rows
	 * changes, and the nth-child rules underneath count cells rather than tracks
	 * and are untouched by the doubling.
	 */
	.md-stats--divided .md-stats__list[data-cols="2"] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.md-stats--divided .md-stats__list[data-cols="3"] {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.md-stats--divided .md-stats__list[data-cols="4"] {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.md-stats--divided .md-stats__list[data-cols="5"] {
		grid-template-columns: repeat(10, minmax(0, 1fr));
	}

	/*
	 * `auto` for every cell but the one the widget marks, which is placed on an
	 * explicit half-column line. The span is what keeps a cell a whole column wide.
	 */
	.md-stats--divided .md-stats__item {
		grid-column: var(--md-stats-start, auto) / span 2;
	}

	/* The stacked rule belongs to the single-column layout only. */
	.md-stats--divided .md-stats__item + .md-stats__item {
		border-block-start: 0;
		border-inline-start: var(--md-border-width, 1px) solid
			var(--md-stats-divider, rgba(255, 255, 255, 0.3));
	}

	/*
	 * A rule leads each cell except the one that opens a row. Written per column
	 * count rather than with :first-child so a set that wraps onto a second row
	 * still reads correctly — the same reason the Differentiators band does it this
	 * way. Leading rules rather than trailing ones, so a partial final row can
	 * never leave one dangling off the end.
	 */
	.md-stats--divided .md-stats__list[data-cols="2"] .md-stats__item:nth-child(2n + 1),
	.md-stats--divided .md-stats__list[data-cols="3"] .md-stats__item:nth-child(3n + 1),
	.md-stats--divided .md-stats__list[data-cols="4"] .md-stats__item:nth-child(4n + 1),
	.md-stats--divided .md-stats__list[data-cols="5"] .md-stats__item:nth-child(5n + 1) {
		border-inline-start: 0;
	}

	/* Rows past the first need separating too, once there are columns. */
	.md-stats--divided .md-stats__list[data-cols="2"] .md-stats__item:nth-child(n + 3),
	.md-stats--divided .md-stats__list[data-cols="3"] .md-stats__item:nth-child(n + 4),
	.md-stats--divided .md-stats__list[data-cols="4"] .md-stats__item:nth-child(n + 5),
	.md-stats--divided .md-stats__list[data-cols="5"] .md-stats__item:nth-child(n + 6) {
		border-block-start: var(--md-border-width, 1px) solid
			var(--md-stats-divider, rgba(255, 255, 255, 0.3));
	}
}

/*
 * Five across is a wide-screen choice, so it stacks earlier than the rest.
 *
 * A fifth of a 768px band is a 154px cell, and the fit cap answers that by taking a
 * six-character figure down to 27px — below the 48px floor the ramp deliberately
 * holds on a phone, and small enough that the figure stops out-reading its own
 * label. Measured: 77.6px at 1600, 67.9 at 1440, 58.2 at 1280, 47.3 at 1100, 27.1 at
 * 768. It crosses the ramp's floor at about 1120px, so the tier ends at 64em.
 *
 * Between 48em and 64em a five-column band therefore falls back to the stacked
 * treatment, which is one column with horizontal rules — the same thing every band
 * does below 48em, so nothing new is being invented and no divider maths changes.
 * Three overrides do it, after the block above and each carrying the attribute
 * selector, so they win on both specificity and source order.
 *
 * The nth-child rules above still fire in this range and remain correct: their
 * leading-rule reset sets the same border-inline-start: 0 the stack wants, and their
 * row separator sets the same border-block-start.
 */
@media (min-width: 48em) and (max-width: 63.9375em) {
	.md-stats--divided .md-stats__list[data-cols="5"] {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Cancels the half-column span and any centring offset with it. */
	.md-stats--divided .md-stats__list[data-cols="5"] .md-stats__item {
		grid-column: auto;
	}

	.md-stats--divided .md-stats__list[data-cols="5"] .md-stats__item + .md-stats__item {
		border-inline-start: 0;
		border-block-start: var(--md-border-width, 1px) solid
			var(--md-stats-divider, rgba(255, 255, 255, 0.3));
	}
}