/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Hero Compare (Figma komponent „HeroLevel3", inštancia „Section /
   Header / Images 3", node 1181:73871, stránka „Compare - Zenturi vs "
   566:14237 — prvá stránka rodiny /vs-caflou/, /vs-superfaktura/ atď.)

   POZOR 2 rôzne "HeroLevel3": Figma interný názov komponentu tejto inštancie
   je "HeroLevel3" (rovnaký string ako čitateľný názov v code exporte), ale
   NEJDE o už zaregistrovaný `zenturi/hero-level3` blok (Zen AI stránka, node
   1200:42561) — iná kombinácia props (showIcon=false navyše showButtonSwitch=
   true, flat akcent nie gradient, iná obrázková kompozícia s blob dekoráciou).
   Založené ako SAMOSTATNÝ blok `zenturi/hero-compare` (prefix `hc_`), aby sa
   nerozšíroval hero-level3 o kopu nových podmienok len pre 1 stránku a
   neriskovalo jeho rozbitie na Zen AI. Zdieľané 1:1 (CTA veľkosti 60/18/52,
   Google badge 203×48 multiply, info riadok 14px) sú skopírované z hero-
   level3/hero-level2, nie duplicitne vymyslené (reuse mandát projektu).

   POZOR farby (interné poznámky "dve čierne" pasca): nadpis základná časť = literálna
   #000000 (Color Scheme 1/Text, `var(--color-black)`). Text pod nadpisom AJ
   pill-switcher label = `var(--color-text)` (#023047, Scheme A/Text) - INÁ
   čierna/navy než nadpis, over v Figme pred zmenou. Akcent = FLAT
   `var(--color-secondary-dark)` (#1b8098) - NIE gradient (na rozdiel od
   hero-level3, tu Figma nemá background-clip efekt).

   Pill-switcher ("Zenturi vs Caflou ⌵"): reálna funkcia (dropdown na
   prepínanie medzi /vs-X/ stránkami vs. čisto statický vizuál - POZOR, hviezdička
   s lomkou tu v komente ukončovala CSS komentár a zožrala prvé pravidlo!) NEOVERENÁ u
   Jána — renderuje sa staticky (<span>, alebo <a> ak sa vyplní `hc_switcher_
   url`), žiadny predpokladaný JS dropdown ("Interakcie neodhadovať").

   Sekcia: symmetric py section-small 48 (NIE asymetrické pt-only ako hero-
   level3) - táto inštancia nemá vlastnú vlnu (Figma bottomWawes=false), za
   ňou ide priamo "Section / Logo 1" (rovnaké bg-medium pozadie, žiadny šev).

   Vizuál vpravo: flex:1 rovnomerne s textovým stĺpcom (NIE fixná šírka ako
   hero-level3 684px - Figma má tu `flex-[1_0_0]`, efektívne ~616px pri 1280
   container). Blob dekorácia = flattened SVG export (569:28392, asset
   021ea252 - curl príkaz v prompte pre DDEV, uložiť do assets/img/hero-
   compare/blob-ellipse.svg). Obrázok = rounded-tl only (Radius/Medium 12) +
   2 lineárne gradienty dofarbujúce okraj do bg-medium (Figma 1:1, zaokrúhlené
   z 84.6815deg/63.305%/97.086% a 173.3964deg/34.79%/90.718%).

   MOBIL: frame 1181:73982 (393px) DODANÝ 2026-08-12, hodnoty nižšie sú z neho.
   Tablet (768-1199) Figma spec nemá - ostáva generický medzikrok.

   POZOR na Variable módy: JSX z mobilného frame hlási pri akcente nadpisu 56px,
   ale `get_variable_defs` na tom istom node vracia `Size/H1: 40`. Platí 40 -
   56 je desktopová hodnota presakujúca cez „Typography: Auto (Desktop)".
   ══════════════════════════════════════════════════════════════════════════ */

.zn-hc {
  background: var(--color-bg-medium);           /* Scheme A/Background Medium #ecf2f4 */
  padding-inline: var(--space-16);              /* page-padding 64 */
}
.zn-hc.zn-block {
  --zn-pt: var(--space-12);                     /* section-small 48, symmetric */
  --zn-pb: var(--space-12);
}

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

.zn-hc__row {
  display: flex;
  align-items: center;
  gap: var(--space-12);                         /* div-padding-large 48 */
}

/* ── Ľavý stĺpec ── */
.zn-hc__column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                          /* div-padding-medium 32 */
  padding-block: var(--space-12);               /* 48 - vertikálne vyváženie voči obrázku */
}
.zn-hc__content { display: flex; flex-direction: column; gap: var(--space-6); }  /* 24 */
.zn-hc__headline { display: flex; flex-direction: column; gap: 8px; }            /* Figma Headline gap 8 */

