/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - CTA + zoznam výhod (Figma 783:45194 „VypocetCeny-R")
     karta   783:45196   1280 × 426
     vlnka   783:45220   1280, súčasť karty (NIE samostatný `wave-sep` blok)

   ⚠️ Názov Figma vrstvy je prebratý z iného návrhu a s výpočtom ceny nesúvisí -
   odôvodnenie slugu aj audit reuse sú v hlavičke template.php.

   VLNKA = NAVY kópia z `hero-split` (`assets/img/cta-list/wave.svg`, md5 zhodné
   s `hero-split`/`hero-text`) - karta je navy, takže vlnka musí byť tiež. Nie je to
   nový export z Figmy; farba vlnky sa riadi farbou KARTY.

   MOBIL: Figma frame NEDODANÝ - hodnoty pri @media nižšie sú konvencia.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-ctl {
  position: relative;
  background: var(--color-bg-medium);           /* Scheme A/Background Medium #ecf2f4 */
  padding-inline: var(--space-16);              /* Page Padding/padding-global 64 */
}
/* Sekcia 783:45194 je 520,71 vysoká, Container v nej na y = 24 a obsah 472,71
   → pt aj pb = 24 (div-padding-small). Rovnako ako `hero-split`. */
.zn-ctl.zn-block { --zn-pt: var(--space-6); --zn-pb: var(--space-6); }

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

.zn-ctl__card {
  position: relative;
  z-index: 2;
  background: var(--color-text);                /* Scheme A/Foreground (tmavý mód) #023047 */
  /* pt 48 (div-padding-large) / pr 48 (section-small) / pb 32 (div-padding-medium) / pl 48.
     POZOR: pb je 32, NIE 48 - potvrdené geometriou (karta 426 = 48 + Column 346 + 32).
     Rovnaká kombinácia ako `hero-split`. */
  padding: var(--space-12) var(--space-12) var(--space-8);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;   /* Radius/XLarge 40 */
}

/* Figma „Column" 783:45197 = flex row, gap 40, items-start. Oba stĺpce sú `flex 1 0 0`
   (552 + 40 + 0 + 40 + 552 = 1184); oddeľovač je vo Figme vrstva so šírkou 0, takže
   šírku stĺpcov neovplyvňuje - preto má aj u nás `flex: none` a 1px sa rieši
   `box-shadow`, nie `width` (viď nižšie). */
.zn-ctl__column {
  display: flex;
  align-items: stretch;                         /* Figma items-start + oba deti self-stretch */
  gap: 40px;                                    /* Figma literál (Column gap), nie token */
}

/* Ľavý stĺpec: nadpis hore, CTA dole (Figma `justify-between` + pb 24).
   Column je 346 vysoký, nadpis 124, CTA 48 na y = 274 → 274 + 48 + 24 = 346. */
.zn-ctl__intro {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: var(--space-6);               /* Figma literál 24 */
}
/* Heading/H1: Sans Regular 56/1.1. Nadpis je BIELY - `Scheme A/Text` má v tomto
   (tmavom) móde #ffffff. Fallback #023047 z MCP renderu je z iného módu, nebrať. */
.zn-ctl__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-white);                    /* Scheme A/Text (tmavý mód) #ffffff */
}
/* Akcent „Zenturi?" tečie INLINE na konci nadpisu (Figma je to jeden textový uzol
   s dvoma spanmi), rovnaká veľkosť, len iný rez a farba.
   Farba = `Scheme A/Accent/Secondary` #8ecae6 = `--color-secondary-light`. */
.zn-ctl__heading-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);
  color: var(--color-secondary-light);          /* #8ecae6 */
}
/* CTA = globálna `.btn.btn--primary` (#ffb703, výška 48, radius 12, text 16 w650
   čierny) bez odchýlky - vzhľad sa v bloku NEDEFINUJE nanovo. Figma tu ikonu nemá. */
.zn-ctl__cta { flex-shrink: 0; }

