/**
 * Stats style: Feature Row
 *
 * The Row's cells under a full display lockup, ruled between rather than divided by space. The
 * rules stand off the copy rather than running the band's height, so the row still reads as
 * three captions and not as a table.
 */

/* The band is pulled up under the module above, so padding is what sets the distance from that
   edge down to the headline. A wash paints from a wrapper around the run and carries the pull
   itself, which is why the wrapper answers here and the module only when it has no wash. */
.page-builder > .wash.margin-overlap:has(> .module.stats.style-feature:first-child),
.page-builder > .module.stats.style-feature.margin-overlap {
	padding-top: calc(var(--module-overlap) + 100px);
}

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

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

.module.stats.style-feature .intro .heading-6 {
	color: var(--charcoal);
	margin: 0;
}

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

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

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

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

.module.stats.style-feature .figures > li {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
	padding: var(--text-spacing-xsmall) var(--text-spacing-small);
	text-align: center;
}

.module.stats.style-feature .figures > li + li {
	border-left: 1px solid var(--charcoal-15);
}

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

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

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

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

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

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

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

	.page-builder > .wash.margin-overlap:has(> .module.stats.style-feature:first-child),
	.page-builder > .module.stats.style-feature.margin-overlap {
		padding-top: calc(var(--module-overlap) + var(--module-spacing-medium));
	}

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

	/* An odd cell runs the row's width, and the rule that divided it from the cell beside it
	   has nothing left to divide. Three still fit across, so a row of three keeps its rules. */
	.module.stats.style-feature .figures:not(:has(> li:nth-child(3):last-child)) > li:last-child:nth-child(odd) {
		border-left: 0;
		grid-column: 1 / -1;
	}

	.module.stats.style-feature .figures:not(:has(> li:nth-child(3):last-child)) > li:nth-child(odd) {
		border-left: 0;
	}

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

}

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

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

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

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

	/* Stacked one to a row, the figures are their own separation — a rule between each pair turns
	   a run of marks into a table of them. */
	.module.stats.style-feature .figures > li + li {
		border-left: 0;
		border-top: 0;
	}

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

}