/* ==========================================================================
   Stats Banner — Enhanced Animated Section
   Swarnim Bharat Manch | Version 2.1
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;700;800&display=swap');

/* ── Section Wrapper ── */
.stats-section {
    background: linear-gradient(
        110deg,
        var(--sbm-stat-c1, #1a47b3) var(--sbm-stat-s1, 0%),
        var(--sbm-stat-c2, #8b3fa8) var(--sbm-stat-s2, 50%),
        var(--sbm-stat-c3, #ff6b35) var(--sbm-stat-s3, 100%)
    );
    padding: var(--sbm-stat-padv, 60px) var(--sbm-stat-padh, 30px);
    position: relative;
    overflow: hidden;
}

/* ── Atmospheric overlay ── */
.stats-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 50%, rgba(255,255,255,0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 50%, rgba(0,0,0,0.10) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

/* ── Pattern overlay (controlled via JS/customizer) ── */
.stats-pattern-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.stats-section .container {
    position: relative;
    z-index: 1;
}

/* ── Stats Grid ── */
.stats-inner-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sbm-stat-gap, 0px);
    justify-content: var(--sbm-stat-align, flex-start);
}

/* ── Individual Stat Item ── */
.stat-item {
    text-align: var(--sbm-stat-textalign, left);
    padding: 0 3rem 0.5rem 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.stat-item.sbm-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays */
.stat-item:nth-child(1) { transition-delay: 0.05s; }
.stat-item:nth-child(2) { transition-delay: 0.15s; }
.stat-item:nth-child(3) { transition-delay: 0.25s; }
.stat-item:nth-child(4) { transition-delay: 0.35s; }

/* ── Number ── */
.stat-number {
    font-family: var(--sbm-stat-font, 'Raleway', sans-serif);
    font-weight: var(--sbm-stat-weight, 800);
    font-size: var(--sbm-stat-numsize, 3rem);
    color: var(--sbm-stat-numcolor, #ffffff);
    line-height: 1;
    margin-bottom: 0.45rem;
    letter-spacing: var(--sbm-stat-ls, -0.5px);
    transition: color 0.3s;
}

/* ── Label ── */
.stat-label {
    font-size: var(--sbm-stat-lblsize, 1.05rem);
    color: var(--sbm-stat-lblcolor, rgba(255,255,255,0.85));
    line-height: 1.4;
    opacity: 0.9;
}

/* ── Optional vertical divider ── */
.stat-divider {
    width: 1px;
    background: rgba(255,255,255,0.22);
    align-self: stretch;
    margin: 0 0.5rem;
    display: none;
}

.stats-show-dividers .stat-divider {
    display: block;
}

/* ── CTA Button ── */
.stats-cta-wrap {
    margin-top: 2.2rem;
    text-align: var(--sbm-stat-ctapos, left);
}

.stats-cta-btn {
    display: inline-block;
    font-family: var(--sbm-stat-font, 'Raleway', sans-serif);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sbm-stat-ctacolor, #1a47b3);
    background: var(--sbm-stat-ctabg, #ffffff);
    padding: 0.7rem 2rem;
    border-radius: var(--sbm-stat-ctabr, 3px);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}

.stats-cta-btn:hover {
    background: var(--primary-color, #1a47b3);
    color: #ffffff;
    transform: translateY(-2px);
    text-decoration: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {
    .stats-inner-row {
        gap: 0;
    }
    .stat-item {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 2rem;
    }
    .stat-number {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .stats-section {
        padding: 40px 20px;
    }
    .stat-item {
        flex: 0 0 50%;
        max-width: 50%;
        padding-right: 1rem;
        margin-bottom: 1.5rem;
    }
    .stat-number {
        font-size: 2rem;
    }
    .stat-label {
        font-size: 0.875rem;
    }
}

@media (max-width: 360px) {
    .stat-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .stat-number {
        font-size: 1.75rem;
    }
}