/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Hero Status (úvodná sekcia stránky "Status")

   Figma "Hero-Level_2" (1201:109589, stránka Status 708:30653) — POZOR 2×
   "Hero-Level_2": Figma interný názov je identický s existujúcim
   zenturi/hero-level2, ale iná kombinácia (bez tagline/rating/info/play
   video, CTA nahradené farebným stavovým badge-om) → samostatný blok
   `hero-status` (prefix hst_), nerozširovať hero-level2 (CLAUDE.md reuse-
   -bez-rizika mandát, rovnaký dôvod ako hero-compare vs hero-level3).

   Zdieľané 1:1 s hero-level2: biela karta (rounded top 40), obrázkový panel
   s gradient fade do bielej, vlnitý spodný okraj karty (wave.svg technika +
   asset skopírovaný z hero-level2, nie nový export — identický vizuál).

   POZOR farby: nadpis AJ akcent "Status" = TEN ISTÝ `--color-text` (#023047),
   akcent len italic (Figma tu nedáva akcentu vlastnú farbu, na rozdiel od
   ostatných hero blokov — over pred zmenou).

   Stavový badge farby (online/degraded/outage): Figma navrhla LEN "online"
   (zelená/success). Degraded (primary-dark/oranžová) a outage (error/
   červená) sú môj doplnok z existujúcich theme tokenov pre reálne admin-
   -ovládanie stavu — NEOVERENÉ vo Figme, len green/amber/red konvencia
   bežná pre status stránky.

   MOBIL/TABLET: Figma frame nenájdený v zadaných linkoch — len desktop +
   generický medzikrok (rovnaká konvencia ako hero-level2).
   ══════════════════════════════════════════════════════════════════════════ */

.zn-hst {
  position: relative;
  background: var(--color-bg-medium);        /* Scheme A/Background Medium */
  --zn-pt: var(--space-6);                    /* Div Padding/div-padding-small 24 */
  --zn-pb: var(--space-6);
  padding-inline: var(--space-16);            /* Page Padding/padding-global 64 */
}
.zn-hst.zn-block { --zn-pt: var(--space-6); --zn-pb: var(--space-6); }

.zn-hst__container {
  max-width: var(--container-max);
  margin-inline: auto;
  position: relative;
}

.zn-hst__card {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-12);                       /* Div Padding/div-padding-large 48 */
  background: var(--color-white);
  padding: var(--space-12) 0 var(--space-6) var(--space-12);  /* pt48/pr0/pb24/pl48 - POZOR, INÁ pb než hero-level2 (32) */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;       /* Radius/XLarge 40 */
  overflow: hidden;
}

/* ── Textový stĺpec ──────────────────────────────────────────────────────── */
.zn-hst__column {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;                                  /* Figma Column gap 40 */
  padding-block: var(--space-12);             /* Figma Column py 48 (section-small) */
}

.zn-hst__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-7xl);                 /* Size/H1 56 */
  line-height: 1.1;
  color: var(--color-text);                   /* #023047 - viď hlavička (NIE literálna čierna) */
}
.zn-hst__heading-accent {
  display: inline;
  font-style: italic;
  font-weight: var(--weight-tagline);
  /* Zámerne ŽIADNA farba - akcent zdedí navy z .zn-hst__heading (viď hlavička). */
}

.zn-hst__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);                  /* Size/Medium 18 */
  line-height: 1.5;
  color: var(--color-text);
}

/* ── Stavový badge (nahrádza CTA button) ─────────────────────────────────── */
.zn-hst__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);                        /* Figma gap 8 */
  height: 60px;
  padding: 10px var(--space-4);
  border: 1px solid;
  border-radius: var(--radius-button);        /* Radius/buttons 12 */
}
.zn-hst--online   .zn-hst__badge { background: var(--color-success-dark); border-color: var(--color-success); }
.zn-hst--degraded .zn-hst__badge { background: var(--color-primary-dark); border-color: var(--color-primary); }
/* outage: success/degraded párujú tmavý fill so svetlejším tokenom rovnakej farby
   (success-dark+success, primary-dark+primary) - error nemá tento "svetlejší súrodenec"
   (error-light je príliš bledý, splynul by s fillom = neviditeľný rám, nález DDEV).
   Fix: poloprieHľadný biely rám namiesto ďalšieho error tokenu (nepridáva nový hex,
   funguje na akomkoľvek tmavšom fille). */
.zn-hst--outage   .zn-hst__badge { background: var(--color-error); border-color: rgba(255, 255, 255, .5); }

.zn-hst__badge-icon { flex-shrink: 0; color: var(--color-white); }
.zn-hst__badge-label {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);                  /* Button Font Size 18 (desktop) */
  line-height: 1.5;
  color: var(--color-white);
  white-space: nowrap;
}

