/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Section / Stats 1 (Figma desktop 813:25580, mobil 1201:100145,
   /zakaznici/, sekcia 6)

   Tri karty vedľa seba, `align-items: flex-end` (spodky zarovnané) - schod
   dávajú ROZDIELNE VÝŠKY kariet (1: 480/400, 2: 380/330, 3: auto), nie
   padding-top ako `cards-descending` (opačný mechanizmus, viď template.php).

   Karta 3 NEMÁ vo Figme fixnú výšku (overené `get_metadata`, nie odhad) -
   namiesto `justify-content: space-between` má priamy `gap` medzi nadpisom
   a obsahom (48 desktop / 16 mobil) a výška jej rastie s obsahom.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-stats {
  background: var(--color-bg);                 /* biela */
  padding-inline: var(--space-16);              /* page-padding 64 */
}
.zn-stats.zn-block {
  --zn-pt: var(--space-12);                     /* section-small 48 */
  --zn-pb: var(--space-20);                     /* section-medium 80 */
}

.zn-stats__container {
  max-width: var(--container-max);              /* 1280 */
  margin-inline: auto;
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);                          /* 32 (div-padding-medium) */
  width: 100%;
}

.zn-stats__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-8);                      /* 32 */
  border-radius: var(--radius-md);              /* 12 */
}
.zn-stats__card--1 {
  background: var(--color-primary);             /* #ffb703 */
  color: var(--color-text);
  height: 480px;
  justify-content: space-between;
}
.zn-stats__card--2 {
  background: var(--color-secondary);           /* #219ebc */
  color: var(--color-white);
  height: 380px;
  justify-content: space-between;
}
.zn-stats__card--3 {
  background: var(--color-bg-medium);           /* #ecf2f4 */
  color: var(--color-text);
  gap: 48px;                                    /* Figma: priamy gap, nie space-between (auto výška) */
}

/* Nadpis + italic časť TEČÚ v jednej vete, žiadny vynútený zlom - karta 1 sa
   prirodzene zalomí na 2 riadky (dlhší text), karty 2-3 ostanú na 1 (overené
   na metadátach: text height karty 1 = 88 = 2 riadky, kariet 2-3 = 44 = 1). */
.zn-stats__title {
  margin: 0;
  width: 100%;                                  /* inak shrink-to-fit na max-content */
  font-family: var(--font-display);
  font-size: var(--text-5xl);                   /* Size/H3 40 */
  font-weight: var(--weight-regular);
  line-height: 1.1;
  /* `style.css` má globálne `p { color: var(--color-text-muted) }` (base
     reset) - to je EXPLICITNÁ deklarácia na elemente, takže bez tohto
     riadku vyhráva nad farbou zdedenou z `.zn-stats__card--N`, aj keby mala
     tá vyššiu špecificitu (dedenie je vždy najslabšie v poradí cascade).
     Nález pri prvom rendri: percento vyšlo sivé (#75878f) namiesto navy/bielej. */
  color: inherit;
}
.zn-stats__title-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);           /* Mix Regular Italic 420 */
  /* farba sa NEPREDÁVA - akcent nie je vo Figme farebne odlíšený ani v
     jednej z troch kariet (rovnaká farba ako nadpis, len iný rez) */
}

.zn-stats__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.zn-stats__percent {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-tagline);
  font-size: var(--text-display);               /* Size/Display 2 - 80 (fluidne od 48, na 1440 vychádza 80) */
  line-height: 1;
  /* Predloha (uzol 813:25596 „67%", štýl Heading/Display 2-A, Size/Display 2 = 80)
     hlási `letterSpacing: -1`. Je to PERCENTO, nie pixely - export z toho vypočíta
     `tracking-[-0.8px]`, teda -0,8 / 80 = -1 %. Pevných -0.8px preto sedelo LEN
     pri 1440. Veľkosť tu nemení len clamp `--text-display` - blok si ju na mobile
     PREPISUJE natvrdo (`font-size: 68px` nižšie v @media), takže pri 393 vychádzalo
     -1,18 % (namerané, nie odvodené z clampu). `em` sa prispôsobí aj takému
     prepisu, px hodnota nikdy.

     🔴 ZÁPORNÉ JE SPRÁVNE a líši sa od `.zn-pc__emp-count` v `pricing-calculator`
     ZÁMERNE - ten má pri tom istom Size/Display 2 `tracking-[0.8px]`, teda +1 %
     (uzol 401:11332). Dôvod: tento prvok dedí štýl z dizajn systému, kým číslo
     v kalkulačke má v predlohe LOKÁLNY override na kladnú hodnotu.
     NEZJEDNOCOVAŤ ich - nie je to nekonzistencia, sú to dva rôzne zdroje. */
  letter-spacing: -0.01em;
  text-align: right;
  color: inherit;                               /* viď poznámka pri .zn-stats__title */
}
/* Karta 3 je jediná, kde má percento INÚ farbu než nadpis/popis (teal, nie navy) */
.zn-stats__card--3 .zn-stats__percent { color: var(--color-secondary); }

.zn-stats__divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);              /* rgba(3,3,3,.15) - Figma Scheme A/Border, presná zhoda tokenu */
}

.zn-stats__desc {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);            /* Sans Medium 550 */
  font-size: var(--text-xl);                    /* Size/Large 20 */
  line-height: 1.5;
  text-align: right;
  color: inherit;                               /* viď poznámka pri .zn-stats__title */
}

/* ── Mobil (≤767.98px) - Figma 1201:100145, get_variable_defs overené
   (Auto(Desktop) pasca: H3 32/Display-2 68/Large 18/gap 20 sa NEZHODUJÚ
   s fallbackmi vo vygenerovanom JSX) ─────────────────────────────────── */
@media (max-width: 767.98px) {
  .zn-stats { padding-inline: var(--space-4); } /* 16 */
  /* Literál, NIE var(--space-12): ten je fluid clamp(2.5rem,3.4vw,3rem) a
     pri 393px sa vyhodnotí na svoje minimum 40px, nie na 48 - rovnaká
     pasca ako pri hero-level3 (viď CONTEXT.md, 2026-08-14). --space-8 je
     fixná 2rem, tá je bezpečná. */
  .zn-stats.zn-block { --zn-pt-m: var(--space-8); --zn-pb-m: 48px; }  /* 32 / 48 */

  .zn-stats__container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);                        /* 20 (div-padding-medium mobil) */
  }
  /* `flex: 1 1 0` z desktopového pravidla (mimo media query) v STĹPCOVOM
     layoute znamená flex-basis:0 na HLAVNEJ osi = výške - to prebíja
     explicitnú `height` nižšie (karty by sa namiesto pevnej výšky flexibilne
     delili o priestor). Musí sa resetnúť, inak namerané výšky vyjdú úplne
     iné čísla než 400/330/auto (nález pri meraní: 262/227/243). */
  .zn-stats__card { flex: none; }
  .zn-stats__card--1 { height: 400px; }
  .zn-stats__card--2 { height: 330px; }
  .zn-stats__card--3 { gap: 16px; }

  /* Literály - --text-5xl/--text-display sú fluid clampy, ktoré pri 393px
     nevychádzajú na Figma mobilné hodnoty (30,29 / 49,3 namiesto 32 / 68). */
  .zn-stats__title { font-size: 32px; }
  .zn-stats__percent { font-size: 68px; }
  /* --text-lg (18) aj --text-xl (20) sú FIXNÉ (nie clampy), takže popis
     dostáva správnu mobilnú hodnotu priamo cez token, bez literálu. */
  .zn-stats__desc { font-size: var(--text-lg); }
}