/* Zvislý oddeľovač (Figma „Line 89" 783:45202, x = 592, výška 346 = celý stĺpec).
   FARBA JE ŽLTKASTÁ, nie sivá: `Scheme A/Border` má v tomto móde #fde9b499, teda
   rgba(253,233,180,0.6). Overené meraním na Figma rendere - 1px stĺpec pixelov
   vyšiel (153,159,136), čo je presne 60 % #fde9b4 nad #023047:
     R 253×0,6 + 2×0,4 = 152,6 · G 233×0,6 + 48×0,4 = 159 · B 180×0,6 + 71×0,4 = 136,4
   `--color-border` z témy je rgba(3,3,3,.15) - INÁ hodnota, tu sa použiť NESMIE.

   Kreslené ABSOLÚTNE POZICOVANÝM `::after`, nie `width`/`border`: vo Figme má vrstva
   šírku 0 a nezaberá miesto v layoute, takže 1px šírky by oba stĺpce zúžil (rovnaká
   logika ako „Figma stroke je INSIDE" v CLAUDE.md). Pseudo-element kreslí 1px od
   ľavej hrany, teda presne na Figma pozícii (namerané x = 720 v oboch).
   `box-shadow` sa na to POUŽIŤ NEDÁ: tieň je kópia border boxu, a ten je tu 0 široký,
   takže sa nevykreslí vôbec - CSS je validné, DevTools hodnotu ukazujú, konzola čistá
   a na stránke nie je nič. Overené pri prvom pokuse. */
.zn-ctl__divider {
  position: relative;
  flex: none;
  width: 0;
  align-self: stretch;
}
.zn-ctl__divider::after {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 1px;                                       /* Stroke/Border Width 1 */
  background: rgba(253, 233, 180, 0.6);             /* Scheme A/Border #fde9b499 */
}

/* Pravý stĺpec: Figma „Frame 1" 783:45203 je 552 široký s px 24 → zoznam 504.

   DVE VRSTVY SÚ NUTNÉ, nie kozmetika: keby padding 24 niesla priamo flex položka,
   pripočítal by sa k jej šírke. `flex-basis: 0` sa pri `box-sizing: border-box`
   vzťahuje na BORDER BOX, ktorý nemôže byť užší než vlastný padding, takže základná
   veľkosť zoznamu je 48 a nie 0 - voľné miesto sa potom delí z menšieho zvyšku a
   stĺpce vyjdú 528 / 576 namiesto Figma 552 / 552 (a oddeľovač sa posunie o 24 px).
   Namerané pri prvom pokuse, preto je to tu popísané. */
.zn-ctl__aside {
  flex: 1 1 0%;
  min-width: 0;
}
.zn-ctl__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                          /* List gap 8 */
  margin: 0;
  padding: 0 var(--space-6);                    /* div-padding-small 24 */
  list-style: none;
}

/* Položka (Figma „Menu Item"): flex, gap 12, py 8. Výška 110 = 8 + 94 + 8. */
.zn-ctl__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);                          /* Figma literál 12 */
  padding-block: var(--space-2);                /* 8 */
}
/* Slot ikony sa rezervuje VŽDY, aj keď ikona chýba - inak sa texty položiek rozídu.
   `flex-shrink: 0`, inak ju natesnaný riadok scvrkne na 0 (CLAUDE.md). */
.zn-ctl__icon,
.zn-ctl__icon-slot {
  flex-shrink: 0;
  width: 48px;                                  /* Figma 48 (nie token „Icon" 52) */
  height: 48px;
}
/* ⚠️ DOČASNÉ: `.zn-ctl__icon` môže byť aj <img> (raster `tmp-chart-alt.webp` v tomto
   adresári) - Figma „Chart_alt_duotone" 783:45216 sa z Figmy nedá vytiahnuť ako SVG,
   čaká sa na „Copy as SVG" od Jána. Pravidlo je zámerne na tej istej triede, aby sa
   po dodaní SVG prepínalo LEN pole `ctl_icon` a CSS ostalo nedotknuté.
   POZOR: raster má farby (#eaf5fa + #219ebc) ZAPEČENÉ a prepis `--zn-ico-main` /
   `--zn-ico-soft` nižšie ho NEOVPLYVNÍ - pri zmene farebnosti stavu by ostal starý. */
img.zn-ctl__icon {
  display: block;
  object-fit: contain;
}

.zn-ctl__item-body {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);                          /* Figma literál 4 */
  color: var(--color-white);                    /* Scheme A/Text (tmavý mód) #ffffff */
}
/* Text/Medium/Semi Bold: 18/1.5 w650. Je to <p>, nie nadpis - vo Figme je to položka
   zoznamu, nie hierarchická úroveň, a h3 by pod h2 sekcie vyrobilo falošnú štruktúru. */
