/* ────────────────────────────────────────────────────────────
   03-stats-collection.css — 4-column stat tile grid
   Section uses: .stats-collection
   Tiles use: .stat-tile

   Bg variation behavior (is-style-* on the core/group outer):
     bg-medium (default): gray-soft section, white tiles, navy numbers
     bg-dark:             blue section, white tiles, navy numbers
     bg-light:            white section, blue-primary tile fill, white text
   ──────────────────────────────────────────────────────────── */

/* ── Section wrapper ──────────────────────────────────────── */
.stats-collection {
	padding: var(--spacing-4xl) var(--spacing-md);
}

/* ── Inner: max-width container ───────────────────────────── */
.stats-collection__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
}

/* ── Section heading ─────────────────────────────────────── */
.stats-collection h2 {
	font-family: var(--font-primary);
	font-size: var(--text-heading-xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-heading);
	text-align: center;
	margin: 0 0 var(--spacing-sm) 0;
}

/* ── Section intro ────────────────────────────────────────── */
.stats-collection__intro {
	max-width: var(--container-narrow);
	margin: 0 auto;
	font-family: var(--font-body);
	font-size: var(--text-heading-sm);
	line-height: var(--line-height-loose);
	color: var(--color-text-body);
	text-align: center;
}

/* ── Grid ─────────────────────────────────────────────────── */
.stats-collection__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--spacing-lg);
	margin-top: var(--spacing-xl);
}

/* ── Stat tile ────────────────────────────────────────────── */
.stat-tile {
	background-color: var(--color-white);
	box-shadow: var(--shadow-stat-card);
	padding: var(--spacing-xl) var(--spacing-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

/* ── Stat number ──────────────────────────────────────────── */
.stat-tile__number {
	font-family: var(--font-primary);
	font-size: var(--text-display-xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-heading);
	margin: 0;
}

/* ── Stat label ───────────────────────────────────────────── */
.stat-tile__label {
	font-family: var(--font-body);
	font-size: var(--text-body-base);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-normal);
	color: var(--color-text-body);
	margin: 0;
	text-align: center;
}

/* ── Light-bg overrides: blue tile fill, white text ──────── */
/* is-style-bg-light is on the core/group outer; .stats-collection
   and .stat-tile are on inner GB elements. */
.is-style-bg-light .stats-collection .stat-tile {
	background-color: var(--color-blue-primary);
}

.is-style-bg-light .stats-collection .stat-tile__number {
	color: var(--color-text-body-inverse);
}

.is-style-bg-light .stats-collection .stat-tile__label {
	color: var(--color-text-body-inverse);
}

/* ── Dark-bg overrides: white tiles, re-pin text ─────────── */
/* 02-style-variations.css inverts all p to white on dark bg.
   These rules restore tile interior to dark-text-on-white.
   Heading also needs explicit inversion since it's a GB text
   block, not .wp-block-heading. */
.is-style-bg-dark .stats-collection h2 {
	color: var(--color-text-body-inverse);
}

.is-style-bg-dark .stats-collection__intro {
	color: var(--color-text-body-inverse);
}

.is-style-bg-dark .stat-tile {
	background-color: var(--color-white);
}

.is-style-bg-dark .stat-tile__number {
	color: var(--color-text-heading);
}

.is-style-bg-dark .stat-tile__label {
	color: var(--color-text-body);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
	.stats-collection__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.stats-collection {
		padding: var(--spacing-2xl) var(--spacing-sm);
	}

	.stats-collection__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--spacing-md);
	}
}