/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Logo Strip (Figma "Section / Logo 1", node 569:28394, stránka
   "Compare - Zenturi vs " 566:14237)

   Úzky pás na bg-medium, medzi Hero Compare a prvým wave-sep. Vľavo krátky
   nadpis (pevný 288px stĺpec, Figma "Container"), vpravo repeater log
   (200×56, object-fit contain, medzera 24 - Figma "Content" gap).

   py = 24 (Figma pt literál 24 / pb div-padding-small 24) - MIMO bežnej
   --zn-pt/pb section-padding škály (small 48/medium 80/large 112), preto
   priamy literál cez zn-block premenné, nie odkaz na --space-* zo section
   scale (24 sa číselne rovná --space-6, použité priamo pre čitateľnosť).
   ══════════════════════════════════════════════════════════════════════════ */

.zn-ls {
  background: var(--color-bg-medium);           /* Scheme A/Background Medium #ecf2f4 */
  padding-inline: var(--space-16);              /* page-padding 64 */
}
.zn-ls.zn-block { --zn-pt: var(--space-6); --zn-pb: var(--space-6); }  /* 24 / 24 */

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

.zn-ls__heading {
  flex: none;
  width: 288px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);                    /* Size/Medium 18 */
  font-weight: var(--weight-medium);            /* Text/Medium/Medium - Sans Medium 550 (dedilo sa 400) */
  line-height: 1.5;
  color: var(--color-text);
  text-align: center;
}

/* ══ Layout variant: centered (Figma "Section / Logo 1" 1175:38564, companion
   sekcia hero-level2 na /stavebnictvo/) - tagline CENTROVANÝ NAD logami
   (stack), nie vedľa nich ako pri 'row'. Desktop-only rozdiel - od 1199.98px
   nižšie oba varianty rovnako zalomia cez zdieľané .zn-ls__container
   flex-wrap pravidlo nižšie, takže mobil/tablet vyzerajú prakticky rovnako. ══ */
.zn-ls--centered.zn-block { --zn-pt: var(--space-4); --zn-pb: var(--space-12); }  /* pt 16 / pb 48, nie zdieľané 24/24 */
.zn-ls--centered .zn-ls__container { flex-direction: column; gap: var(--space-12); }  /* 48 */
/* `.zn-ls__logos` základné `flex: 1 1 0` počíta s VODOROVNÝM hlavným flex-osom
   (row variant - zmršťuje sa do zvyšného priestoru vedľa nadpisu). V column
   kontexte (centered) je hlavná os ZVISLÁ a kontajner nemá vlastnú pevnú
   výšku, takže `flex-basis: 0` bez čoho rásť skolabuje na 0px - logá zmiznú
   bez chyby/warningu (overené: computed height 0, obrázky pritom `complete`
   aj so správnym naturalWidth/Height). Fix: prirodzená výška podľa obsahu. */
.zn-ls--centered .zn-ls__logos { flex: none; width: 100%; }
.zn-ls--centered .zn-ls__heading {
  width: 560px;
  max-width: 100%;
  font-style: italic;
  font-weight: var(--weight-tagline);   /* 420 Mix Regular Italic, nie row-variant Sans Medium 550 */
  font-size: var(--text-base);          /* Size/Medium 16, nie row-variant 18 */
}

/* ══ Marquee ═════════════════════════════════════════════════════════════════
   Figma pás (569:28398) je 1544 široký vo viewporte 960 — presahuje, preto sa
   posúva. Dizajn samotnú animáciu nemodeluje (statický frame), rýchlosť a smer
   sú teda NAŠE rozhodnutie, nie prevzatá hodnota.

   Mechanika: `.zn-ls__track` obsahuje DVE identické skupiny a posúva sa o −50 %,
   čo je pri dvoch rovnakých skupinách presne šírka jednej → slučka bez švíku pri
   ľubovoľnom počte log. Aby to sedelo aj s medzerami, medzeru nesie skupina
   (`gap` + `padding-right`), track má gap 0 — inak by −50 % padlo o pol medzery
   vedľa a na spoji by vznikol skok.

   Rýchlosť je konštantná (px/s) bez ohľadu na počet log: trvanie sa dopočíta
   z počtu (`--zn-ls-count`, dopĺňa PHP) × šírky položky × 1s / rýchlosť. Všetko
   bezrozmerne, až výsledok sa násobí `1s` — delenie dĺžky dĺžkou CSS nedovoľuje.

   Reuse sa neponúkol: `bento-tabs` má scroll-snap karuzel ovládaný používateľom
   (natívny scroll + šípky/bodky) a `zenai-feature` výplň riadenú pozíciou scrollu
   — ani jedno nie je nekonečná samobežná slučka, zdieľal by sa nanajvýš `overflow`.

   Predvolene sa NEHÝBE (duplikát skrytý). Animáciu zapne až JS triedou
   `is-marquee`, a to len keď skupina reálne presahuje viewport — takže pri pár
   logách alebo bez JS ostane pás statický a celý viditeľný. ═══════════════════ */