/* ── Obrázkový panel ──────────────────────────────────────────────────────── */
.zn-hst__visual {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;                        /* viď BUG NÁJDENÝ nižšie - nahrádza pevnú height */
  width: 660px;
  border-radius: var(--radius-base) 0 0 0;    /* Radius/Base 16, len top-left */
  overflow: hidden;
  /* SKÚŠANÉ A ZAMIETNUTÉ (Maroš 2026-07-24 → DDEV overenie): pridaný
     box-shadow (--shadow-md) na základe live screenshotu ("chýba spodný
     tieň"), ale DDEV to overil priamo proti Figma node 1201:109589 (screenshot
     + zoom na spodnú/pravú hranu) - Figma TU ŽIADNY box-shadow nemá, obrázok
     len jemne prechádza do bielej karty cez gradient nižšie. --shadow-md
     pridával viditeľný teal-tónovaný tieň hlavne na pravej hrane, ktorý vo
     Figme nie je. VRÁTENÉ SPÄŤ na Figma-presný stav (bez shadow) - NEpridávať
     znova bez explicitného Figma effect exportu od Jána. */
  /* BUG NÁJDENÝ (Cowork/Figma MCP, 2026-07-24, po nahlásení "stále ostrá čiara"
     aj po object-fit:contain fixe vyššie): `height: 470px` bola nesprávna -
     skopírovaná z hero-level2 bez prepočtu. get_design_context PRIAMO na
     1201:109589 (nie na master komponent, ten cez MCP nejde drillnúť - viď
     CLAUDE.md) ukazuje, že obrázkový panel v Figme NEMÁ pevnú výšku - je to
     `self-stretch` flex child v riadku vedľa .zn-hst__column, teda jeho výška
     = prirodzená výška textového stĺpca (pt48 + heading + gap40 + text + gap40
     + badge60 + pb48 = 352px pre TENTO obsah, nie 470 ako pri hero-level2,
     ktorý má navyše tagline/rating/info-row). Pri 470px bol box o 118px vyšší,
     než mal byť → `object-fit: contain` nechal dole prázdny pruh (letterbox),
     kde farebný fade z gradientu ešte nestihol dobehnúť do bielej → presne tá
     "ostrá čiara" tesne pod rukou/notebookom, ktorú predošlé meranie
     (skok jasu na SPODNEJ HRANE BOXU) nezachytilo, lebo hrana bola posunutá
     dnu do boxu, nie na jeho okraj. Fix: `align-self: stretch` namiesto pevnej
     hodnoty - box teraz vždy presne kopíruje výšku stĺpca, rovnako ako vo
     Figme, bez ohľadu na dĺžku textu/labelu v administrácii. */
}
/* `contain`, NIE `cover` - Figma (get_design_context na node 1201:109589) má na tejto
   obrázkovej vrstve `object-contain`. Pri správnej výške panela (660×352, viď fix
   pri .zn-hst__visual) je fotka pri `contain` škálovaná na 528×352 a vycentrovaná;
   spodná hrana fotky nedosiahne hranu panela, takže sama o sebe nerobí tvrdý zlom.
   Skutočnú "čiaru" spôsobovala kombinácia zlej výšky boxu + zlého fade-u, nie
   object-fit (viď PRÍČINY A/B nižšie). Mobil mal `contain` správne už predtým. */
/* FADE - dve nezávislé príčiny "ostrej čiary", obe opravené v tomto kole
   (Cowork, 2026-07-24; overené objektívnym meraním pixelov headless-Chrome +
   Pillow proti Figma renderu node 1201:109589, nie okom - vizuálna kontrola
   zlyhala 2× predtým):

   PRÍČINA A (mechanizmus): pôvodne samostatný `::after` s polopriehľadným
   BIELYM gradientom NAD fotkou. Zdrojová fotka (cover.png) NIE JE čisto biela -
   jej pozadie má nameraných ~247/255 (nie 255). Overlay fadoval do #ffffff nad
   fotkou, ktorej pozadie je 247, takže na okraji reálnych pixelov vznikal jemný,
   ale postrehnuteľný rozdiel odtieňa. FIX: fade presunutý priamo NA fotku cez
   `mask-image` - fotka sama SPRIEHĽADNIE a presvitá pod ňou čistá biela karta
   (žiadne "maľovanie na bielo" nad ne-bielym pozadím). `::after` odstránený.

   PRÍČINA B (uhol - hlavný dôvod, prečo čiara prežila aj zmenu mechanizmu):
   uhol 128.2088deg prebraný z `get_design_context` bol NESPRÁVNY. Figma zapisuje
   gradient handle-pozíciami v normalizovanom priestore boxu; pri ne-štvorcovom
   paneli (660×352, pomer 1.875) MCP konverzia na CSS `deg` uhol skreslila - ako
   render Figmy (= to, čo vidí klient) tak aj bratské bloky to potvrdzujú:
   hero-level2 175.36deg, hero-compare 173.40deg, mobil tohto bloku 175.44deg -
   ten istý fade je všade ~173-176deg, len desktop hero-status dostal 128deg.
   Dôkaz: dopredná simulácia fade-u proti Figma renderu (fixné stopy 34.79/90.718)
   dala RMSE 17.6 pre 128.21deg vs 0.9 pre 176.5deg; priemerná viditeľnosť fotky
   v spodnom páse padla z 0.61 (128deg = fotka tam ešte z 61% svieti = čiara) na
   0.02 (176.5deg, Figma render 0.04). Preto desktop uhol = 176.5deg; stopy
   (34.79%/90.718%) aj mobil (175.44deg) ostávajú - tie boli namerané ako správne. */
