/**
 * Snug Concerts — Public Impact Page
 *
 * Clean, visual, grant-ready layout using design tokens.
 */

.snug-impact {
    max-width: var(--snug-max-width-wide, 1280px);
    margin: 0 auto;
    padding: var(--snug-space-8, 32px) var(--snug-space-4, 16px);
    font-family: var(--snug-font, sans-serif);
    color: var(--snug-text, #1a1a2e);
    background: var(--snug-bg, #fff);
    overflow: hidden; /* Keep child cards/grids clipped to the white bg on mobile. */
}

.snug-impact *,
.snug-impact *::before,
.snug-impact *::after {
    box-sizing: border-box;
    color: var(--snug-text, #1a1a2e);
}

.snug-impact a {
    color: var(--snug-accent, #d97706);
    text-decoration: none;
}

.snug-impact a:hover {
    text-decoration: underline;
}

/* ── Hero ────────────────────────────────────── */
.snug-impact__hero {
    text-align: center;
    margin-bottom: var(--snug-space-8, 32px);
}

.snug-impact__title {
    font-size: var(--snug-text-4xl, 2.25rem);
    font-weight: var(--snug-weight-bold, 700);
    margin: 0 0 var(--snug-space-3, 12px);
    line-height: var(--snug-leading-tight, 1.25);
}

.snug-impact__subtitle {
    font-size: var(--snug-text-lg, 1.125rem);
    color: var(--snug-text-muted, #6b7280);
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Year Filter ─────────────────────────────── */
.snug-impact__years {
    display: flex;
    justify-content: center;
    gap: var(--snug-space-2, 8px);
    margin-bottom: var(--snug-space-8, 32px);
    flex-wrap: wrap;
}

.snug-impact__year-btn {
    display: inline-block;
    padding: var(--snug-space-2, 8px) var(--snug-space-4, 16px);
    border: 1px solid var(--snug-border, #e5e7eb);
    border-radius: var(--snug-radius-full, 9999px);
    font-size: var(--snug-text-sm, 14px);
    font-weight: var(--snug-weight-medium, 500);
    color: var(--snug-text-muted, #6b7280) !important;
    background: var(--snug-bg, #fff);
    transition: all var(--snug-transition, 150ms ease);
    text-decoration: none !important;
}

.snug-impact__year-btn:hover {
    border-color: var(--snug-accent, #d97706);
    color: var(--snug-accent, #d97706) !important;
}

.snug-impact__year-btn--active {
    background: var(--snug-text, #1a1a2e);
    border-color: var(--snug-text, #1a1a2e);
    color: #fff !important;
}

/* ── Stats Grid ──────────────────────────────── */
.snug-impact__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--snug-space-4, 16px);
    margin-bottom: var(--snug-space-10, 40px);
}

.snug-impact__stat {
    text-align: center;
    padding: var(--snug-space-6, 24px) var(--snug-space-4, 16px);
    background: var(--snug-bg-subtle, #f8f8f6);
    border-radius: var(--snug-radius-lg, 12px);
    border: 1px solid var(--snug-border-light, #f3f4f6);
    min-width: 0; /* Prevents grid blowout on narrow viewports. */
    overflow-wrap: break-word;
}

.snug-impact__stat--primary {
    background: var(--snug-accent-light, #fef3c7);
    border-color: var(--snug-accent, #d97706);
}

.snug-impact__stat-value {
    display: block;
    font-size: var(--snug-text-3xl, 1.875rem);
    font-weight: var(--snug-weight-bold, 700);
    line-height: var(--snug-leading-tight, 1.25);
    margin-bottom: var(--snug-space-1, 4px);
}

.snug-impact__stat--primary .snug-impact__stat-value {
    color: var(--snug-accent-text, #92400e) !important;
}

.snug-impact__stat-label {
    display: block;
    font-size: var(--snug-text-sm, 14px);
    color: var(--snug-text-muted, #6b7280) !important;
    font-weight: var(--snug-weight-medium, 500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Network Section ─────────────────────────── */
.snug-impact__network {
    margin-bottom: var(--snug-space-10, 40px);
}

.snug-impact__section-title {
    text-align: center;
    font-size: var(--snug-text-2xl, 1.5rem);
    font-weight: var(--snug-weight-bold, 700);
    margin: 0 0 var(--snug-space-6, 24px);
}

.snug-impact__network-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--snug-space-4, 16px);
}

.snug-impact__network-stat {
    text-align: center;
    padding: var(--snug-space-5, 20px);
    border: 2px solid var(--snug-border, #e5e7eb);
    border-radius: var(--snug-radius-lg, 12px);
    min-width: 0; /* Prevents grid blowout on narrow viewports. */
    overflow-wrap: break-word;
}

.snug-impact__network-value {
    display: block;
    font-size: var(--snug-text-2xl, 1.5rem);
    font-weight: var(--snug-weight-bold, 700);
    margin-bottom: var(--snug-space-1, 4px);
}

.snug-impact__network-label {
    display: block;
    font-size: var(--snug-text-sm, 14px);
    color: var(--snug-text-muted, #6b7280) !important;
}

/* ── CTA Section ─────────────────────────────── */
.snug-impact__cta {
    text-align: center;
    padding: var(--snug-space-10, 40px) var(--snug-space-6, 24px);
    background: var(--snug-bg-subtle, #f8f8f6);
    border-radius: var(--snug-radius-xl, 16px);
}

.snug-impact__cta-title {
    font-size: var(--snug-text-2xl, 1.5rem);
    font-weight: var(--snug-weight-bold, 700);
    margin: 0 0 var(--snug-space-3, 12px);
}

.snug-impact__cta-text {
    font-size: var(--snug-text-base, 1rem);
    color: var(--snug-text-muted, #6b7280);
    margin: 0 0 var(--snug-space-6, 24px);
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.snug-impact__cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--snug-space-3, 12px);
    flex-wrap: wrap;
}

.snug-impact__cta-btn {
    display: inline-block;
    padding: var(--snug-space-3, 12px) var(--snug-space-6, 24px);
    font-size: var(--snug-text-base, 1rem);
    font-weight: var(--snug-weight-semibold, 600);
    border-radius: var(--snug-radius-full, 9999px);
    text-decoration: none !important;
    transition: all var(--snug-transition, 150ms ease);
    background: var(--snug-accent, #d97706);
    color: #fff !important;
}

.snug-impact__cta-btn:hover {
    background: var(--snug-accent-hover, #b45309);
}

.snug-impact__cta-btn--secondary {
    background: transparent;
    border: 2px solid var(--snug-accent, #d97706);
    color: var(--snug-accent, #d97706) !important;
}

.snug-impact__cta-btn--secondary:hover {
    background: var(--snug-accent, #d97706);
    color: #fff !important;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 640px) {
    .snug-impact {
        padding: var(--snug-space-6, 24px) var(--snug-space-3, 12px);
    }
    .snug-impact__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--snug-space-3, 12px);
    }
    .snug-impact__stat {
        padding: var(--snug-space-4, 16px) var(--snug-space-3, 12px);
    }
    .snug-impact__stat-value {
        font-size: var(--snug-text-2xl, 1.5rem);
    }
    .snug-impact__network-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--snug-space-3, 12px);
    }
    .snug-impact__network-stat {
        padding: var(--snug-space-3, 12px);
    }
    .snug-impact__title {
        font-size: var(--snug-text-2xl, 1.5rem);
    }
    .snug-impact__cta {
        padding: var(--snug-space-6, 24px) var(--snug-space-3, 12px);
    }
    .snug-impact__cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}