/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Hero Riešenia (Figma 1201:52892 desktop "Hero-Level_4" /
   1201:53065 mobil, sekcia "Riesenia" 582:35917)

   Navy panel so zaobleným vrchom + vlnitý spodný okraj (rovnaký asset a
   technika ako hero-text/-demo/-split/-contact/cta-list - skopírovaný súbor,
   md5 zhodný, nie nový export). Vľavo tagline + H1 (posledná veta italic,
   BEZ farebného odlíšenia) + perex; vpravo, oddelené deličom, úvodná veta +
   dvojstĺpcový zoznam odvetví (ikona + text, voliteľný odkaz).

   Ikony: knižnica `assets/img/icons/`, farba cez zenturi_the_icon($icon,
   'secondary', ...) - Figma "Scheme A/Accent/Secondary Dark" #219ebc sedí
   presne s --color-secondary; Figma "Secondary Light" #eaf5fa nemá v téme
   priamy ekvivalent (najbližšie --color-secondary-light #8ecae6, tá istá
   dvojica ako iné 'secondary' ikony v téme - iný pár knižnica neponúka).

   Divider farba (Scheme A/Border #fde9b499 - INÝ token než globálne
   --color-border, ktorý je len pre svetlé pozadia) nemá v téme premennú,
   preto priamy zápis nižšie.

   Prekryv vlnky = -3,415 % na VŠETKÝCH šírkach (vlastnosť assetu, výpočet
   v interných poznámkach) - Figma mobil frame má vektory na -52px/361px kontajner
   (~-14,4 %, o presne jednu periódu viac), ale hero-text sa od tejto
   Figma-odčítanej hodnoty 2026-08-05 vedome odklonil práve preto, že sa
   NESMIE čítať z pozícií vektorov; tu sa ide rovno správnou hodnotou.
   ══════════════════════════════════════════════════════════════════════════ */

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

.zn-hrs__container {
  position: relative;
  max-width: var(--container-max);              /* Container/container-large 1280 */
  margin-inline: auto;
}

.zn-hrs__panel {
  position: relative;
  z-index: 2;                                   /* panel z-2, vlnka z-1 */
  background: var(--color-text);                /* Scheme A/Foreground #023047 */
  /* pt 48 (div-padding-large) / pr 48 (section-small) / pb 32 (div-padding-medium) / pl 48 (div-padding-large) */
  padding: var(--space-12) var(--space-12) var(--space-8) var(--space-12);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;   /* Radius/XLarge 40, len hore */
}

.zn-hrs__row {
  display: flex;
  align-items: flex-start;
  gap: 40px;                                    /* literál - Figma arbitrary hodnota, nie token */
  width: 100%;
}

/* ── Ľavý stĺpec: tagline + H1 + perex ─────────────────────────────────── */

.zn-hrs__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                          /* 8 */
  flex: 1 1 0%;
  min-width: 0;
}

.zn-hrs__tagline {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-tagline);           /* 420, Mix Regular Italic */
  font-size: var(--text-base);                  /* Size/Regular 16 */
  line-height: 1.5;
  color: var(--color-primary-light);            /* Scheme A/Accent/Primary Dark (#fbd26a) = theme primary-light */
}

.zn-hrs__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-7xl);                   /* Size/H1 56 (sedlí na 56 pri 1440 aj 1920) */
  line-height: 1.1;
  color: var(--color-white);                    /* Scheme A/Text #ffffff */
}
.zn-hrs__heading-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);           /* Mix Regular Italic, rovnako ako tagline */
  /* Farba sa NEMENÍ - akcent je vo Figme rovnaká biela ako zvyšok nadpisu, len italic. */
}

.zn-hrs__text {
  margin: 0;
  max-width: 572px;
  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-white);
}

/* ── Delič ──────────────────────────────────────────────────────────────
   Desktop: zvislá čiara na výšku riadku (align-self stretch prebije
   `.zn-hrs__row`'s items:flex-start len pre tento prvok). Mobil: vodorovná,
   celá šírka - viď media query nižšie. */
.zn-hrs__divider {
  align-self: stretch;
  flex: 0 0 1px;
  width: 1px;
  /* Figma "Line 89" ma sirku 0 (get_metadata: 1,5e-5) a lezi na x=651, cize
     do rozlozenia NEPRISPIEVA: lavy blok 611, gapy 40/40, pravy zacina na 691
     (611+40+40 = 691, sucet 1184). CSS box sirky 1px ten pixel zral, takze
     lavy stlpec vychadzal 610 a ciara na x=650. Zaporny margin vrati prispevok
     do layoutu na 0 a ciara sa vykresli na 651..652 - jeden ostry pixel presne
     ako vo Figma rendri (overene z PNG: jediny svetly stlpec je na x=779,
     t. j. 128 + 651). Rovnake jadro ako pravidlo "Figma stroke je INSIDE, CSS
     border box ROZSIRUJE" v interných poznámkach. */
  margin-inline-end: -1px;
  background: rgba(253, 233, 180, .6);          /* Scheme A/Border #fde9b499 */
}

/* ── Pravý stĺpec: úvodná veta + dvojstĺpcový zoznam odvetví ─────────────── */