.zn-hst__visual-img {
  /* `position: absolute` NIE JE kozmetika - je to to, čo vôbec umožní, aby
     `align-self: stretch` vyššie fungoval. Kým bol <img> normálny in-flow
     potomok, `height: 100%` sa počítalo voči auto-výške rodiča → rezolvovalo
     sa na `auto` → do výšky panela vstúpila VLASTNÁ intrinsická výška fotky
     (660 / 1.5 = 440px). Panel sa tým stal NAJVYŠŠÍM flex prvkom karty a sám
     si diktoval 440px namiesto toho, aby sa natiahol na 352px stĺpca (zmerané
     v DDEV: .zn-hst__visual 660×440, .zn-hst__column 351.59 → karta 512 miesto
     Figma 424). Figma to má presne takto: v get_design_context je <img>
     `absolute inset-0 size-full object-contain` vnútri `self-stretch` obalu,
     takže do layoutu neprispieva ničím a výšku určuje výhradne stĺpec. */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  -webkit-mask-image: linear-gradient(176.5deg, rgba(0, 0, 0, 1) 34.79%, rgba(0, 0, 0, 0) 90.718%);
          mask-image: linear-gradient(176.5deg, rgba(0, 0, 0, 1) 34.79%, rgba(0, 0, 0, 0) 90.718%);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* ── Vlnitý spodný okraj karty (2× Vector, mierne prekryté - rovnaká technika
   a % presah ako hero-level2, viď jeho style.css komentár pre geometriu) ── */
.zn-hst__wave {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  margin-top: -1px;
}
.zn-hst__wave-piece {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 34;
}
.zn-hst__wave-piece:first-child { margin-right: -3.415%; }

/* ══ Tablet (≤1199.98px) - generický medzikrok, rovnaká konvencia ako
   hero-level2 (stack stĺpcov, vizuál responzívny namiesto pevnej výšky) ══ */
@media (max-width: 1199.98px) {
  .zn-hst__card {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-8);
    gap: var(--space-8);
  }
  .zn-hst__visual {
    width: 100%;
    height: auto;
    aspect-ratio: 660 / 352;                  /* opravené súbežne s desktop 470→352 fixom (nižšie) */
    align-self: auto;                         /* zruš desktop align-self:stretch - tu je image samostatný blok pod textom, nie vedľa neho */
    border-radius: var(--radius-base) var(--radius-base) 0 0;
  }
}

/* ══ Mobil (Figma 1201:109839, "Hero-Level_2" mobile frame - overené
   get_design_context + get_variable_defs NA TOMTO KONKRÉTNOM mobilnom node,
   nie z desktop fallbackov - viď CLAUDE.md "Variable módy pri mobilných
   frame-och": inline var() fallbacky v exporte môžu niesť DESKTOP hodnotu,
   rozhoduje resolved hodnota z get_variable_defs na mobil node) ══ */