.zn-ls__logos {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  --zn-ls-item: 224;                            /* logo 200 + medzera 24 */
  --zn-ls-speed: 55;                            /* px/s - naša hodnota, nie z Figmy */
}

.zn-ls__track { display: flex; gap: 0; }
.zn-ls__group {
  display: flex;
  align-items: center;
  gap: var(--space-6);                          /* Figma literál 24 */
  padding-right: var(--space-6);                /* medzera aj na spoji skupín */
  flex: none;
}
/* Bez pretečenia (alebo bez JS) druhá skupina neexistuje a pás sa nehýbe. */
.zn-ls__group--dup { display: none; }

.zn-ls.is-marquee .zn-ls__group--dup { display: flex; }
.zn-ls.is-marquee .zn-ls__track {
  width: max-content;
  animation: zn-ls-scroll linear infinite;
  animation-duration: calc(var(--zn-ls-count, 7) * var(--zn-ls-item) / var(--zn-ls-speed) * 1s);
}
@keyframes zn-ls-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Povinné: bez pohybu ostávajú logá staticky viditeľné. Duplikát sa skryje (nech sa
   neopakujú dvakrát vedľa seba) a skupina sa smie zalomiť do viacerých riadkov —
   inak by pri väčšom počte log časť ostala orezaná za `overflow: hidden`, teda
   neviditeľná, čo by požiadavku „staticky viditeľné" nesplnilo. */
@media (prefers-reduced-motion: reduce) {
  /* Selektory tu ZÁMERNE neobsahujú `.is-marquee`: to by bola kruhová podmienka —
     triedu pridáva JS, keď pás pretečie, ale po zalomení už nepretečie, takže ju
     najbližší resize zase odobral a pás sa roztiahol pod `overflow: hidden`
     (logá sa orezali). JS navyše pri reduced-motion triedu vôbec nenasadzuje. */
  .zn-ls__track { width: auto; transform: none; animation: none; }
  .zn-ls__logos { overflow: visible; }
  .zn-ls__group {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-4);
    flex: 1 1 100%;                             /* prebíja `flex: none`, inak by sa skupina nezalomila */
    min-width: 0;
  }
}

.zn-ls__logo {
  flex: none;
  width: 200px;
  height: 56px;
  overflow: hidden;
}
.zn-ls__logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ══ Tablet (≤1199.98px) - generický medzikrok, Figma preň nemá spec ══ */
@media (max-width: 1199.98px) {
  .zn-ls__container { flex-wrap: wrap; justify-content: center; row-gap: var(--space-4); }
  .zn-ls__heading { width: 100%; text-align: center; }
  .zn-ls__logos { flex: 1 1 100%; }
  .zn-ls__group { justify-content: center; }
}

/* ══ Mobil (≤767.98px) - Figma /zakaznici/ mobil 1201:100144, get_variable_defs
   2026-08-14: page-padding 16, section-small 32 (nie JSX literál 48 - fallback
   v exporte je stale, var() resolvol na 32, overené aj naživo). Figma frame
   ukazuje logá v JEDNOM riadku bez zalomenia (160×56, gap 16) presahujúcom
   šírku mobilu - to je len statický Relume placeholder, marquee scroll (naša
   existujúca mechanika) je legitímne riešenie tej istej situácie - veľkosť aj
   medzera loga ale ostávajú Figma hodnoty (160×56 / 16), nezmenšujeme ich. ══ */
@media (max-width: 767.98px) {
  .zn-ls { padding-inline: var(--space-4); }    /* 16 */
  .zn-ls__logo { width: 160px; height: 56px; }
  .zn-ls__group { gap: var(--space-4); padding-right: var(--space-4); }  /* Figma mobil gap 16 (z 24) */
  .zn-ls__logos { --zn-ls-item: 176; }   /* 160 + 16 */

  /* get_metadata 1201:100144: vnútorný riadok log má vlastný pt-16 nad logami
     (I1201:100144;9:850 „Content", logo instances y=16 v rámci riadku), ktorý v
     tomto móde platí BEZ OHĽADU na skrytý heading (Container 9:847 hidden=true
     nekolabuje tento padding-top) - top gap sekcia+riadok je teda 32+16=48,
     bottom ostáva 32. Replikované LEN pre inštancie bez nadpisu (zn-ls--no-heading),
     nie ako plošné pravidlo - viď interné poznámky „skryté vrstvy" precedens. */
  .zn-ls--no-heading .zn-ls__logos { padding-top: 16px; }
}