/* ============================================================
   Sectiunea "iStoma in cifre" (banda cu fundal gradient inchis).
   Design preluat 1:1 din Figma (frame 8026:4906).
   ============================================================ */

.stats {
    border-radius: var(--radius-lg);
    background-image: linear-gradient(159.68deg, #0F172A 0%, #1E293B 70.71%);
    padding: var(--space-section) 100px;
}

.stats__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    padding-inline: var(--space-lg);
}

/* ─── Heading (variantele alb/gri pentru fundal inchis) ──────── */
.stats__heading {
    text-align: center;
}

.stats__title {
    font-size: var(--font-size-h1);
    color: #fff;
    letter-spacing: -0.5px;
    margin-bottom: var(--space-sm);
}

.stats__subtitle {
    font-size: var(--font-size-lg);
    color: #D1D5DB;
    max-width: none;
    margin-inline: auto;
    white-space: nowrap;
}

/* ─── Grid statistici ────────────────────────────────────────── */
.stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
}

.stat__value {
    font-size: 3.5rem; /* 56px */
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: #fff;
    letter-spacing: -0.5px;
}

.stat__label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: #D1D5DB;
}

.stat__caption {
    font-size: var(--font-size-base);
    color: #9CA3AF;
}

/* Rand de tari separate prin puncte (ex. RO · MD · ES · IT · IE). */
.stat__countries {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: #9CA3AF;
}

.stat__country {
    font-size: var(--font-size-base);
}

.stat__country + .stat__country::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #9CA3AF;
    margin-right: var(--space-xs);
    vertical-align: middle;
}

/* ─── Banda marquee (cifre care se deruleaza singure) ─────────────────
   Implicit ascunsa; se afiseaza doar pe mobil (vezi media query). */
.stats__marquee {
    display: none;
    overflow: hidden;
    width: 100%;
    /* Fade subtil pe margini ca cifrele sa "intre/iasa" lin, nu brusc. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.stats__track {
    display: flex;
    width: max-content;
    /* Derulare continua spre stanga. Continutul e dublat in HTML, deci -50% = un ciclu complet. */
    animation: stats-scroll 22s linear infinite;
}

    /* Fiecare cifra din banda primeste o latime confortabila + separare. */
    .stats__track .stat {
        flex: 0 0 auto;
        min-width: 42vw;
        padding-inline: var(--space-md);
    }

@keyframes stats-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Respectam preferinta de reducere a miscarii (accesibilitate): oprim derularea. */
@media (prefers-reduced-motion: reduce) {
    .stats__track {
        animation: none;
    }
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 992px) {
    .stats {
        padding: var(--space-xl) var(--space-xl);
    }

    /* Pe ecrane mici subtitlul revine la mai multe randuri ca sa nu iasa din ecran. */
    .stats__subtitle {
        white-space: normal;
        max-width: 860px;
    }

    .stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xl) var(--space-lg);
    }
}

@media (max-width: 600px) {
    .stats {
        padding: var(--space-xl) 0;
    }

    /* Pe mobil ascundem grila (cifrele una sub alta) si aratam banda care se deruleaza. */
    .stats__grid {
        display: none;
    }

    .stats__marquee {
        display: block;
    }

    /* Padding lateral doar pe heading (banda merge edge-to-edge ca sa curga lin). */
    .stats__inner {
        padding-inline: 0;
        gap: var(--space-xl);
    }

    .stats__heading {
        padding-inline: var(--space-md);
    }
}