/* ==========================================================================
   Stats Strip Component Macro
   ========================================================================== */

.stats-strip {
    border-top: var(--border-width-base) solid var(--border-subtle);
    border-bottom: var(--border-width-base) solid var(--border-subtle);
    padding: var(--space-10) 0;
}

.stats-strip__heading {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    opacity: var(--opacity-80);
    margin-bottom: var(--space-8);
}

.stats-strip__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
    text-align: center;
}

.stats-strip__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-4);
    border-right: var(--border-width-base) solid var(--border-subtle);
}

.stats-strip__item:last-child {
    border-right: none;
}

.stats-strip__number {
    font-family: var(--font-family-body-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: var(--line-height-none);
}

.stats-strip__label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-snug);
    max-width: 18ch;
    margin: 0 auto;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .stats-strip__grid { grid-template-columns: repeat(2, 1fr); }
    .stats-strip__item:nth-child(2) { border-right: none; }
}

@media (max-width: 480px) {
    .stats-strip__grid { grid-template-columns: 1fr; }
    .stats-strip__item {
        border-right: none;
        border-bottom: var(--border-width-base) solid var(--border-subtle);
    }
    .stats-strip__item:last-child { border-bottom: none; }
}

/* ── Dark Mode ────────────────────────────────────────────────────────────── */