/*** Module: Stats ***/

.module.stats {
	--stats-emphasis: var(--orange);

	text-align: center;
}

/* Compact field colour — page-colour by default so it reads as an open strip;
   White paints an actual card behind the stats. */
.module.stats .bg-field {
	background: var(--off-white);
}

.module.stats.style-compact.bg-white .bg-field {
	background: var(--white);
}

.module.stats.style-compact.bg-parchment .bg-field {
	background: var(--parchment);
}

/* Darker orange keeps AA on the parchment band (plain --orange dips below 3:1). */
.module.stats.bg-parchment {
	--stats-emphasis: var(--orange-on-parchment);
}

/* Editor-bolded phrases in any stat heading read as the brand highlight. */
.module.stats :is(h1, .heading-1, h2, .heading-2, h3, .heading-3, h4, .heading-4, h5, .heading-5) :is(strong, b) {
	color: var(--stats-emphasis);
}

.module.stats .container {
	padding-block: var(--module-spacing-medium);
}

/* Extra room when a Sticky Menu butts up directly after. */
.module.stats:has(+ .sticky-menu) .container {
	padding-bottom: 88px;
}

.module.stats .header {
	grid-column: 2 / -2;
}

.module.stats .header > * + * {
	margin-top: var(--text-spacing-xxsmall);
}

/* Grid row-gap (--gap, 40) already separates the rows, so add only xxsmall (8) to
   reach the xlarge (48) target — a full xlarge here would double onto the gap. */
.module.stats .header + .list {
	margin-top: var(--text-spacing-xxsmall);
}

.module.stats .list {
	display: grid;
	gap: var(--gap);
	grid-column: 1 / -1;
	grid-template-columns: repeat(var(--stat-cols, 4), 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.stats .list.count-1 {
	--stat-cols: 1;
}

.module.stats .list.count-2 {
	--stat-cols: 2;
}

.module.stats .list.count-3 {
	--stat-cols: 3;
}

.module.stats .list.count-5 {
	--stat-cols: 5;
}

.module.stats .list.count-6 {
	--stat-cols: 6;
}

.module.stats .stat {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
}

.module.stats .stat p {
	margin: 0;
}

/* Regular-weight number (the global .heading-3 is Light/300). */
.module.stats.style-compact .number {
	font-weight: 400;
}

/* Proportional figures — the count-up's tabular-nums otherwise widens the digits
   and reads as extra letter-spacing. */
.module.stats.style-compact .count-up {
	font-variant-numeric: proportional-nums;
}

.module.stats.style-compact .icon img {
	display: block;
	height: auto;
	max-height: 48px;
	width: auto;
}

/* Adds to the .stat flex gap — flex margins don't collapse into it. */
.module.stats.style-compact .icon + .number {
	margin-top: var(--text-spacing-xxsmall);
}

/* Tight 24px gap when a coloured simple hero hands off directly to a
   coloured compact stats strip — keeps the two coloured fields visually
   linked. bg-default stats stay flush so the page-bg gutter still reads. */
.module.hero.style-simple:is(.bg-digital-blue, .bg-white, .bg-orange) + .module.stats.style-compact:not(.bg-default) {
	margin-top: var(--text-spacing-small);
}

/** Style: big **/

.module.stats.style-big {
	text-align: left;
}

/* The big stats read left-aligned, but the header stays centred on the page. */
.module.stats.style-big .header {
	text-align: center;
}

.module.stats.style-big .header + .list {
	margin-top: var(--text-spacing-xsmall);
}

.module.stats.style-big .list {
	row-gap: var(--module-spacing-medium);
}

.module.stats.style-big .stat {
	display: grid;
	gap: var(--text-spacing-xsmall) var(--text-spacing-small);
	grid-template-columns: auto 1fr;
}

.module.stats.style-big .metric-icon {
	--metric-icon-size: 60px;
	align-self: end;
	grid-row: 1;
}

.module.stats.style-big .number {
	grid-column: 2;
	grid-row: 1;
	/* Never wrap to two lines. min-width:0 keeps the 1fr track from blowing out
	   so an over-wide value (e.g. "$216K") overflows measurably — fit-big-stats
	   in script.js then scales the font down to fit its column. */
	min-width: 0;
	white-space: nowrap;
}

/* A standalone "in" (e.g. "1 in 5") reads smaller than the figures. */
.module.stats.style-big .number .stat-in {
	font-size: 0.4em;
	font-weight: 400;
}

.module.stats.style-big .label {
	grid-column: 2;
	grid-row: 2;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	/* Drop the desktop xlarge target back to just the grid gap. */
	.module.stats .header + .list {
		margin-top: 0;
	}

	.module.stats .list {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Odd count strands the last stat alone in column 1 — span the row and center it
	   at one column's width (accounts for the gap so it stays sibling-sized). style-big
	   drops to one column here, so exclude it or the lone item would shrink to half. */
	.module.stats:not(.style-big) .list .stat:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - var(--gap)) / 2);
	}

	.module.stats.style-big .list {
		gap: var(--text-spacing-medium);
		grid-template-columns: 1fr;
	}

	.module.stats.style-big .big-stat.large {
		font-size: calc(120rem / 16);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	.module.stats .container {
		padding-block: var(--text-spacing-large);
	}

	.module.stats:has(+ .sticky-menu) .container {
		padding-bottom: var(--module-spacing-large);
	}

	.module.stats .list {
		gap: var(--text-spacing-small);
	}

	.module.stats.style-featured .header + .list {
		margin-top: var(--text-spacing-small);
	}

	.module.stats.style-big .big-stat.large {
		font-size: calc(88rem / 16);
	}

}