/* ============================================================
   246 Software — Sayılar bandı

   Masaüstünde tek sırada dört, mobilde 2x2. Ayraç çizgileri her
   öğenin sol kenarlığı; böylece ilk çizgi kapsayıcının sol
   hizasına, diğerleri sütun başlarına kendiliğinden oturuyor.
   ============================================================ */

.stats {
    /* Üst ve alt eşit: bandın iki yanındaki boşluk simetrik olsun */
    padding-block: clamp(3.125rem, calc(var(--vw) * 5.9375), 7.4375rem);
    background-color: var(--c-black);
    color: var(--c-white);
}

/* `width: fit-content` ızgarayı içeriği kadar daraltır, `1fr` sütunları
   en genişine eşitleyerek ayraçları eşit aralıklı tutar, `margin-inline: auto`
   da tümünü ortalar — böylece bant kenarlara yapışmaz. */
.stats__list {
    display: grid;
    grid-template-columns: 1fr auto;
    width: fit-content;
    margin-inline: auto;
    column-gap: clamp(0.5rem, calc(var(--vw) * 1), 1.25rem);
    row-gap: clamp(1.5rem, calc(var(--vw) * 2.2), 2.5rem);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: clamp(0.375rem, calc(var(--vw) * 0.6), 0.75rem);
    padding-inline: clamp(0.75rem, calc(var(--vw) * 1.7), 2.125rem)
                    clamp(0.75rem, calc(var(--vw) * 1.4), 1.75rem);

    /* Sol kenardaki sarı kesik çizgi. `border: dashed` yerine gradyan:
       tarayıcının kesik desenini kendi belirlemesi yerine dash.png'den
       ölçülen 1:2:2 oranını (kalınlık : çizgi : boşluk) birebir veriyor. */
    background-image: repeating-linear-gradient(
        to bottom,
        var(--c-yellow) 0 4px,
        transparent 4px 8px
    );
    background-size: 2px 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

.stat__value {
    /* Tasarım değerinin 0.9 katı */
    font-size: clamp(2.025rem, calc(var(--vw) * 4.644), 4.5rem);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.03em;
    line-height: 1;
}

.stat__label {
    color: var(--c-gray-500);
    font-size: clamp(0.675rem, calc(var(--vw) * 0.7965), 0.95625rem);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}


/* ---------- Masaüstü: tek sırada dört ---------- */
@media (min-width: 768px) {
    /* Son sütun `auto`: içeriği kadar. Hepsi `1fr` olsaydı son sütunun
       içinde boşluk kalır, ızgara kutusu ortalansa bile yazılar görsel
       olarak sola kaymış dururdu. */
    .stats__list {
        grid-template-columns: repeat(3, 1fr) auto;
    }
}