/* Why Infinitus §2 — Stats ribbon. Figma node 2640:4415 in frame 2640:4400
 * ("Why Infinitus, r3"), file SO8J0OKWo5wIM44YgqbgG0; handoff
 * docs/Infinitus-Why-Infinitus-Dev-Handoff.md §2. Issue #921.
 *
 * Base pattern: patterns/solutions-stats.php
 * Base styles:  assets/css/sections/solutions-stats.css
 * Row variant:  assets/css/sections/solutions-stats-four.css (opted into by
 *               the `solutions-stats--four` class the content file carries)
 * Markup:       bin/why-infinitus-page/content/stats.php
 *
 * Page-scoped. Every selector compounds the page hook only the inserted Why
 * Infinitus copy carries with the base section class, so nothing here reaches
 * another page and nothing here depends on this directory's glob order.
 *
 * WHAT THIS FILE OWNS — everything the node measures that neither the base
 * nor the four-up variant provides:
 *
 *   1. The three plain-type cells. Only "350M" counts (#921); "8 of 10",
 *      ">50%" and "Up to 5x" are core/paragraph pairs in a group, and this
 *      file gives them the counter's column mechanics and type so the four
 *      cells read as one row. Values copied from the block's own stylesheet
 *      (src/blocks/stat-counter/style.scss), the way platform-stats.css does
 *      it, so the cells cannot drift apart.
 *   2. The label rung. Node 2640:4419 … 2640:4431 are Desktop/Body Large 24/36;
 *      the counter ships 18/28. --fs-body-2xl is the theme's 24/36 rung,
 *      flat at every breakpoint. Same override Product Studio's stats carry.
 *   3. The value/label gap: 10px on the node (2640:4417's `gap: 10px`), no
 *      rung on the spacing ladder; the counter's default is sp-2 (8px).
 *      Same override Product Studio's stats carry.
 *   4. No hairlines in the stack. Handoff §2: "Tablet/Mobile: Stack single
 *      column, centered, remove dividers", and #921's acceptance criterion
 *      "three hairlines on desktop, none on mobile".
 *
 * Colours are palette presets on the blocks — the ground, the white values,
 * the Neutral 300 labels and the Neutral 600 rules — and are absent here.
 *
 * ⚑ DESIGN QA — removing the hairlines in the stack follows this page's
 * handoff and ticket over BugHerd #152, where design asked for the Payors
 * hairlines to survive the stack, laid flat, "on every page running this
 * pattern". That ruling predates this comp. Restoring them is one rule
 * (drop the display:none below); the base already lays them flat.
 *
 * ⚑ DESIGN QA — the stack starts at 1024.98, not 767.98, because four 24px
 * labels do not fit a 708px tablet row; see solutions-stats-four.css. The
 * handoff asks for the single column at tablet anyway.
 */

.infinitus-section--why-stats.infinitus-section--solutions-stats {
	/* Node 2640:4417: value-to-label gap. */
	--why-stats-value-label-gap: 10px;
}

.infinitus-section--why-stats.infinitus-section--solutions-stats .wp-block-infinitus-stat-counter {
	gap: var(--why-stats-value-label-gap);
}

.infinitus-section--why-stats.infinitus-section--solutions-stats .wp-block-infinitus-stat-counter .stat-counter__label {
	font-size: var(--fs-body-2xl);
	line-height: var(--lh-body-2xl);
}

/* The plain-type cells: stat-counter is a flex column, value over label. */
.infinitus-section--why-stats.infinitus-section--solutions-stats .why-stats__word {
	display: flex;
	flex-direction: column;
	gap: var(--why-stats-value-label-gap);
}

/* Desktop/H2 56 Light — the rung the counter block sets on its own value,
   read from the theme ladder so the four values move together. */
.infinitus-section--why-stats.infinitus-section--solutions-stats .why-stats__word-value {
	font-size: var(--fs-h2);
	font-weight: 300;
	letter-spacing: 0;
	line-height: var(--lh-h2);
	margin: 0;
	/* The opposite of the call solutions-stats.css makes for the counter's
	   "Up to 5x" (it lifts the block's nowrap so a long prefix wraps rather
	   than escapes its column). That guard exists for whatever prefix an
	   editor types into a THIRD of the row; these cells are 185px at 1025
	   and the value is the whole string, so a wrap here splits "Up to / 5x"
	   into two lines of 56px type. nowrap, and the cell clips nothing at
	   any width measured. */
	white-space: nowrap;
}

.infinitus-section--why-stats.infinitus-section--solutions-stats .why-stats__word-label {
	font-size: var(--fs-body-2xl);
	line-height: var(--lh-body-2xl);
	margin: 0;
}

/* Stack: the variant lays the hairlines flat; this page removes them. The
   stacked gap then reads once between cells rather than twice around a
   rule, so it is doubled back to the 48px the base's pair adds up to. */
@media (max-width: 1024.98px) {
	.infinitus-section--why-stats.infinitus-section--solutions-stats {
		--solutions-stats-gap-stacked: var(--wp--preset--spacing--sp-12);
	}

	.infinitus-section--why-stats.infinitus-section--solutions-stats .solutions-stats__rule {
		display: none;
	}
}