.zn-hrs__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);                          /* 12 */
  flex: 0 0 493px;
  width: 493px;
  padding: var(--space-6);                      /* Div Padding/div-padding-small 24, všetky strany */
}

.zn-hrs__aside-heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);            /* 550, Text/Large/Medium */
  font-size: var(--text-2xl);                   /* Size/Large 20 */
  line-height: 1.5;
  color: var(--color-white);
}

.zn-hrs__lists {
  display: flex;
  gap: 10px;                                    /* literál - Figma arbitrary hodnota */
  width: 100%;
}

.zn-hrs__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                          /* 8 */
  flex: 1 1 0%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zn-hrs__item-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);                          /* 12 */
  padding-block: var(--space-2);                /* 8 */
  text-decoration: none;
  color: inherit;
}
.zn-hrs__item-link:hover .zn-hrs__item-label { text-decoration: underline; }

.zn-hrs__item-icon {
  flex-shrink: 0;                               /* interné poznámky: ikony vo flex riadkoch */
  width: 24px;
  height: 24px;
}

.zn-hrs__item-label {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);            /* 550, Text/Regular/Medium */
  font-size: var(--text-base);                  /* Size/Regular 16 */
  line-height: 1.5;
  color: var(--color-white);
}

/* ── Vlnitý spodný okraj (rovnaký asset a technika ako ostatné navy vlnky) ── */
.zn-hrs__wave {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  margin-top: -1px;
}
.zn-hrs__wave-piece {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 34;
}
.zn-hrs__wave-piece:first-child { margin-right: -3.415%; }

/* ══ ≤1199.98px - Figma preň nemá spec (len 1440 desktop / 393 mobil):
   generický medzikrok, štrukturálne prejde na rovnaké skladanie ako mobil
   (stĺpce pod sebou), presné mobilné hodnoty typografie/paddingu prichádzajú
   až v mobilnej query nižšie. ══ */
@media (max-width: 1199.98px) {
  .zn-hrs { padding-inline: var(--space-8); }   /* 32 */

  .zn-hrs__row { flex-direction: column; }
  .zn-hrs__divider {
    align-self: stretch;
    flex: 0 0 1px;
    width: 100%;
    height: 1px;
    margin-inline-end: 0;   /* stackovane je ciara vodorovna cez celu sirku - zaporny margin z desktopu by ju pretiahol 1px za panel */
  }
  .zn-hrs__aside { flex: none; width: 100%; }
}

/* ══ Mobil (≤767.98px) - hodnoty z Figma mobil frame 1201:53065 ══ */
@media (max-width: 767.98px) {
  .zn-hrs { padding-inline: var(--space-4); }   /* 16 */
  .zn-hrs.zn-block { --zn-pt-m: 16px; --zn-pb-m: 16px; }  /* Figma mobil mód div-padding-small = 16, nie 24 */

  .zn-hrs__panel {
    padding: var(--space-4) var(--space-4) var(--space-5);   /* pt16 / px16 / pb20 */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;    /* Radius/Large 24 */
  }
  .zn-hrs__row { gap: var(--space-6); }         /* 24 */

  .zn-hrs__heading { font-size: 2.5rem; }        /* Size/H1 40 - literál, nie fluid clamp */
  /* Akcent NEMÁ vlastný font-size - dedí 40 z .zn-hrs__heading (<em> v <h1>),
     rovnako ako na desktope (tam tiež žiadny override, dedí --text-7xl).
     Predošlá hodnota 56px bola JSX-literál pasca (Sans Regular vs Mix Regular
     Italic - interné poznámky, 8× potvrdené inde): wrap-test s 56 aj so 40 dáva
     IDENTICKÝ 4-riadkový zlom pre tento konkrétny text ("Pod jednou"/
     "strechou." sú dosť krátke na oboch veľkostiach) - wrap teda tento prípad
     NEROZHODOL, čo bol chybný záver v predošlom zázname. Rozhodlo: žiadny
     samostatný token pre akcent v get_variable_defs (len Size/H1=40), desktop
     už dediť 56=56 bez overridu, a priame potvrdenie z Figma súboru (Maroš). */

  /* Desktop --text-lg (18px) je Size/Medium v DESKTOP variable móde - mobilný
     mód (get_variable_defs na 1201:53065) má Size/Medium 16, iná hodnota než
     desktop (interné poznámky: Auto (Desktop) pasca). Bez tohto override perex
     wrapoval na 5 riadkov namiesto Figma 4 ("Preskúmajte kompletný ekosystém"
     / "Zenturi..." namiesto "Preskúmajte kompletný ekosystém Zenturi." /
     "Od CRM..."). */
  .zn-hrs__text { font-size: var(--text-base); } /* 16, Size/Medium (mobil mód) */

  .zn-hrs__aside { padding: 0; }
  .zn-hrs__aside-heading {
    font-weight: var(--weight-semibold);         /* 650, Text/Regular/SemiBold */
    font-size: var(--text-base);                 /* 16 */
  }
  .zn-hrs__item-label { font-size: var(--text-sm); }  /* 14, Text/Small/Medium */
}