/* ampeco/tw-stats — a static stat row. Typography comes from DEFAULTS, not
   hardcoded values: font-size via theme.json presets (has-h1-font-size /
   has-body-small-font-size), font-family/weight inherited from the tag/section
   default, colour via the DS-reactive text-ink / text-ink-2 utilities. This file
   owns LAYOUT only (the value→label rhythm); the grid is Tailwind in render.php. */

.tw-stats__value { line-height: 1; }
.tw-stats__label { margin-top: 8px; line-height: 1.35; }

/* ── Strip — `is-style-strip` (case studies: Powy, INDIGO) ─────────────────────
   Centred value-over-label stats in one row: equal shares on desktop, one stat
   per row on a phone (<=640px), as in the design. No frame of its own — the panel
   around it is a group with border/padding controls. Light by default, with a
   dark variant inside a dark group (ndsTheme: dark). `highlight` on a row paints
   its value in brand ink: #0E60C3 on light, #50A4FA on dark.
   Colours are the theme.json preset variables, which WordPress prints on every
   page. The DS `--c-*` / `--p-*` variables only exist where a block loads
   `ampeco-base` — the Powy page loads none, and the highlight fell back to the
   light-theme blue on its dark hero. */
.tw-stats.is-style-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xxl, 24px) var(--wp--preset--spacing--4-xl, 32px);
	max-width: none;
}
.tw-stats.is-style-strip .tw-stats__item {
	flex: 1 1 110px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--s, 8px);
	text-align: center;
}
.tw-stats.is-style-strip .tw-stats__value {
	font-family: var(--wp--preset--font-family--heading, "Manrope", sans-serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--h-2, 40px);
	line-height: 1.2;
	color: var(--wp--preset--color--midnight-800, #0E1828);
}
.tw-stats.is-style-strip .tw-stats__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-small, 14px);
	font-weight: 300;
	line-height: 1.6;
	color: var(--wp--preset--color--raven-100, #53606C);
}
.tw-stats.is-style-strip .tw-stats__item--highlight .tw-stats__value { color: var(--wp--preset--color--text-brand-default-light, #0E60C3); }
:where(.theme-dark, [data-theme="dark"]) .tw-stats.is-style-strip .tw-stats__value { color: var(--wp--preset--color--text-default-default-dark, #F5FAFF); }
:where(.theme-dark, [data-theme="dark"]) .tw-stats.is-style-strip .tw-stats__label { color: var(--wp--preset--color--text-default-secondary-dark, #A7B1C1); }
:where(.theme-dark, [data-theme="dark"]) .tw-stats.is-style-strip .tw-stats__item--highlight .tw-stats__value { color: var(--wp--preset--color--text-brand-secondary-light, #50A4FA); }
@media (max-width: 640px) {
	.tw-stats.is-style-strip .tw-stats__item { flex-basis: 100%; }
}

/* ── Stacked — `is-style-stacked` (case-study intro card) ──────────────────────
   One stat per row, a hairline between rows, large light display numerals. */
.tw-stats.is-style-stacked {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: none;
}
.tw-stats.is-style-stacked .tw-stats__item {
	padding: var(--wp--preset--spacing--xxl, 24px) 0;
	border-top: 1px solid var(--wp--preset--color--border-default-secondary-light, #D3D8E0);
}
.tw-stats.is-style-stacked .tw-stats__item:first-child { padding-top: 0; border-top: 0; }
.tw-stats.is-style-stacked .tw-stats__item:last-child { padding-bottom: 0; }
.tw-stats.is-style-stacked .tw-stats__value {
	font-family: var(--wp--preset--font-family--heading, "Manrope", sans-serif);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--h-1, 48px);
	line-height: 1;
	color: var(--wp--preset--color--midnight-800, #0E1828);
}
.tw-stats.is-style-stacked .tw-stats__label {
	margin-top: var(--wp--preset--spacing--s, 8px);
	font-size: var(--wp--preset--font-size--body-medium, 16px);
	font-weight: 300;
	line-height: 1.4;
	color: var(--wp--preset--color--text-default-tertiary-light, #233D63);
}