/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Hero-Level_2

   Outer: bg-medium pozadie, container 1280, biela karta (rounded top 40 desktop
   / 24 mobil). Karta: vľavo textový stĺpec, vpravo obrázkový panel 660×470
   (top-left radius 16 desktop - top-right ide na doraz do karty a kartu orežé
   jej vlastný overflow:hidden). Dole vlnitý spodný okraj karty (2× wave.svg,
   mierne prekryté aby nadväzovali bez medzery).

   CTA button má na desktope vlastné rozmery (60/52/18 - Figma token Button/Icon/
   Button Font Size), odlišné od globálne unifikovaných 48px .btn — override cez
   2-triednu špecificitu (konvencia témy), nie úprava components.css. Na mobile sa
   Figma hodnoty (48/32/16) zhodujú s globálnym defaultom, override sa vracia späť.

   Mobil (rám 393): vlastná typografia (H1 40, text 16 vrátane
   bold časti), padding/gap škála (16/8/24), radius 24 (karta) / 8+8 (panel oba
   horné rohy), vlny s iným presahom (-51 namiesto -39). 1199.98 = generický
   medzikrok (stack, bez presnej mobilnej typografie - Figma preň nemá spec),
   rovnaká konvencia ako `hero`/`section-base`.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-hl2 {
  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-hl2.zn-block { --zn-pt: var(--space-6); --zn-pb: var(--space-6); }

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

.zn-hl2__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-8) var(--space-12);  /* pt 48 / pr 0 / pb 32 / pl 48 */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;       /* Radius/XLarge 40 */
  overflow: hidden;                          /* orežé pravý horný roh panelu na kartový radius */
}

/* ── Textový stĺpec ──────────────────────────────────────────────────────── */
.zn-hl2__column {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;                                 /* Figma Column gap 40 (bez zodpovedajúceho --space tokenu) */
}

.zn-hl2__headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);                       /* Figma gap 8 */
  width: 100%;
}

/* Heading/Tagline: Mix Regular Italic 16/1.5 */
.zn-hl2__tagline {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-tagline);
  font-size: var(--text-base);               /* Size/Regular 16 */
  line-height: 1.5;
  color: var(--color-text);
}

/* Heading/H1: Sans Regular 56/1.1 */
.zn-hl2__heading {
  margin: 0;
  width: 100%;                               /* flex item + align-items:flex-start by inak shrink-to-fit na max-content (nezalomí akcent) */
  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);
}
.zn-hl2__heading-accent {
  display: block;                            /* Figma: manuálny zlom pred akcentom - vždy na novom riadku */
  font-style: italic;
  font-weight: var(--weight-tagline);
}
.zn-hl2--accent-secondary-dark .zn-hl2__heading-accent { color: var(--color-secondary-dark); }
.zn-hl2--accent-primary-dark   .zn-hl2__heading-accent { color: var(--color-primary-dark); }
.zn-hl2--accent-secondary      .zn-hl2__heading-accent { color: var(--color-secondary); }
.zn-hl2--accent-primary        .zn-hl2__heading-accent { color: var(--color-primary); }

/* hl2_heading_layout = 'inline-lead' (napr. "Zenturi Komplet.") - akcent tečie v texte pred
   nadpisom namiesto vlastného riadku, zdedí farbu z .zn-hl2--accent-* vyššie. */
.zn-hl2__heading-accent--inline { display: inline; }

/* Text/Medium/Normal: Sans Regular 18/1.5 */
.zn-hl2__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);
}
.zn-hl2__text strong { font-weight: var(--weight-bold); }

.zn-hl2__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);                       /* Figma gap 8 */
}
.zn-hl2__actions-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);                       /* Figma Actions gap 24 (desktop) */
  flex-wrap: wrap;
}

/* Button/Icon override - Figma desktop token Button=60/Icon=52/Button Font Size=18,
   odlišné od globálne unifikovaných .btn 48px (components.css, zjednotenie 2026-07-10).
   2-triedna špecificita namiesto úpravy globálnej triedy (kaskáda témy). */
.zn-hl2 .zn-hl2__cta {
  height: 60px;
  font-size: 18px;
  --btn-arrow-frame: 52px;                    /* Icon frame 52 (desktop) */
}

