/**
 * Stats Counter — Shared Styles
 *
 * Base stats section with light and dark variants.
 */

/* ── Base Stats ─────────────────────────────── */

.stats {
	padding: 4rem var(--container-padding);
}

.stats--light {
	background: var(--color-brand);
	color: #fff;
}

.stats__grid {
	max-width: var(--container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.stats__item {
	text-align: center;
}

.stats--light .stats__item {
	border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
}

.stats--light .stats__item:last-child {
	border-inline-start: none;
}

@media (max-width: 768px) {
	.stats--light .stats__item:nth-child(2n+1) {
		border-inline-start: none;
	}

	.stats--light .stats__item:nth-child(2n) {
		border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
	}
}

.stats__number {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 900;
	margin-bottom: 0.5rem;
}

.stats__label {
	opacity: 0.8;
	font-size: clamp(0.875rem, 1.2vw, 1.125rem);
}

/* ── Variant: Dark ─────────────────────────────── */

.stats--dark {
	background: var(--color-inverse-surface);
	color: var(--color-on-inverse-surface, #ffffff);
	padding: 4rem 0;
}

.stats--dark .stats__grid {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.stats--dark .stats__item {
	border-inline-start: 1px solid rgba(255, 255, 255, 0.15);
	padding: 1rem 0;
}

.stats--dark .stats__item:last-child {
	border-inline-start: none;
}

.stats--dark .stats__number {
	font-family: var(--font-headline);
	font-weight: 900;
	color: var(--color-primary-fixed);
}

.stats--dark .stats__label {
	font-family: var(--font-headline);
	color: var(--color-primary-fixed-dim);
}

/* ── Responsive ───────────────────────────────── */

@media (max-width: 768px) {
	.stats__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1023px) and (min-width: 768px) {
	.stats--dark .stats__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.stats--dark .stats__item:nth-child(2n+1) {
		border-inline-start: none;
	}

	.stats--dark .stats__item:nth-child(2n) {
		border-inline-start: 1px solid rgba(255, 255, 255, 0.15);
	}
}

@media (max-width: 768px) {
	.stats--dark {
		padding: 3rem 0;
	}

	.stats--dark .stats__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}

	.stats--dark .stats__item:nth-child(2n+1) {
		border-inline-start: none;
	}

	.stats--dark .stats__item:nth-child(2n) {
		border-inline-start: 1px solid rgba(255, 255, 255, 0.15);
	}
}