/**
 * Stat Counters — the big numbers (acf/stat-counters).
 *
 * The number is the old Case Study Proof Band's figure — 900 weight at the heading size,
 * line-height 1 (Wayne, 19 Oct: "the text and format of the number are like the ones in the
 * Case Study Proof Band"). What changes is the surface: no band, no card. The figures sit on
 * the page ground, three across on the wide rail, centred, so on a case study they read as
 * the opening facts rather than a panel dropped into the story.
 *
 * Wayne's mockup, 20 Oct: each stat LEFT-ALIGNED in its third; the TOP LINE IS WHITE (one
 * string, unit included — 12,400T, $4.8M); the LABEL is the eyebrow in the stat's colour; and
 * the colour fills a point-up hexagon hanging off the top line's top-right with one of the
 * animated glyphs drawn in the ground colour. A hairline above and below holds the three as
 * one section without making a bar of them.
 *
 * Web catch-up, 23 Oct: back to the wide rail, and each stat now CENTRED in an equal column —
 * the figure and its hexagon as one group over the label — with padding either side and a
 * vertical hairline between columns. Phones keep the left-aligned centred stack (To-Do #12).
 */

.pwr-b-stats {
	/* No padding of its own: the blocks either side carry the rhythm (the page's block gap,
	   the neighbours' padding), so the figures sit evenly between whatever they are placed
	   among. On a case study the hero's body ends in xxl of padding and the challenge opens
	   with xl + the page gap — measured 224px above the numbers against 128px below (Wayne,
	   19 Oct: "generous is good, uneven isn't"), so there the block also pulls back the page
	   gap it would otherwise add on top of the hero's padding, and the two sides match. */
	/* The mockup's hairlines: the section's own, so they travel with the block. The padding
	   is inside them; the neighbours still carry the rhythm outside. */
	padding-block: var(--wp--preset--spacing--xl); /* xl, not l — Wayne, 20 Oct: "next size up in padding to the borders" */
	border-block: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent);
	text-align: left;
}
/* At the content width (no alignment — the home strip, Website To-Do #13) the figures come in
   but the hairlines stay on the wide rail (Wayne, 23 Oct: "the lines still need to be wide
   width"). The block's own borders go; two 1px strips, centred on the block, as wide as the
   wide rail or the screen inside the root padding, whichever is less, draw them instead. */
.pwr-b-stats:not(.alignwide):not(.alignfull) {
	position: relative;
	border-block: 0;
	--pwr-stats-rule: min(
		var(--wp--style--global--wide-size, 1440px),
		100vw - var(--wp--style--root--padding-left, 0px) - var(--wp--style--root--padding-right, 0px)
	);
}
.pwr-b-stats:not(.alignwide):not(.alignfull)::before,
.pwr-b-stats:not(.alignwide):not(.alignfull)::after {
	content: "";
	position: absolute;
	left: 50%;
	width: var(--pwr-stats-rule);
	height: 1px;
	transform: translateX(-50%);
	background: color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent);
	pointer-events: none;
}
.pwr-b-stats:not(.alignwide):not(.alignfull)::before { top: 0; }
.pwr-b-stats:not(.alignwide):not(.alignfull)::after { bottom: 0; }

/* The page gap is a margin-top core puts ON this block (`* + *` in the constrained layout),
   so cancelling it is setting it to zero, not going negative — the first cut did, and landed
   80px above against 128 below. */
