/**
 * Stats
 *
 * Row: bare figure/label pairs on the page ground, divided by hairlines. The rule replaces the
 * grid gutter the design would otherwise have, so the cells butt together on their own
 * repeat(4, 1fr) track rather than sitting on the 12-column grid. Panel: the same figure/label
 * pairs beside copy, on an inset tea-green band.
 */

.module.stats.style-default.bg-linen {
	padding: 196px 0 var(--module-spacing-medium);
}

.module.sticky-navigation.margin-overlap + .module.stats.style-default.bg-linen {
	margin-top: -36px;
	padding-top: var(--module-spacing-medium);
}

.module.stats.style-default .intro {
	margin-bottom: var(--module-spacing-small);
	text-align: center;
}

/* Ten columns: at the container's full width the line ran on past where the comp breaks it. */
.module.stats.style-default .intro :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
	margin: 0 auto var(--text-spacing-xxsmall);
	max-width: calc(10 * var(--one-column-width) + 9 * var(--gap));
}

.module.stats.style-default .intro .heading-6 {
	margin: 0;
}

.module.stats.style-default .intro .description {
	margin-inline: auto;
	margin-top: var(--text-spacing-small);
	max-width: 990px;
}

.module.stats.style-default .intro .description > :first-child {
	margin-top: 0;
}

.module.stats.style-default .intro .description > :last-child {
	margin-bottom: 0;
}

.module.stats.style-default .figures {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* No block padding: the row is exactly its tallest cell, and the cells are divided by space
   rather than by rules. The stacked layouts below put both back, because there they are. */
.module.stats.style-default .figures > li {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
	padding-inline: var(--text-spacing-small);
	text-align: center;
}



/* A figure is the brand's mid-green on a pale ground, which is a value a programme sets. */
.module.stats.style-default .figures .heading-3 {
	color: var(--program-mid, var(--dark-teal));
	margin: 0;
}

.module.stats.style-default .figures .small {
	color: var(--charcoal);
	margin: 0;
}

.module.stats.style-default .figures:has(> li:nth-child(6):last-child) {
	grid-template-columns: repeat(6, 1fr);
}

.module.stats.style-default .figures:has(> li:nth-child(3):last-child) {
	grid-template-columns: repeat(3, 1fr);
}

.module.stats.style-default .figures:has(> li:nth-child(2):last-child) {
	grid-template-columns: repeat(2, 1fr);
}

.module.stats.style-panel .panel {
	background: var(--tea-green);
	border-radius: 10px;
	margin-inline: var(--container-breakout-full);
	padding: var(--module-spacing-medium) calc(var(--container-breakout-full) * -1);
}

.module.stats.style-panel .copy {
	grid-column: 1 / span 5;
	padding: var(--text-spacing-xxsmall) 0 0 var(--text-spacing-small);
}

.module.stats.style-panel .copy :is(h1, h2, h3, h4, h5, h6) {
	color: var(--charcoal);
	margin: 0;
}

.module.stats.style-panel .figures {
	display: grid;
	gap: var(--text-spacing-large) var(--text-spacing-medium);
	grid-column: 6 / span 7;
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	margin: 0;
	padding: 0 var(--text-spacing-xxsmall) 0 var(--text-spacing-xxlarge);
}

.module.stats.style-panel .figures > li {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.module.stats.style-panel .figures .heading-3 {
	color: var(--dark-teal);
	margin: 0;
}

.module.stats.style-panel .figures p.small {
	color: var(--charcoal);
	margin: 0;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes */
/***************************************************************************************************************************************************************************************/

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

	/* The panel keeps its two columns at this width but loses the screen either side of them, so
	   both halves want more of an inset off the fill than the desktop grid gives them. Below 950
	   the columns become one and the block resets both paddings to nothing. */
	.module.stats.style-panel .copy {
		padding: var(--text-spacing-xxsmall) 0 0 var(--text-spacing-xlarge);
	}

	.module.stats.style-panel .figures {
		padding: 0 var(--text-spacing-medium) 0 var(--text-spacing-xxlarge);
	}

}

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

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

	.module.stats.style-default.bg-linen {
		padding-top: var(--module-spacing-xlarge);
	}

	.module.sticky-navigation.margin-overlap + .module.stats.style-default.bg-linen {
		margin-top: 0;
	}

	.module.stats.style-default .figures,
	.module.stats.style-default .figures:has(> li:nth-child(6):last-child),
	.module.stats.style-default .figures:has(> li:nth-child(3):last-child) {
		grid-template-columns: repeat(2, 1fr);
	}

	.module.stats.style-default .figures > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.module.stats.style-default .figures > li {
		padding-block: var(--text-spacing-small);
	}

	.module.stats.style-panel .panel {
		margin-inline: 0;
		padding: var(--module-spacing-small) var(--text-spacing-large);
	}

	.module.stats.style-panel .copy,
	.module.stats.style-panel .figures {
		grid-column: 1 / -1;
	}

	.module.stats.style-panel .copy {
		padding: 0;
	}

	.module.stats.style-panel .figures {
		padding: 0;
	}

}

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

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

	/* Two to a row, as on a tablet, with an odd last figure given the row to itself by the rule up
	   there. Tracks that can shrink below their figures, so a long one wraps rather than pushing
	   its row wider than the screen. */
	.module.stats.style-default .figures,
	.module.stats.style-default .figures:has(> li:nth-child(6):last-child),
	.module.stats.style-default .figures:has(> li:nth-child(3):last-child),
	.module.stats.style-default .figures:has(> li:nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.module.stats.style-default .intro {
		margin-bottom: var(--text-spacing-xsmall);
	}

	.module.stats.style-default .figures > li {
		padding-block: var(--text-spacing-xsmall);
	}

	/* Sized for half the row, and held to one line: a figure broken across two reads as two
	   numbers. What little a long one needs past its column is taken from the cell's own inset,
	   never from the cell beside it. */
	.module.stats.style-default .figures :is(h3, .heading-3) {
		font-size: calc(34rem / 16);
		white-space: nowrap;
	}

	/* The fill runs to both edges of the screen and drops its corners: a rounded card inset from a
	   20px gutter is a card floating on a phone, where the comp reads it as a band. */
	.module.stats.style-panel .panel {
		border-radius: 0;
		gap: 24px;
		margin-inline: var(--viewport-edge);
		padding-inline: var(--text-spacing-medium);
	}

	.module.stats.style-panel .figures {
		gap: var(--text-spacing-small) var(--text-spacing-medium);
	}

	.module.stats.style-panel .figures {
		grid-template-columns: 1fr;
	}

}