/*** Module: Stats — Style: split ***/

/** Style: split — scoped to .style-split **/

.module.stats.style-split {
	overflow-x: clip;
	text-align: left;
}

.module.stats.style-split .container {
	align-items: center;
	padding-block: 0;
}

.module.stats.style-split .header {
	grid-column: 1 / span 5;
	padding-block: var(--module-spacing-medium);
}

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

/* The stats grid IS the parchment panel: a 2-up grid that bleeds toward the
   right viewport edge, stopping 24px short — the bg-field convention applied
   to one side. Padding insets the figures from the panel edges. */
.module.stats.style-split .list {
	align-content: center;
	align-self: stretch;
	background: var(--parchment);
	column-gap: var(--text-spacing-medium);
	display: grid;
	grid-column: 7 / -1;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	justify-self: start;
	margin: 0;
	padding: var(--module-spacing-medium);
	row-gap: var(--text-spacing-large);
	width: calc(100% - var(--viewport-edge) - var(--text-spacing-small));
}

/* An editor-set Column Count pins the panel to a fixed grid (count-2 = blank =
   the auto-fit default above, so it's deliberately excluded). */
.module.stats.style-split .list:is(.count-3, .count-4, .count-5, .count-6) {
	grid-template-columns: repeat(var(--stat-cols), 1fr);
}

/* Left-align each figure (the shared .stat centres them for the strip styles). */
.module.stats.style-split .stat {
	align-items: flex-start;
}

.module.stats.style-split .number {
	color: var(--orange-on-parchment);
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1100 - Mobile Header / Nav */
/***************************************************************************************************************************************************************************************/

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

	/* Copy + panel stop sitting side by side — the stats panel drops below the copy. */
	.module.stats.style-split .container {
		display: block;
	}

	.module.stats.style-split .header {
		padding-block: 0;
	}

	.module.stats.style-split .list {
		margin-top: var(--text-spacing-large);
		padding: var(--text-spacing-xlarge);
		width: 100%;
	}

}

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

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

	/* Echo the pinned-count selector — it out-specifies a bare .list and would
	   otherwise keep its desktop columns instead of stacking here. */
	.module.stats.style-split .list,
	.module.stats.style-split .list:is(.count-3, .count-4, .count-5, .count-6) {
		gap: var(--text-spacing-small);
		grid-template-columns: 1fr;
	}

}