.pwr-b-srows--cs + .pwr-b-stats {
	margin-top: 0;
}
.pwr-b-stats__title {
	margin: 0 0 var(--wp--preset--spacing--l);
}
.pwr-b-stats__list {
	/* Back on the wide rail in equal columns, each stat CENTRED in its own, with a hairline
	   between columns and padding either side of it (web catch-up, 23 Oct). Content-sized
	   items on space-between went out of line whenever the middle figure was a different
	   width from its neighbours; equal tracks put every centre in the same place. */
	display: grid;
	grid-template-columns: repeat(var(--pwr-stats-cols, 3), minmax(0, 1fr));
	row-gap: var(--wp--preset--spacing--l);
	list-style: none;
	margin: 0;
	padding: 0;
}
.pwr-b-stats--1 { --pwr-stats-cols: 1; }
.pwr-b-stats--2 { --pwr-stats-cols: 2; }
/* Four to six stay three across, so the second row lines up under the first. */
/* Phones: one under the other, the stack in the middle of the screen (Website To-Do #12,
   Wayne 23 Oct: "don't centre align the content … make each section stack and sit in the
   centre"). The stack is as wide as its widest stat and centred, and every stat is centred
   inside it — the figure and its hexagon as one group over the label, as on desktop (Website
   To-Do #12, 27 Oct: "the numbers aren't centred over the copy"; it was left-aligned against
   one edge, which put a short figure off-centre over a long label). The dividers turn into
   underlines and the padding goes top and bottom (Wayne, 23 Oct): the same separation, turned
   with the stack. The rules run the stack's width, so they line up with the figures. */
@media (max-width: 781px) {
	.pwr-b-stats__list {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
	}
	/* doubled to beat the desktop divider rule (:not(:nth-child()) is 0,2,0 too) */
	.pwr-b-stats .pwr-b-stat.pwr-b-stat {
		align-items: center;
		padding-inline: 0;
		padding-block: var(--wp--preset--spacing--m);
		border-inline-start: 0;
		text-align: center;
	}
	.pwr-b-stats .pwr-b-stat:first-child { padding-top: 0; }
	.pwr-b-stats .pwr-b-stat:last-child { padding-bottom: 0; }
	.pwr-b-stats .pwr-b-stat:not(:last-child) {
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent);
	}
	.pwr-b-stats .pwr-b-stat__label { margin-inline: auto; }
}
.pwr-b-stat {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-inline: var(--wp--preset--spacing--l);
}
/* the divider: on every stat that has a neighbour to its left in the same row */
.pwr-b-stat:not(:nth-child(3n + 1)) {
	border-inline-start: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent);
}
.pwr-b-stat__num {
	margin: 0;
	font-weight: 900;
	font-size: var(--wp--custom--type--title); /* the h1's size (Wayne, 20 Oct: "same size as h1") */
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--tight);
	color: var(--wp--preset--color--base);
	font-variant-numeric: tabular-nums; /* a tumbling figure must not jitter sideways */
	display: inline-block;
	position: relative; /* the badge hangs off the line's top-right */
}
/* The FIGURE is centred over the label as if the hexagon were not there, and the hexagon then
   hangs off the figure's top-right (Wayne, 27 Oct: "the numbers need to be centred over the
   labels as if the glyph was not there"). The badge is absolutely positioned, so it takes no
   room; until 27 Oct a 0.5em margin on the figure reserved room for it, which centred figure
   and hexagon as ONE group and pushed every number left of its label's centre. */
.pwr-b-stat__label {
	/* The eyebrow, word for word (Wayne, 20 Oct: "labels should be eyebrow font/size"): the
	   is-style-eyebrow inline style in functions.php, in the stat's colour. */
	margin: var(--wp--preset--spacing--xs) 0 0;
	font-family: Syncopate, 'Red Hat Display', sans-serif;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--pwr-accent, var(--wp--preset--color--orange));
	max-width: 28ch;
	margin-inline: auto;
}

/* The hexagon at the shoulder: the stat's colour, point-up like the quote slider's dots,
   hanging off the top line's top-right so it reads as a mark ON the figure, not a bullet
   beside it (Wayne, 20 Oct: "bigger, drop shadow, more overlap", "the glyph hangs over the top
   right of the top line"). The glyph inside plays when the block scrolls in, the same way it
   does on a feature card. Sized off the figure, so it scales with the type.
   The hexagon is the glyph plugin's own solid frame (glyphs v2, 2 Nov), drawn in
   currentColor — the stat's accent — with the glyph knocked out to the ground. It replaced a
   hand-built clip-path hexagon here. The shadow is a filter on the badge. */
