/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Status List (riadok stavov služieb, stránka Status)

   Figma "Section / Longform / Left" (762:21529). bg-medium pás, kontajner
   max 1024, N× (ikona 40px + label 18px) justify-between. Repeater (admin
   môže pridať/upraviť službu).

   Ikona: vlastný inline SVG (nie ico-check-ring.svg z knižnice - tá má farby
   zapečené natvrdo #7E869E/#219EBC bez var(--zn-ico-main), nedala by sa
   prefarbiť na zelenú/oranžovú/červenú podľa stavu). Farby stavov: ok =
   success-dark (zelená), degraded = primary-dark (oranžová, NIE primary/
   žltá - lepší kontrast na svetlom bg-medium), down = error (červená).
   Figma návrh ukazuje len stav "ok" pre všetky 4 položky - degraded/down
   farby aj glyphy sú môj doplnok z existujúcich theme tokenov, NEOVERENÉ
   vo Figme.

   MOBIL: Figma "Section / Longform / Left" (1201:109213) - potvrdené cez
   get_design_context + get_variable_defs NA mobil node: kontajner sa mení z
   desktop justify-between (riadok) na FLEX-COL (vertikálny stack), gap 16
   (nie wrap s medzerami ako pôvodný generický odhad). page-padding/section-
   -padding tokeny na tomto mobil frame majú INÉ resolved hodnoty než ich
   inline fallback v exporte (fallback = desktop hodnota, "Variable módy"
   past z CLAUDE.md) - rozhoduje get_variable_defs, nie fallback text.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-sl {
  background: var(--color-bg-medium);         /* Scheme A/Background Medium */
  padding-inline: var(--space-16);            /* Page Padding/padding-global 64 */
}
.zn-sl.zn-block {
  --zn-pt: var(--space-12);                   /* Section Padding/section-small 48 */
  --zn-pb: var(--space-24);                   /* Section Padding/padding-section-large 112 */
}

.zn-sl__container {
  max-width: 1024px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.zn-sl__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);                        /* Figma gap 8 */
}

.zn-sl__icon { flex-shrink: 0; }
.zn-sl__item--ok       .zn-sl__icon { color: var(--color-success-dark); }
.zn-sl__item--degraded .zn-sl__icon { color: var(--color-primary-dark); }
.zn-sl__item--down     .zn-sl__icon { color: var(--color-error); }

.zn-sl__label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);                  /* Size/Medium 18 */
  line-height: 1.5;
  color: var(--color-black);
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  /* BUG NÁJDENÝ 2026-07-24 (Maroš: "medzera za DNS server"): components.css
     .zn-block PRI ≤767px automaticky prepolovuje --zn-pt/--zn-pb (pokiaľ nie
     je -m variant explicitne zadaný) - treba --zn-pt-m/--zn-pb-m, nie holé
     --zn-pt/--zn-pb (inak sa Figma-overená mobilná hodnota prepolví ešte raz).
     Navyše --space-16 je FLUID clamp(2.5rem,4.45vw,4rem) - na 393px vw zložka
     nedosiahne ani spodnú hranicu 40px (natívne by vyšlo 40, nie Figmou
     potvrdených 64) - Figma dala PEVNÉ 64 (get_variable_defs na mobil node),
     nie škálovanú hodnotu, preto tu pevný `4rem` namiesto tokenu. */
  .zn-sl { padding-inline: var(--space-4); }                    /* Page Padding/padding-global 16 - potvrdené (fallback bol 64, trap) */
  .zn-sl.zn-block { --zn-pt-m: var(--space-8); --zn-pb-m: 4rem; }  /* section-small 32 potvrdené, section-large mobil 64 (NIE 48 ako pôvodný odhad - fallback 112, trap) */
  .zn-sl__container {
    flex-direction: column;         /* Figma mobil: skutočný vertikálny stack, nie wrap riadok */
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-4);            /* flat 16px medzi položkami (Figma Container gap, hardcoded) */
  }
  .zn-sl__label {
    font-size: var(--text-base);    /* Size/Medium mobil resolved 16 (desktop fallback 18 - trap) */
    white-space: normal;
  }
}