/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Compare CTA (Figma layer "VypocetCeny-R", node 683:49963,
   stránka "Compare - Zenturi vs " 566:14237)

   POZOR recyklovaný Figma názov "VypocetCeny-R" - 3. VÝZNAM v projekte:
   1) zenturi/pricing-calculator (Cenník hero, 1179:68764, prefix pc_)
   2) zenturi/pricing-compare (Komplet stránka, 569:26812, prefix pkc_)
   3) TOTO - zenturi/compare-cta (683:49963, prefix cc_) - NESÚVISÍ s cenami,
      je to onboarding CTA panel s checklistom. Vlastný slug/prefix zámerne
      mimo oboch predošlých kolízií.

   Sekcia biela (--color-bg), tenký vonkajší wrapper py=div-padding-small 24
   (rovnaká konvencia ako `zenturi/logo-strip` - vonkajšia sekcia len drží
   padding, vizuálnu váhu nesie panel). Panel = tmavý navy (--color-text
   #023047), radius-xl LEN nahor, padding pt48/pl48/pr48/pb32 (ASYMETRICKÉ -
   pb je nižšie než ostatné 3 strany, over pred zmenou).

   POZOR akcent "Zbytočne." = BIELY, NIE farebný (na rozdiel od bežnej
   konvencie väčšiny nadpisov v téme) - Figma tu nemá secondary-dark/iný
   token na akcente, len iný font-style/weight. Neopravovať na farebný bez
   overenia v Figme.

   Checklist ikona = existujúca knižničná `ico-check-ring` (assets/img/icons/),
   prefarbená na ZELENÚ (success rodina) cez --zn-ico-main/--zn-ico-soft override.
   Detail a dôkaz pri `.zn-cc__item-icon` nižšie. POZOR: do 2026-08-04 tu stálo, že
   „Figma tu má monochrómnu bielu verziu" - nebola to pravda.

   Vlnitý spodný okraj = flattened SVG export (683:50012, curl v prompte pre
   DDEV → assets/img/compare-cta/wave-bottom-navy.svg) - rovnaký princíp ako
   `zenturi/pricing-compare` (žiadny 2×vector + negative-margin CSS trik).

   MOBIL/TABLET: Figma frame pre túto sekciu NENÁJDENÝ v zadaných linkoch -
   implementovaný len desktop + bezpečný generický fallback. Nehádať presné
   hodnoty (viď interné poznámky).
   ══════════════════════════════════════════════════════════════════════════ */

.zn-cc {
  background: var(--color-bg);
  padding-inline: var(--space-16);              /* page-padding 64 */
}
.zn-cc.zn-block { --zn-pt: var(--space-6); --zn-pb: var(--space-6); }  /* div-padding-small 24 */

.zn-cc__container { max-width: 1124px; margin-inline: auto; position: relative; }

.zn-cc__panel {
  position: relative;
  z-index: 2;
  background: var(--color-text);                /* navy #023047 */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;   /* 40 hore */
  padding: var(--space-12) var(--space-12) var(--space-8) var(--space-12);  /* 48/48/32/48 - pb asymetrické */
}

.zn-cc__row { display: flex; align-items: stretch; gap: 40px; }  /* Figma literál 40 */

.zn-cc__col-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                          /* div-padding-small 24 */
}
.zn-cc__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-white);
}
.zn-cc__heading-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);           /* Mix Regular Italic */
  color: var(--color-white);                    /* biely, NIE farebný - viď hlavička */
}
.zn-cc__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);                    /* Size/Medium 18 */
  line-height: 1.5;
  color: var(--color-white);
}
/* CTA = plain .btn default (48/32) - Figma tu má MENŠIE tlačidlo než hero
   (60/52), preto ŽIADNY veľkostný override, na rozdiel od hero-compare. */

/* Figma 683:49970 „Line 89": stroke `#FDE9B4` pri stroke-opacity 0.6 = --color-primary-lighter
   na 60 %. Odčítané priamo z exportovaného SVG assetu toho nodu (2026-08-05). Do vtedy tu bola
   `rgba(255,255,255,.2)` - náš odhad z prvej implementácie bloku, nie Figma hodnota. */
.zn-cc__divider {
  flex: none;
  align-self: stretch;
  width: 1px;
  background: var(--color-primary-lighter);
  opacity: .6;
}

.zn-cc__list {
  flex: none;
  align-self: stretch;
  width: 493px;
  margin: 0;
  padding: var(--space-6);                      /* div-padding-small 24, všetky strany */
  display: flex;
  flex-direction: column;
  justify-content: space-between;               /* Figma: položky rozložené na celú výšku panela */
  list-style: none;
}
.zn-cc__item { display: flex; align-items: flex-start; gap: 12px; padding-block: var(--space-2); }  /* gap 12, py 8 */
/* Checklist ikony = ZELENÉ, nie biele (overené 2026-08-04 stiahnutím vrstiev nodov
   683:49997 / 683:50062 / 683:50069 - všetky tri identické):
     kruh  fill #2C7F09  = Scheme A/Status/Sucess Dark = --color-success-dark, PLNÁ krytie
     obrys + fajka  stroke #49D20E = Scheme A/Status/Sucess = --color-success
   Tokeny potvrdil `get_variable_defs` na RODIČOVI 683:49963 (inštancia ich nenesie).
   Predošlý komentár tvrdil „Figma tu má monochróm biela" — bolo to nepresné a kvôli
   zapečeným farbám v `ico-check-ring.svg` sa to aj tak nikdy neprejavilo (viď v1.23.2). */
.zn-cc__item-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  --zn-ico-main: var(--color-success);
  --zn-ico-soft: var(--color-success-dark);
  --zn-ico-soft-opacity: 1;                     /* Figma kruh nemá fill-opacity - plný disk */
}
.zn-cc__item-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.zn-cc__item-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);                    /* Size/Medium 18 */
  line-height: 1.5;
  color: var(--color-white);
}
.zn-cc__item-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);                    /* Size/Small 14 */
  line-height: 1.5;
  color: var(--color-white);
}

/* Vlnitý spodný okraj - flattened export, škáluje na 100% šírky (rovnaký
   princíp ako pricing-compare, žiadny 2×vector CSS trik). */
.zn-cc__wave { display: block; width: 100%; height: auto; position: relative; z-index: 1; margin-top: -1px; }

/* ══ Tablet (≤1199.98px) - generický medzikrok, Figma preň nemá spec ══ */
@media (max-width: 1199.98px) {
  .zn-cc__row { flex-direction: column; align-items: stretch; gap: var(--space-6); }
  .zn-cc__divider { display: none; }
  .zn-cc__list { width: 100%; }
}

/* ══ Mobil (≤767.98px) - Figma frame pre túto sekciu NENÁJDENÝ v zadaných
   linkoch tejto session - bezpečný fallback, nie presné Figma hodnoty. ══ */
@media (max-width: 767.98px) {
  .zn-cc { padding-inline: var(--space-4); }    /* 16 */
  .zn-cc__panel { padding: var(--space-6) var(--space-4) var(--space-6) var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .zn-cc__heading { font-size: 40px; }
}