.pwr-b-stat__badge {
	position: absolute;
	/* Back to the mockup's proportions (web catch-up, 20 Oct: "icon too large, overlaps too
	   much"): a hexagon well under the cap height, perched on the last character's top-right
	   corner with only its edge over it, so the figure reads whole. Was 0.88em wide with a
	   third of it over the character. */
	top: -0.4em;
	right: -0.5em;
	width: 0.58em;
	height: 0.65em;
	display: grid;
	place-items: center;
	color: var(--pwr-accent, var(--wp--preset--color--orange));
	--pwr-surface-bg: var(--wp--preset--color--contrast); /* the knock-out colour */
	font-size: 1em;
	line-height: 0;
	filter: drop-shadow(0 0.06em 0.12em rgba(0, 0, 0, 0.45));
	z-index: 1;
}
.pwr-b-stat__badge .pwr-glyph-block {
	--pwr-glyph-size: 0.65em !important; /* render.php writes 28px inline; the em wins so it tracks the figure. The framed box is square and the hexagon fills its height, so this is the badge's height */
	position: relative;
	display: block;
	line-height: 0;
}
.pwr-b-stat__badge .pwr-glyph {
	stroke-width: 4.4; /* 3.2 is drawn for 48px+; at this size the lines would thin out */
}

/* THE TUMBLE. stats.js splits the figure into its characters: each digit becomes a 1em
   window (.pwr-b-stat__digit) over a vertical reel of digits (.pwr-b-stat__reel) that ends on
   the right one; the reel rolls up through a blur and settles. Separators, decimal points,
   % and $ stay put. The window is overflow:hidden — which moves an inline-block's baseline
   to its bottom edge, so the windows and the static characters all align by their TOP
   (vertical-align: top, line-height 1 everywhere) and the figure sits exactly where the
   plain text did. The blur is a filter on the reel, so it is clipped with it. The reel's
   travel is set per digit by the script (--pwr-reel-steps); later digits roll longer so they
   lock in left to right. */
.pwr-b-stat__digit {
	display: inline-block;
	height: 1em;
	line-height: 1;
	vertical-align: top;
	overflow: hidden;
	/* The digits are 1em apart but only ~0.75em tall and sit high in the em box (cap top at
	   about 0.04em, baseline at about 0.8em), so the neighbours on the reel would show through
	   the gap below: clip the window to the cap region. */
	clip-path: inset(0.03em 0 0.19em 0);
	position: relative;
	/* The blur is on the WINDOW, not the reel: a filter animating on the moving child puts it
	   on its own compositor layer, and the clip could not be trusted to hold it mid-frame. Here
	   the clipped window is what gets blurred, so the blur can only soften its own edges. */
	animation: pwr-stat-blur var(--pwr-reel-ms, 1400ms) ease-out both;
}
.pwr-b-stat__reel {
	display: block;
	line-height: 1;
	will-change: transform;
	animation: pwr-stat-roll var(--pwr-reel-ms, 1400ms) cubic-bezier(0.12, 0.8, 0.2, 1) both;
}
.pwr-b-stat__reel > span {
	display: block;
	height: 1em;
}
@keyframes pwr-stat-roll {
	from { transform: translateY(0); }
	to   { transform: translateY(calc(var(--pwr-reel-steps, 10) * -1em)); }
}
@keyframes pwr-stat-blur {
	0%   { filter: blur(0); }
	12%  { filter: blur(0.07em); }
	70%  { filter: blur(0.04em); }
	100% { filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
	.pwr-b-stat__digit { animation: none; filter: none; }
	.pwr-b-stat__reel { animation: none; transform: translateY(calc(var(--pwr-reel-steps, 10) * -1em)); }
}