/* ════════════════════════════════════════════════════════════════
   STATS BAR — Shared component
   Used on: Homepage (data-theme="primary"), About (data-theme="tinted")
   ════════════════════════════════════════════════════════════════ */

@layer components {

/* Wrapper — horizontal row of stats */
.stats-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-xl) var(--space-2xl);
	text-align: center;
}

/* Individual stat */
.stats-bar__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2xs);
}

.stats-bar__number {
	font-family: var(--font-heading);
	font-size: var(--heading-m);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	color: var(--text-main);
	margin: 0;
}

.stats-bar__label {
	font-size: var(--text-s);
	font-weight: var(--weight-medium);
	color: var(--text-muted);
	margin: 0;
}

/* ── Theme: primary variant ── */
.stats-bar--primary .stats-bar__number {
	color: var(--white);
}

.stats-bar--primary .stats-bar__label {
	color: rgba(255, 255, 255, 0.7);
}

/* ── Responsive: stack on small screens ── */
@media (max-width: 30em) {
	.stats-bar {
		gap: var(--space-l);
	}

	.stats-bar__number {
		font-size: var(--heading-s);
	}

	.stats-bar__label {
		font-size: var(--text-xs);
	}
}

} /* end @layer components */