/* Pill switcher ("Zenturi vs Caflou ⌵") */
.zn-hc__top { display: flex; align-items: center; }
.zn-hc__switcher {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--color-border);        /* Scheme A/Border rgba(3,3,3,.15) */
  border-radius: var(--radius-base);            /* Radius/Base 16 */
  color: inherit;
  text-decoration: none;
}
.zn-hc__switcher-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding-inline: 8px;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);                  /* 16 */
  color: var(--color-text);                     /* navy, NIE čierna nadpisu */
}
.zn-hc__switcher-name { text-decoration: underline; text-decoration-skip-ink: none; }
.zn-hc__switcher-chevron { flex-shrink: 0; color: var(--color-text); transition: transform var(--transition-base); }

/* ── Dropdown konkurentov ─────────────────────────────────────────────────────
   Otvorený stav Figma NEMÁ (modeluje len zatvorenú pilulku), rovnako ako pri
   dropdowne v `comparison` — panel je teda naše riešenie, vizuál preberá pilulku
   (rovnaký rám, radius a typografia), aby k nej opticky patril. */
.zn-hc__switch { position: relative; display: inline-block; }
.zn-hc__switcher--btn {
  background: none;
  font: inherit;
  cursor: pointer;
}
.zn-hc__switch.is-open .zn-hc__switcher-chevron { transform: rotate(180deg); }

.zn-hc__switch-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 5;
  min-width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  box-shadow: 0 8px 8px -4px rgba(19, 91, 108, .05), 0 20px 24px -4px rgba(19, 91, 108, .1);
}
.zn-hc__switch-list[hidden] { display: none; }

.zn-hc__switch-item {
  display: flex;
  align-items: center;
  min-height: 44px;                             /* dotykový cieľ */
  padding: 6px 8px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
.zn-hc__switch-item:hover,
.zn-hc__switch-item:focus-visible { background: var(--color-bg-medium); }

/* Nadpis: base 56 čierna, akcent 56 italic flat teal (inline, rovnaký riadok) */
.zn-hc__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-7xl);                   /* Size/H1 56 */
  font-weight: var(--weight-regular);
  line-height: 1.1;
  color: var(--color-black);                     /* literálna #000 - viď hlavička */
}
.zn-hc__heading-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);           /* Mix Regular Italic */
  color: var(--color-secondary-dark);           /* flat #1b8098, NIE gradient */
}

.zn-hc__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);                    /* Size/Medium 18 */
  line-height: 1.5;
  color: var(--color-text);                     /* navy #023047 */
}
.zn-hc__text strong { font-weight: var(--weight-bold); }

/* ── Actions ── */
.zn-hc__actions { display: flex; flex-direction: column; gap: 8px; }
.zn-hc__actions-row { display: flex; align-items: center; gap: var(--space-6); }  /* 24 */

/* Veľkosť CTA cez 2-triednu špecificitu (components.css sa načítava PO blokovom
   CSS) - hodnoty 1:1 s hero-level2/hero-level3 (Button 60 / font 18 / frame 52). */
.zn-hc .zn-hc__cta { height: 60px; font-size: 18px; --btn-arrow-frame: 52px; }

/* Google badge - rovnaké rozmery aj blend ako hero-level2/hero-level3 (reuse) */
.zn-hc__rating {
  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-hc__rating-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.zn-hc__rating-img--custom { object-fit: contain; }

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

/* ── Pravý stĺpec: vizuál (flexibilný, NIE fixná šírka) ── */
.zn-hc__visual {
  flex: 1 1 0;
  min-width: 0;
  height: 570px;
  position: relative;
}

/* Dekoratívny "blob" tvar za obrázkom - Figma má na obrázku extra transparentný
   padding pre mäkký okraj/glow (inset -38.55%/-35.98% v pôvodnom exporte),
   replikované 1:1 cez orámovaný wrapper + nadrozmerný vnútorný obrázok. */
.zn-hc__blob {
  position: absolute;
  left: 45px;
  top: 102px;
  width: 361px;
  height: 337px;
  z-index: 0;
  overflow: visible;
}
.zn-hc__blob-img {
  position: absolute;
  inset: -38.55% -35.98%;
  display: block;
  width: auto;
  max-width: none;
  height: 173.1%;                               /* 100% + 2×36.55% */
}

.zn-hc__image-wrap {
  position: absolute;
  left: 92px;
  top: 53px;
  right: 0;
  aspect-ratio: 524 / 532;
  border-radius: var(--radius-md) 0 0 0;        /* rounded-tl only, Radius/Medium 12 */
  overflow: hidden;
  z-index: 1;
}
/* `object-position: left top` = rovnaké ukotvenie, aké má Figma (obrázok tam sedí
   na `left: 0 / top: 0.08%`). Pri `50% 50%` sa z 524x610 zdroja orezávalo 39px zhora
   aj zdola a miznul horný panel appky s logom. Mierku necháva `cover` (rozhodnuté
   skôr) - Figma zdroj navyše zväčšuje na 166.6 %, to sa bez orezaného assetu
   nedosiahne, viď changelog. */
.zn-hc__visual-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
/* Gradient fade do bg-medium na okraji obrázka (Figma 1:1, zaokrúhlené hodnoty) */
.zn-hc__image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(84.68deg, rgba(236, 242, 244, 0) 63.305%, var(--color-bg-medium) 97.086%),
    linear-gradient(173.4deg, rgba(236, 242, 244, 0) 34.79%, var(--color-bg-medium) 90.718%);
}

