/**
 * Stats style: Facts Band
 *
 * A single ruled row of figures, sized off its cells rather than a column count — the track
 * takes however many the repeater holds. Lifted from the case study's own band
 * (`single-portfolio.css` → Facts band), which is where the pattern was drawn.
 */

.module.stats.style-facts .container > :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
	margin: 0 0 var(--text-spacing-large);
}

.module.stats.style-facts .facts {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* On every cell rather than between them: the comp opens the band with a rule as well as
   dividing it with them, so the first fact is inside the measure rather than starting outside
   it. The block padding is what gives each rule its 16px of run above and below the type. */
.module.stats.style-facts .facts > li {
	border-left: 1px solid var(--charcoal-15);
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
	padding: var(--text-spacing-xsmall) var(--text-spacing-small);
}

.module.stats.style-facts .facts p {
	margin: 0;
}

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

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

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

	/* Three to a row rather than six across: the cells still read at this width, so the band stays
	   a band and keeps the rules that divide it, each with its own run to the right of one. */
	.module.stats.style-facts .facts {
		column-gap: var(--text-spacing-medium);
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: var(--text-spacing-medium);
	}

	.module.stats.style-facts .facts > li {
		padding: 0 0 0 var(--text-spacing-small);
	}

}

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

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

	/* The case study's band at this width, which is the one this style was lifted from: two to a
	   row, each opened by its rule with a short run to the right of it, the figure and its label
	   4 apart. */
	.module.stats.style-facts .facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--text-spacing-small);
	}

	.module.stats.style-facts .facts > li {
		gap: 4px;
		padding: 0 0 0 var(--text-spacing-xsmall);
	}

}