.zn-ctl__item-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);          /* 650 */
  font-size: var(--text-lg);                    /* Size/Medium 18 */
  line-height: 1.5;
  color: inherit;
}
/* Text/Small/Normal: 14/1.5. Farba BIELA - overené na rendere (v ťahoch písma sú
   pixely 255,255,255); fallback #023047 z MCP renderu je opäť z iného módu. */
.zn-ctl__item-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);                    /* Size/Small 14 */
  line-height: 1.5;
  color: inherit;
}

/* IKONY SÚ TEAL, nie oranžové. Prepis `--zn-ico-*` na úrovni bloku - rovnaký
   mechanizmus ako `.zn-rm__col--ico-*` v `roadmap`.
     soft = `Scheme A/Accent/Secondary Light` #eaf5fa - v téme NEEXISTUJE token
            (`--color-secondary-lighter` je #c0e2f1, iná hodnota), preto literál,
     main = `Scheme A/Accent/Secondary Dark`  #219ebc = `--color-secondary`.
   Obe hodnoty OVERENÉ meraním na Figma rendere (nie z exportovaného kódu - fallbacky
   v MCP JSX hlásili #8ecae6 a #1b8098, čo sú iné módy premennej): najčastejšie farby
   v 48×48 výreze ikony sú (234,245,250) a (33,158,188).
   Prepis platí len tam, kde ikona premenné naozaj obsahuje - overené, že
   `ico-cash-single` aj `ico-topwatch` ich majú (CLAUDE.md: ikona so zapečenými
   hexmi override IGNORUJE a nedá o tom žiadny signál). */
.zn-ctl {
  --zn-ico-soft: #eaf5fa;                       /* Scheme A/Accent/Secondary Light */
  --zn-ico-main: var(--color-secondary);        /* Scheme A/Accent/Secondary Dark #219ebc */
}

/* Vlnka - prekryv 3.415 % je vlastnosť assetu, nie kontajnera (výpočet a dôvod
   v CLAUDE.md, sekcia Figma-first). Figma tu má opäť 39 j namiesto 43,558. */
.zn-ctl__wave {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  margin-top: -1px;
}
.zn-ctl__wave-piece {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 34;
}
.zn-ctl__wave-piece:first-child { margin-right: -3.415%; }

/* ══ Tablet (≤1199.98px) - Figma preň nemá spec ══ */
@media (max-width: 1199.98px) {
  .zn-ctl { padding-inline: var(--space-8); }
  .zn-ctl__column { gap: var(--space-8); }      /* 40 → 32, nech ostane na stĺpce miesto */
  .zn-ctl__list   { padding-inline: var(--space-4); }
}

/* ══ Mobil (≤767.98px) - Figma frame NEDODANÝ ═════════════════════════════
   Konvencia príbuzných blokov (hero-split, hero-simple): page-padding 16,
   Radius/Large 24, Size/H1 40, stĺpce stackujú. Oddeľovač sa pri stacknutí mení
   zo zvislého na vodorovný. Prekryv vlnky sa NEPREPISUJE - je to hodnota assetu.
   Section padding cez `-m` premenné, nie holé `--zn-pt` (CLAUDE.md). ══ */
@media (max-width: 767.98px) {
  .zn-ctl { padding-inline: var(--space-4); }                   /* Page Padding 16 */
  .zn-ctl.zn-block { --zn-pt-m: 16px; --zn-pb-m: 16px; }        /* div-padding-small (mobil) 16 */

  .zn-ctl__card {
    padding: var(--space-4);                                    /* 16 zo všetkých strán */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;       /* Radius/Large 24 (desktop 40) */
  }
  .zn-ctl__column {
    flex-direction: column;
    gap: var(--space-6);                                        /* 24 */
  }
  .zn-ctl__intro  { padding-bottom: 0; gap: var(--space-6); }   /* bez justify-between rezervy */
  .zn-ctl__heading { font-size: 2.5rem; }                       /* Size/H1 (mobil) 40 */
  .zn-ctl__list   { padding: 0; }
  /* Oddeľovač sa pri stacknutí otáča na vodorovný - stále cez `::after`, aby nezaberal
     miesto v stacku a nezmenil rozostupy. */
  .zn-ctl__divider { width: auto; height: 0; }
  .zn-ctl__divider::after {
    inset-block: auto;
    inset-inline: 0;
    top: 0;
    width: auto;
    height: 1px;
  }
}