/* Rezervovaný box (203×48) - rozmer ostáva aj bez obrázka, aby layout nekolabol
   kým Ján nedodá Google recenzie badge cez Multimédiá. */
.zn-hl2__rating {
  /* Flexibilné pri KAŽDEJ šírke: základ 203 (na ≥1280px vyzerá 1:1 ako doteraz),
     ale môže sa zmenšiť (min-width:0), nikdy nepreteká. Tvar drží aspect-ratio. */
  flex: 0 1 203px;
  max-width: 203px;
  min-width: 0;
  aspect-ratio: 203 / 48;
  height: auto;
  display: flex;
  align-items: center;
  mix-blend-mode: multiply;
}
.zn-hl2__rating-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.zn-hl2__rating-img--custom { object-fit: contain; }   /* nahraný badge sa neoreže */

/* Info/Small: Sans Regular 14/1.5, Scheme A/Status/Info Dark */
.zn-hl2__info {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);                       /* Figma gap 4 */
  font-family: var(--font-display);
  font-size: var(--text-sm);                 /* Size/Small 14 */
  line-height: 1.5;
  color: var(--color-info-dark);
}
.zn-hl2__info-icon { flex-shrink: 0; }

/* ── Obrázkový panel + Play tlačidlo ─────────────────────────────────────── */
.zn-hl2__visual {
  position: relative;
  flex-shrink: 0;
  width: 660px;
  height: 470px;
  border-radius: var(--radius-base) 0 0 0;   /* Radius/Base 16, len top-left (desktop) */
  overflow: hidden;
}
.zn-hl2__visual::after {
  /* Figma gradient overlay: fade obrázka do bielej smerom dole (175.36deg) */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(175.36deg, rgba(255, 255, 255, 0) 34.79%, rgba(255, 255, 255, 1) 90.718%);
  pointer-events: none;
}
.zn-hl2__visual-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Play ikona je vždy viditeľná (statický vizuálny prvok z Figmy) - klik/popup
   funkčnosť je podmienená len tým, či JS nájde modal (video zdroj vyplnený). */
.zn-hl2__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;                               /* 52 ikona + 16 padding na stranu */
  height: 84px;
  padding: 16px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-white);
  cursor: pointer;
  box-shadow: 0 12px 8px rgba(19, 91, 108, .15), 0 4px 3px rgba(19, 91, 108, .05);  /* medium-s effect */
  transition: transform var(--transition-base, .2s ease);
}
.zn-hl2__play:hover { transform: translate(-50%, -50%) scale(1.05); }
.zn-hl2__play img { display: block; width: 52px; height: 52px; flex-shrink: 0; }

/* ── Vlnitý spodný okraj karty (2× Vector, mierne prekryté) ─────────────── */
.zn-hl2__wave {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  margin-top: -1px;                          /* zamedzí subpixel medzere pod kartou */
}
.zn-hl2__wave-piece {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 34;
}
/* Presah = zlúči polovičný zub na švíku 2 kópií. Musí byť POMEROVÝ (%), nie fixné px:
   margin-% sa počíta zo šírky containing blocku (.zn-hl2__wave), takže presah drží
   konštantný pomer k šírke kópie pri ĽUBOVOĽNEJ šírke → žiadny šev responzívne.
   Hodnota z geometrie SVG: krajné zuby sú 21.78 od hrany (viewBox 659.5), medzera na
   švíku = 43.56 j.; presah = (43.56/659.5)·P, P=(W+presah)/2 → 3.415 % šírky W.
   (Figma -39px@1280 ≈ 3.05 % mierne nedozlúči, -51px mobil masívne prezlúči — oboje
   sú statické odhady dizajnéra pri jednej šírke; jeden správny % platí všade.) */
.zn-hl2__wave-piece:first-child { margin-right: -3.415%; }

