/* ============================================================
   MICHLOR — Stats / Counters Section CSS
   Klasy: .mstat (michlor-stats)
   ============================================================ */

.mstat {
    position:         relative;
    background:       linear-gradient(
                          180deg,
                          var(--color-bg)      0%,
                          var(--color-bg-deep) 50%,
                          var(--color-bg)      100%
                      );
    padding:          var(--space-lg) 0;
    overflow:         clip; /* clip zamiast hidden — lepsze clippowanie animacji na iOS Safari */
}

/* Gradient kreska górna i dolna */
.mstat__rule {
    height:     1px;
    background: linear-gradient(
        90deg,
        transparent  0%,
        rgba(0,180,166,.35) 20%,
        rgba(14,165,233,.25) 50%,
        rgba(0,180,166,.35) 80%,
        transparent  100%
    );
    margin: 0;
}

/* Dekoracyjny orb centralny */
.mstat::before {
    content:       '';
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    width:         700px;
    height:        400px;
    border-radius: 50%;
    background:    radial-gradient(
                       ellipse at center,
                       rgba(0, 180, 166, 0.07) 0%,
                       transparent 65%
                   );
    filter:        blur(60px);
    pointer-events: none;
}

.mstat__inner {
    max-width: 1280px;
    margin:    0 auto;
    padding:   clamp(3rem, 5vw, 5rem) clamp(1.5rem, 4vw, 3rem);
}

/* ── Nagłówek ────────────────────────────────────────────── */
.mstat__head {
    text-align:    center;
    margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.mstat__overline {
    display:        inline-block;
    font-family:    var(--font-body);
    font-size:      0.72rem;
    font-weight:    500;
    letter-spacing: var(--letter-overline);
    text-transform: uppercase;
    color:          var(--color-accent);
    margin-bottom:  1rem;
    padding:        0.35rem 0.875rem;
    border:         1px solid var(--glass-border);
    border-radius:  var(--radius-pill);
    background:     var(--glass-bg);
}

.mstat__title {
    font-family:    var(--font-heading);
    font-size:      clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight:    800;
    letter-spacing: var(--letter-heading);
    color:          var(--color-text);
    line-height:    1.15;
    margin:         0;
}

.mstat__title-em {
    font-style:              italic;
    background:              linear-gradient(135deg, var(--color-accent) 0%, #0EA5E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

/* ── Grid 3+3 ────────────────────────────────────────────── */
.mstat__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1px;
    background:            rgba(255, 255, 255, 0.05);
    border:                1px solid rgba(255, 255, 255, 0.05);
    border-radius:         var(--radius-lg);
    overflow:              hidden;
}

/* ── Pojedynczy licznik ──────────────────────────────────── */
.mstat__item {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    text-align:      center;
    padding:         2.5rem 1.5rem;
    background:      var(--color-bg-deep);
    transition:      background-color var(--transition-base);
    overflow:        hidden;
}

.mstat__item::before {
    content:       '';
    position:      absolute;
    inset:         0;
    background:    radial-gradient(
                       ellipse at 50% 0%,
                       rgba(0, 180, 166, 0.08) 0%,
                       transparent 60%
                   );
    opacity:       0;
    transition:    opacity var(--transition-base);
}

.mstat__item:hover {
    background: rgba(10, 37, 64, 0.8);
}

.mstat__item:hover::before {
    opacity: 1;
}

/* Ikona */
.mstat__item-icon {
    width:         36px;
    height:        36px;
    color:         var(--color-accent);
    margin-bottom: 1.25rem;
    opacity:       0.7;
    transition:    opacity var(--transition-base),
                   transform var(--transition-base);
}

.mstat__item:hover .mstat__item-icon {
    opacity:   1;
    transform: scale(1.1);
}

.mstat__item-icon svg {
    width:  100%;
    height: 100%;
}

/* Wartość licznika */
.mstat__item-value-wrap {
    display:     flex;
    align-items: baseline;
    gap:         0.1em;
    margin-bottom: 0.5rem;
    position:    relative;
    z-index:     1;
}

.mstat__item-prefix {
    font-family:    var(--font-heading);
    font-size:      clamp(1rem, 2vw, 1.5rem);
    font-weight:    800;
    color:          var(--color-text);
    letter-spacing: var(--letter-heading);
    opacity:        0.7;
}

.mstat__item-value {
    font-family:    var(--font-heading);
    font-size:      clamp(2.5rem, 4.5vw, 3.75rem);
    font-weight:    800;
    letter-spacing: var(--letter-heading);
    line-height:    1;
    background:     linear-gradient(
                        135deg,
                        var(--color-text)  0%,
                        var(--color-accent) 100%
                    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
    transition:     filter var(--transition-base);
}

.mstat__item:hover .mstat__item-value {
    filter: brightness(1.15);
}

/* Etykieta */
.mstat__item-label {
    font-family:    var(--font-heading);
    font-size:      0.9375rem;
    font-weight:    700;
    color:          var(--color-text);
    margin:         0 0 0.25rem;
    letter-spacing: var(--letter-heading);
    position:       relative;
    z-index:        1;
}

.mstat__item-sub {
    font-size:  0.75rem;
    color:      var(--color-muted);
    margin:     0;
    letter-spacing: 0.02em;
    position:   relative;
    z-index:    1;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .mstat__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .mstat__item {
        padding: 2rem 1.25rem;
        flex-direction: row;
        text-align:     left;
        gap:            1.25rem;
        align-items:    center;
    }

    .mstat__item-icon {
        flex-shrink:   0;
        margin-bottom: 0;
    }

    .mstat__item-value-wrap {
        margin-bottom: 0.2rem;
    }

    .mstat__item-value {
        font-size: 2rem;
    }
}