/* Bento-style headline statistic cards. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.stat-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.stat-card__label {
    font: var(--text-label-md);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin-bottom: var(--space-xs);
}

.stat-card__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-sm);
}

.stat-card__value {
    font: var(--text-headline-lg);
    font-variant-numeric: tabular-nums;
}

.stat-card__delta { color: var(--success); font-weight: 700; font-size: 13px; }

.stat-card--accent {
    background: var(--primary-container);
    color: #fff;
}

.stat-card--accent .stat-card__label { color: rgba(255, 255, 255, 0.6); }
.stat-card--accent .stat-card__value { color: #fff; }

/* Secondary line under a stat's value (e.g. the next race's liberation point under its date). */
.stat-card__note { margin-top: var(--space-sm); }
.stat-card--accent .stat-card__note { color: rgba(255, 255, 255, 0.6); }

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

@media (max-width: 560px) {
    .stat-grid { grid-template-columns: 1fr; }
}