/* ── Video popup ──────────────────────────────────────────────────────────── */
.zn-hl2__video-modal:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.zn-hl2__video-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 48, 71, .85);          /* Scheme A/Text prekrytie */
  border: 0;
}
.zn-hl2__video-dialog {
  position: relative;
  z-index: 1;
  /* Šírka je najmenšia z: 960, šírka kontajnera, a šírka ktorá udrží 16/9 box v
     dostupnej výške okna (100vh − padding modalu ×2). Vďaka tomu dialóg NIKDY
     nepretečie viewport na výšku → zatváracie X (vnútri, hore vpravo) je vždy vidno. */
  width: min(960px, 100%, calc((100dvh - 2 * var(--space-6)) * 16 / 9));
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background: var(--color-black);
  border-radius: var(--radius-base);
  overflow: hidden;
}
/* Fallback pre prehliadače bez dvh (starší Safari) - vh je dostatočne blízko */
@supports not (height: 100dvh) {
  .zn-hl2__video-dialog { width: min(960px, 100%, calc((100vh - 2 * var(--space-6)) * 16 / 9)); }
}
.zn-hl2__video-close {
  position: absolute;
  top: 16px;                                 /* vnútri dialógu - garantovane viditeľné pri každej výške okna */
  right: 16px;
  z-index: 2;                                /* nad iframe/video obsahom */
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 48, 71, .6);           /* tmavý kruh - viditeľný aj na svetlom videu (zladené s backdrop rgba(2,48,71,.85)) */
  border: 0;
  border-radius: 50%;
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--transition-base);
}
.zn-hl2__video-close:hover { background: rgba(2, 48, 71, .85); }
.zn-hl2__video-frame,
.zn-hl2__video-frame iframe,
.zn-hl2__video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
body.zn-hl2-video-open { overflow: hidden; }

/* ══ Tablet (768-1199.98) - generický medzikrok, Figma preň nemá spec ══
   Rovnaká konvencia ako hero/section-base: stack stĺpcov, bez presnej
   mobilnej typografie (tá platí až od 767.98 nižšie). */
@media (max-width: 1199.98px) {
  .zn-hl2__card {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-8);
    gap: var(--space-8);
  }
  .zn-hl2__visual {
    width: 100%;
    height: auto;
    aspect-ratio: 660 / 470;
    border-radius: var(--radius-base) var(--radius-base) 0 0;
  }
}

/* ══ Mobil ══ */
@media (max-width: 767.98px) {
  .zn-hl2 {
    padding-inline: var(--space-4);          /* Page Padding/padding-global mobil 16 */
  }
  /* -m varianty, nie holé --zn-pt/--zn-pb: components.css berie na mobile
     `var(--zn-pt-m, calc(var(--zn-pt) * 0.5))`, takže už-mobilná hodnota by sa
     prepolovila ešte raz (16 → 8). */
  .zn-hl2.zn-block { --zn-pt-m: var(--space-4); --zn-pb-m: var(--space-4); }  /* Div Padding/div-padding-small mobil 16 */

  .zn-hl2__card {
    gap: var(--space-6);                     /* Div Padding/div-padding-large mobil 24 */
    padding: var(--space-4) var(--space-4) var(--space-2) var(--space-4);  /* pt16/px16/pb8 */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;  /* Radius/Large 24 */
  }
  .zn-hl2__column { gap: var(--space-6); }   /* Column gap mobil 24 (desktop 40) */

  .zn-hl2__heading { font-size: 2.5rem; }    /* Size/H1 mobil 40 (rovnaká konvencia ako hero) */

  .zn-hl2__text,
  .zn-hl2__text strong { font-size: var(--text-base); }  /* Size/Medium mobil 16 (aj bold časti - nie 18) */

  .zn-hl2__actions { gap: var(--space-1); }              /* gap mobil 4 (desktop 8) */
  .zn-hl2__actions-row { gap: var(--space-3); }           /* Actions gap mobil 12 (desktop 24) */

  /* Button/Icon mobil sa zhoduje s globálnym .btn defaultom (48/32/16) - vraciame späť desktop override. */
  .zn-hl2 .zn-hl2__cta { height: 48px; font-size: var(--text-base); --btn-arrow-frame: 32px; }

  /* Rating box mobil: flexibilná šírka (aspect ~220/52), nie fixná 203 ako desktop. */
  .zn-hl2__rating { width: auto; flex: 1 1 0%; aspect-ratio: 220.133 / 52; height: auto; }

  .zn-hl2__visual { border-radius: 8px 8px 0 0; }        /* Radius mobil: OBA horné rohy 8 (desktop len top-left 16) */
  /* wave presah: pomerový -3.415 % (desktop pravidlo) platí aj tu - žiadny mobilný
     px override (pôvodný -51px sa pri responzívnej šírke rozchádzal - hlásený šev). */
}