/* Section: focus. A light band: the figures in a row, then the story (on the primary colour) beside the list. */
.s-focus { background: linear-gradient(180deg, var(--wp--preset--color--surface-alt), var(--wp--preset--color--surface)); }
/* after the simulator's pale band, a focus section is on the page's white, so the two never run together */
.s-simulator + .s-focus { background: var(--wp--preset--color--surface); }
.s-focus__note { margin: calc(-1 * var(--wp--preset--spacing--20)) 0 var(--wp--preset--spacing--40); font-size: 0.9375rem; color: var(--wp--preset--color--muted); }
.s-focus__figures { list-style: none; margin: 0 0 var(--wp--preset--spacing--40); padding: 0; display: grid; gap: var(--wp--preset--spacing--20); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.s-focus__figure { display: flex; flex-direction: column; gap: 0.35rem; padding: var(--wp--preset--spacing--30); border-radius: var(--wp--custom--radius--large); background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); }
.s-focus__value { font-family: var(--wp--custom--font--heading); font-weight: var(--wp--custom--weight--heading); font-size: var(--wp--preset--font-size--x-large); line-height: 1.1; color: var(--wp--preset--color--primary); }
.s-focus__label { font-weight: var(--wp--custom--weight--strong); text-wrap: pretty; }
/* the band fades into the page's own white, so the plain section after it shares one gap, as two plain sections do */
.s-focus + .s:not(.s--bg) { padding-block-start: 0; }
.s-focus__fignote { font-size: 0.9375rem; color: var(--wp--preset--color--muted); line-height: 1.5; }
.s-focus__source { margin-block-start: auto; padding-block-start: 0.4rem; border-block-start: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--muted); font-size: 0.9375rem; line-height: 1.5; }
@media (max-width: 599px) {
	.s-focus__figures { gap: var(--wp--preset--spacing--20); margin-block-end: var(--wp--preset--spacing--30); }
	.s-focus__figure { padding: var(--wp--preset--spacing--20); }
	.s-focus__value { font-size: var(--wp--preset--font-size--large); }
	.s-focus__story { padding: var(--wp--preset--spacing--30); }
	.s-focus__list { padding: var(--wp--preset--spacing--20); }
	.s-focus__list .s-focus__items { gap: var(--wp--preset--spacing--10); }
}
.s-focus__grid { display: grid; gap: var(--wp--preset--spacing--30); }
/* three or four figures share a tablet's row: a long value (a range, "39.8% → 26.3%") a step smaller */
@media (min-width: 600px) and (max-width: 899px) {
	.s-focus__value { font-size: var(--wp--preset--font-size--large); }
}
/* four figures: two by two until four fit in a row, never three and one alone */
@media (min-width: 600px) {
	.s-focus__figures--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.s-focus__figures--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 700px) {
	.s-focus__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: stretch; }
	/* a short story beside a long list keeps its own height and stays in view, instead of an empty coloured block */
	.s-focus__story { align-self: start; position: sticky; inset-block-start: calc(var(--wp--custom--header--height) + var(--wp--preset--spacing--20)); }
}
.s-focus__story {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	box-shadow: var(--wp--custom--shadow--large);
}
.s-focus__story-icon { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast); }
.s-focus__story-title { color: var(--wp--preset--color--primary-contrast); font-size: var(--wp--preset--font-size--large); margin: 0; text-wrap: balance; }
/* the story column is narrow on a tablet: its title a step smaller, so it keeps whole words on a line */
@media (min-width: 600px) and (max-width: 899px) {
	.s-focus__story-title { font-size: var(--wp--preset--font-size--medium); }
}
.s-focus__story-text { color: rgba(255, 255, 255, 0.88); }
.s-focus__story .btn { margin-block-start: auto; }
.s-focus__list { padding: var(--wp--preset--spacing--30); border-radius: var(--wp--custom--radius--large); background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); }
.s-focus__list-title { font-size: var(--wp--preset--font-size--medium); }
.s-focus__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--20); }
.s-focus__item { display: flex; gap: var(--wp--preset--spacing--20); align-items: flex-start; }
.s-focus__icon { display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; flex: none; border-radius: var(--wp--custom--radius--medium); background: var(--wp--preset--color--surface-alt); color: var(--wp--preset--color--primary); }
.s-focus__item-body { display: flex; flex-direction: column; }
.s-focus__item-body span { color: var(--wp--preset--color--muted); }