/* components/stats-block/stats-block.css */

.mvc-stats-block--primary { background-color: var(--color-primary); }
.mvc-stats-block--dark    { background-color: var(--color-bg-dark); }
.mvc-stats-block--alt     { background-color: var(--color-bg-alt); }

.mvc-stats-block__grid {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: 1fr 1fr;
	text-align: center;
}

@media (min-width: 640px) {
	.mvc-stats-block__grid--3col { grid-template-columns: repeat(3, 1fr); }
	.mvc-stats-block__grid--4col { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 479px) {
	.mvc-stats-block__grid { grid-template-columns: 1fr 1fr; }
}

.mvc-stats-block__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
}

/*
 * Icon color cascade:
 *   .mvc-stats-block__item style="--mvc-stat-icon-color:#xxx"   (per row)
 *   .mvc-stats-block__grid style="--mvc-stat-icon-color:#xxx"   (block default)
 *   theme defaults below (white-ish on dark bgs, primary on light bgs)
 *
 * The custom-property fallback chain handles "blank picker means inherit
 * theme default" — when --mvc-stat-icon-color is unset, the value falls
 * through to the next color in the var() call.
 */
.mvc-stats-block__icon {
	color: var(--mvc-stat-icon-color, rgba(255, 255, 255, 0.7));
	margin-block-end: var(--space-2);
}

.mvc-stats-block--alt .mvc-stats-block__icon,
.mvc-stats-block--default .mvc-stats-block__icon {
	color: var(--mvc-stat-icon-color, var(--color-primary));
}

.mvc-stats-block__number {
	font-size: var(--text-5xl);
	font-weight: var(--mvc-font-weight-heading, var(--font-weight-bold, 700));
	line-height: 1;
	color: var(--color-text-inverse);
	letter-spacing: var(--tracking-tight);
}

.mvc-stats-block--alt .mvc-stats-block__number,
.mvc-stats-block--default .mvc-stats-block__number {
	color: var(--color-heading);
}

.mvc-stats-block__label {
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.mvc-stats-block--alt .mvc-stats-block__label,
.mvc-stats-block--default .mvc-stats-block__label {
	color: var(--color-text-muted);
}

@media (max-width: 479px) {
	.mvc-stats-block__number { font-size: var(--text-4xl); }
}

/* ── Style overrides ────────────────────────────────────────────────────── */

/* Dark band — dark surface, light numbers */
.mvc-stats-block--style-dark-band {
	background-color: var(--color-gray-900);
}
.mvc-stats-block--style-dark-band .mvc-stats-block__number { color: var(--color-white); }
.mvc-stats-block--style-dark-band .mvc-stats-block__label  { color: var(--color-gray-400); }

/* Light cards — each stat in its own card on a neutral bg */
.mvc-stats-block--style-light-cards {
	background-color: var(--color-bg-alt);
}
.mvc-stats-block--style-light-cards .mvc-stats-block__grid {
	gap: var(--space-6);
}
.mvc-stats-block--style-light-cards .mvc-stats-block__item {
	background-color: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	box-shadow: var(--shadow-sm);
}
.mvc-stats-block--style-light-cards .mvc-stats-block__number { color: var(--color-primary); }
.mvc-stats-block--style-light-cards .mvc-stats-block__label  { color: var(--color-text-muted); }

/* Inline dividers — single row, dividers between items, no bg */
.mvc-stats-block--style-inline-dividers .mvc-stats-block__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.mvc-stats-block--style-inline-dividers .mvc-stats-block__item {
	flex: 1 1 160px;
	padding: var(--space-8) var(--space-6);
	border-right: 1px solid var(--color-divider);
}
.mvc-stats-block--style-inline-dividers .mvc-stats-block__item:last-child {
	border-right: none;
}
.mvc-stats-block--style-inline-dividers .mvc-stats-block__number { color: var(--color-primary); }
.mvc-stats-block--style-inline-dividers .mvc-stats-block__label  { color: var(--color-text-muted); }
@media (max-width: 639px) {
	.mvc-stats-block--style-inline-dividers .mvc-stats-block__item {
		border-right: none;
		border-block-end: 1px solid var(--color-divider);
		flex-basis: 50%;
	}
}

/* Icon above — large icon visible above the number */
.mvc-stats-block--style-icon-above .mvc-stats-block__icon {
	width: 48px;
	height: 48px;
	color: var(--mvc-stat-icon-color, var(--mvc-color-primary, var(--color-primary)));
	margin-block-end: var(--space-2);
}
.mvc-stats-block--style-icon-above.mvc-stats-block--primary .mvc-stats-block__icon,
.mvc-stats-block--style-icon-above.mvc-stats-block--dark    .mvc-stats-block__icon {
	color: var(--mvc-stat-icon-color, rgba(255, 255, 255, 0.85));
}