@media (max-width: 767.98px) {
  /* BUG NÁJDENÝ 2026-07-24 (Maroš: "medzera za DNS server" viedla k systémovej
     kontrole): components.css .zn-block PRI ≤767px AUTOMATICKY PREPOČÍTA
     padding na 50% z --zn-pt/--zn-pb (`var(--zn-pt-m, calc(var(--zn-pt)*0.5))`),
     POKIAĽ nie je explicitne zadané --zn-pt-m/--zn-pb-m. Prepisovanie
     --zn-pt/--zn-pb PRIAMO v mobil media query (ako tu pôvodne) spôsobí, že sa
     moja Figma-overená mobilná hodnota ešte raz PREPOLOVÍ - treba -m/-t
     suffix, nie holé --zn-pt/--zn-pb. */
  .zn-hst {
    padding-inline: var(--space-4);           /* Page Padding/padding-global 16 - potvrdené, žiadny trap */
  }
  .zn-hst.zn-block { --zn-pt-m: var(--space-4); --zn-pb-m: var(--space-4); }  /* Div Padding/div-padding-small 16 - potvrdené, priama hodnota (žiadne prepolovenie) */

  .zn-hst__card {
    gap: var(--space-6);                      /* Div Padding/div-padding-large 24 - potvrdené */
    padding: var(--space-4) var(--space-4) var(--space-2) var(--space-4);  /* pt16/px16/pb8 - potvrdené, UŽ nie asymetrické pl48/pr0 ako desktop */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;  /* Radius/Large 24 - potvrdené (NIE zmenšené na 8, pôvodný odhad opravený) */
  }
  .zn-hst__column {
    gap: var(--space-6);                      /* Column gap 24 (hardcoded vo Figme) */
    padding-block: 0;                         /* Figma mobil Column NEMÁ py (desktop 48 by inak "presiaklo" z base pravidla) */
  }
  /* OPRAVA (Maroš 2026-07-24, screenshot naživo): pôvodne 40px regular / 56px
     accent podľa DOSLOVNÉHO čísla v Figma mobil exporte (1201:109839) - live
     to ale vyzeralo rozbito ("úplne iné veľkosti"), pretože accent je tu
     display:inline (plynie v RIADKU s regular textom, nie na vlastnom
     riadku ako pri iných blokoch) - 16px rozdiel v jednom flow vyzerá ako
     chyba, nie ako štýl. DESKTOP verzia (1201:109589) potvrdzuje: "Zenturi"
     AJ "Status" sú tam OBOJE 56px (rovnaké), žiadny split - mobil split bol
     Figma autorská nezrovnalosť (niekto zmenšil len regular časť pri tvorbe
     mobil frame a zabudol na accent), nie zámer. Fix: OBE rovnako 40px na
     mobile (zachováva desktopový vzor "rovnaká veľkosť", len zmenšené). */
  .zn-hst__heading,
  .zn-hst__heading-accent { font-size: 2.5rem; }
  .zn-hst__text { font-size: var(--text-base); }

  .zn-hst__badge {
    /* min-height namiesto height: pri <393px sa label smie zalomiť VO VNÚTRI a badge
       narastie - fixná výška by 2. riadok vytlačila mimo zelený pás (biely text na
       bielej karte = "zmiznutý" label, nález DDEV overenia). Žiadny flex-wrap -
       ten lomil label ako CELÝ flex item pod ikonu, nie text v ňom. */
    min-height: 48px;                         /* Button token 48 - potvrdené */
    height: auto;
    padding: 10px var(--space-2);             /* px mobil 8 (desktop 16) - potvrdené, py nezmenené */
  }
  /* Figma mobil: ikona 32px (size-[32px]), NIE desktop 52 - s 52px sa label nezmestil
     do riadku (52+text > šírka badge) a padal na druhý flex riadok. */
  .zn-hst__badge-icon { width: 32px; height: 32px; }
  .zn-hst__badge-label { font-size: var(--text-base); white-space: normal; }

  .zn-hst__visual {
    height: 230px;                            /* Figma mobil fixná výška (nie aspect-ratio ako tablet) */
    border-radius: 16px 0 0 0;                /* LEN top-left - potvrdené, Figma tu vynecháva top-right aj na mobile */
  }
  .zn-hst__visual-img {
    object-fit: contain;  /* mobil "contain" - NIE "cover" ako desktop (nízky široký box by inak orezal postavu) */
    /* mask-image namiesto ::after (viď desktop komentár) - mobil INÝ uhol než desktop 128.21deg, stopy rovnaké */
    -webkit-mask-image: linear-gradient(175.44deg, rgba(0, 0, 0, 1) 34.79%, rgba(0, 0, 0, 0) 90.718%);
            mask-image: linear-gradient(175.44deg, rgba(0, 0, 0, 1) 34.79%, rgba(0, 0, 0, 0) 90.718%);
  }

  /* Presah vĺn na mobile je INÝ pomer než desktop (-3.415%) - priamo odmerané
     z Figma mobilného frame (393px, card 361px): hero-status -51px, status-
     -contact -52px na tej istej 361px šírke → ~14.1-14.4%, spriemerované.
     Nejde o rovnaké škálovanie ako desktop (iný pomer, nie chyba/nekonzistencia). */
  .zn-hst__wave-piece:first-child { margin-right: -14.3%; }
}