/* ══ Tablet (≤1199.98px) - generický medzikrok, Figma preň nemá spec (stránka
   nemá zadaný mobil/tablet zdroj) - rovnaká konvencia ako hero-level2/3:
   stack stĺpcov, vizuál responzívny namiesto pevnej výšky. ══════════════════ */
@media (max-width: 1199.98px) {
  .zn-hc__row { flex-direction: column; align-items: stretch; }
  .zn-hc__column { padding-block: 0; }
  .zn-hc__visual { height: auto; aspect-ratio: 616 / 570; }
  /* Absolútne pozicionované deti prevedené na % (pôvodne px, 616×570 referencia) -
     bez toho by pri zmenšovaní kontajnera nescalovali a pretekali. */
  .zn-hc__blob { left: 7.3%; top: 17.9%; width: 58.6%; height: 59.1%; }
  .zn-hc__image-wrap { left: 14.9%; top: 9.3%; }
}

/* ══ Mobil (≤767.98px) - Figma 1181:73982, frame 393 ════════════════════════
   Referencia: page-padding 16 → obsahový kontajner 361, Image container 361×414.
   Percentá nižšie sú z týchto dvoch čísel, aby layout scaloval medzi 360 a 767.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* `overflow-x: clip` rieši VODOROVNÉ PRETEKANIE STRÁNKY: `.zn-hc__blob-img` má
     zámerný `inset: -38.55% -35.98%` (mäkký glow okraj zapečený v assete), takže
     na mobile prečnieva mimo viewport a celý dokument sa dal scrollovať do strany.
     Namerané (iframe 393/360): scrollWidth 457/417 vs clientWidth 393/360, teda
     +64/+57px; presah končí pri 768px (tam už blob.right 623 < 768), preto je fix
     scopnutý do tejto mobilnej query a DESKTOP SA NEMENÍ.
     `clip`, NIE `hidden`: pri `hidden` sa `overflow-y` automaticky prepne na `auto`
     (viď interné poznámky) a orezal by zvisle rozbaľovací dropdown tohto bloku; `clip` necháva
     zvislú os `visible`. Prečnievajúca plocha je len priehľadný glow, nie obsah. */
  .zn-hc { padding-inline: var(--space-4); overflow-x: clip; }  /* page-padding 16 (mobilný mód) */

  /* `-m` varianty, NIE holé `--zn-pt`/`--zn-pb`: components.css mobilnú hodnotu
     bez nich odvodí ako polovicu desktopovej (48 → 24), kým Figma chce 32. */
  .zn-hc.zn-block {
    --zn-pt-m: var(--space-8);                    /* section-small 32 (mobilný mód) */
    --zn-pb-m: var(--space-8);
  }

  .zn-hc__visual {
    height: auto;
    aspect-ratio: 361 / 414;                      /* Image container 1181:73963 */
  }

  /* Blob: 35/0/307×287 v ráme 361×414 */
  .zn-hc__blob {
    left: 9.7%;
    top: 0;
    width: 85.04%;
    height: 69.32%;
  }

  /* Obrázok 377×383 s `right: -16` - zámerne PRETEKÁ cez page padding, takže sa
     dotýka pravého okraja displeja. Ľavá hrana tým vychádza presne na 0
     (361 + 16 − 377 = 0), preto sa šírka nezadáva a drží ju aspect-ratio. */
  .zn-hc__image-wrap {
    left: 0;
    right: calc(var(--space-4) * -1);
    top: 7.49%;                                   /* 31 / 414 */
  }
}