/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Compare Bento (Figma "Section / Bento 1", node 566:14242,
   stránka "Compare - Zenturi vs " 566:14237)

   TRI podčasti v 1 Lazy Blocku (rovnaká konvencia ako bento-2 - viac vizuálne
   odlišných komponentov v jednej Figma "Section" = 1 blok):
     1) .zn-cb__fc    - porovnanie funkcií (label stĺpec + 2 cenové karty)
     2) .zn-cb__usp   - 3× USP pruh (ikona + nadpis + text)
     3) .zn-cb__test  - recenzie konkurenta (nadpis+text + testimonial slider)
   Sekcia biela (--color-bg, NIE bg-medium), gap medzi podčasťami = section-
   large 112 (Figma "flex-col gap-[112px]"), pt=section-small 48 / pb=
   section-medium 80.

   1) Zarovnanie riadkov medzi label stĺpcom a OBOMA cenovými kartami: Figma
   drží "hlavičkovú zónu" (label: mini-header+hr; karta: logo/cena/tlačidlo+hr)
   na ROVNAKEJ výške 200px napriek úplne inému obsahu - `min-height:200px`
   na `.zn-cb__fc-labels-head` (flex space-between, hr dole) aj
   `.zn-cb__fc-card-head` (plain block, hr ako sibling za ním) replikuje
   presne tento trik, takže riadky fajok/pomlčiek (24px + gap 8, rovnaké
   v labeloch aj v oboch kartách) sedia 1:1 vo všetkých 3 stĺpcoch.

   POZOR "UP-ico-Minus" (známa pasca): Figma layer/komponent názov
   zavádza (interne "eva:close-outline" + rotate 45°), VIZUÁLNE (screenshot)
   ide o jednoduchú horizontálnu pomlčku - implementované podľa vizuálu.
   Farby ikon: fajka = `--color-primary-dark` (#fb8500, podľa screenshotu OBE
   karty rovnako oranžové, nie zelené), pomlčka = svetlosivá #dbdbdb (rovnaký
   literál ako `.zn-pkc__hr`/`.zn-b2` divider inde v téme).

   Karta Zenturi = zvýraznená (border/shadow rovnaké ako bento-2/pricing-
   compare featured karta, ale TU vlastný žltý border+bg podľa Figmy - iný
   token set než bento-2/pricing-compare, viď .zn-cb__fc-card--featured).
   Zenturi logo = existujúci theme asset `logo-zenturi-outline.svg` (rovnaký
   ako `zenturi/comparison`), NIE nový export z Figmy.

   3) Testimonial slider = JS vzor 1:1 skopírovaný z `zenturi/customers`
   (assets/script.js, generický [data-zn-slider]/[data-zn-slide] systém),
   len s vlastnými .zn-cb__test-* class names (žiadny cross-block class
   zdieľanie - konvencia tejto témy je 1 script.js per blok, nie shared JS).

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

.zn-cb {
  background: var(--color-bg);
  padding-inline: var(--space-16);              /* page-padding 64 */
}
.zn-cb.zn-block { --zn-pt: var(--space-12); --zn-pb: var(--space-20); }  /* 48 / 80 */

.zn-cb__container {
  max-width: 1024px;                            /* Figma max-w-[1024px], užšie než container-max 1280 */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);                         /* section-large 112 */
}

/* ── 1) Porovnanie funkcií ── */
.zn-cb__fc { display: flex; align-items: flex-start; width: 100%; }

.zn-cb__fc-labels { flex: none; width: 400px; padding-block: 6px; }
.zn-cb__fc-labels-head {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: var(--space-4);                 /* div-padding-xsmall 16 */
}
.zn-cb__fc-label-title {
  margin: 0;
  padding-block: 12px;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-2xl);                    /* Size/H6 20 */
  line-height: 1.4;
  color: var(--color-text);
}
.zn-cb__fc-labels .zn-cb__fc-hr { width: 100%; height: 1px; margin: 0; border: 0; background: #dbdbdb; }

.zn-cb__fc-labels-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-6) 0 var(--space-6) var(--space-4);  /* py 24, pl 16 */
}
.zn-cb__fc-row-label {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  font-family: var(--font-display);
  font-size: var(--text-base);                   /* Size/Regular 16 */
  line-height: 1.5;
  color: #474747;                                 /* Figma literál riadkov */
}
.zn-cb__row-info { flex-shrink: 0; color: #474747; }

.zn-cb__fc-cards { flex: 1 1 0; min-width: 0; display: flex; gap: 8px; }

.zn-cb__fc-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--space-6);                /* div-padding-small 24 */
  padding-block: 6px;
  border-radius: var(--radius-md);               /* 12 */
  background: var(--color-white);
  border: 2px solid var(--color-border);
  overflow: hidden;
}
.zn-cb__fc-card--featured {
  background: rgba(253, 233, 180, .2);           /* Scheme A/Icon/Opacity-20 */
  border: 2px solid var(--color-primary-dark);   /* #fb8500 */
  box-shadow: 0 20px 24px -4px rgba(178, 95, 0, .1), 0 8px 8px -4px rgba(178, 95, 0, .05);
}

.zn-cb__fc-card-head { width: 100%; min-height: 200px; }
.zn-cb__fc-card-top { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-6) 0 var(--space-2); }
.zn-cb__fc-logo { display: block; height: 34px; width: auto; }
.zn-cb__fc-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  color: var(--color-text);
  text-align: center;
}
.zn-cb__fc-card-name--competitor {
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: var(--text-4xl);                     /* Size/H4 32 */
  letter-spacing: -.32px;
}
.zn-cb__fc-card-tier {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  color: var(--color-text);
  text-align: center;
}
.zn-cb__fc-price {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-text);
  text-align: center;
}
.zn-cb__fc-price--competitor { color: var(--color-secondary); }  /* #219ebc */
.zn-cb__fc-price-value { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-3xl); }  /* Size/H5 24 */
.zn-cb__fc-price-cur { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-3xl); }
.zn-cb__fc-price-period { font-family: var(--font-display); font-size: var(--text-sm); color: inherit; }

/* CTA v Zenturi karte = Figma 566:14311 (v „Price Column" 566:14302): **260x40**, text 132
   centrovaný (x=64, teda 64 vľavo aj vpravo) a OBE ikony `Icon / Relume` sú `hidden` — žiadna
   šípka. Karta má vo Figme 260, takže 260 = plná šírka karty → `width: 100%`.
   ⚠️ v1.23.4 to omylom prestavila na 240x48 + `.btn--arrow` podľa nodu **683:50049**, lenže ten
   patrí inému tlačidlu (compare-cta). Vrátené 2026-08-04; pri zmene tohto tlačidla si vždy over,
   že node je naozaj z „Price Column", nie z CTA panela. */
.zn-cb .zn-cb__fc-btn { width: 100%; height: 40px; margin-top: 8px; }

.zn-cb__fc-card .zn-cb__fc-hr { width: 100%; height: 1px; margin: 0; border: 0; background: #dbdbdb; }

.zn-cb__fc-checks {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--space-6);                        /* 24 */
}
.zn-cb__fc-check { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; }
.zn-cb__check-icon--yes { color: var(--color-primary-dark); }   /* #fb8500 - fajka rovnaká farba v OBOCH kartách */
.zn-cb__check-icon--no  { color: var(--color-text-secondary); }  /* #75878f - Figma Text Secondary (566:14284) */

/* ── 2) USP pruh ── */
.zn-cb__usp { display: flex; gap: var(--space-8); width: 100%; }
.zn-cb__usp-item { flex: 1 1 0; min-width: 0; display: flex; gap: 12px; padding-block: var(--space-2); }
/* Figma 683:50148 má výplň kruhu PLNÚ `#fbd26a` (Icon/Medium) - namerané z renderu,
   u nás vychádzala `#fef4da`, teda tá istá farba pri knižničnej `fill-opacity: .25`.
   Zosilňuje sa len tu, cez premennú, aby sa nehla tá istá ikona v `compare-cta`
   a `section-base` (tam je správna hodnota zatiaľ neoverená - viď changelog). */
.zn-cb__usp-icon { width: 40px; height: 40px; flex-shrink: 0; --zn-ico-soft-opacity: 1; }
.zn-cb__usp-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; color: var(--color-text); }
.zn-cb__usp-heading { margin: 0; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-3xl); line-height: 1.4; }  /* Size/H5 24 */
.zn-cb__usp-text { margin: 0; font-family: var(--font-display); font-size: var(--text-sm); line-height: 1.5; }

/* ── 3) Recenzie konkurenta ── */
/* Gap 80 je Figma literál (683:50075) a musí byť FIXNÝ, nie fluidný token: kontajner má
   pevných 1024 a oba stĺpce sú `flex: none` (500 + 444 = 944), takže gap je jediné, čo
   dopĺňa šírku do 1024. Fluidný `--space-20` (clamp 48→80) dával 80 až od 1600px a nižšie
   nechával slider odsadený od pravej hrany kontajnera (pri 1200 až o 14px). */
.zn-cb__test { display: flex; gap: 80px; width: 100%; }

/* `justify-content: center` = Figma má textový stĺpec (683:50076, 149 vysoký) vertikálne
   vycentrovaný v 242 vysokej sekcii, y=46.5. Pri terajšom placeholder obsahu to nie je vidieť
   (stĺpec je vyšší než slider a určuje výšku riadka), prejaví sa až pri dlhších recenziách. */
.zn-cb__test-col { flex: none; width: 500px; display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); color: var(--color-text); }
.zn-cb__test-heading { margin: 0; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-5xl); line-height: 1.1; }  /* Size/H3 40 */
.zn-cb__test-text { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.5; }  /* Size/Medium 18 */

.zn-cb__test-slider { flex: none; width: 444px; display: flex; flex-direction: column; gap: 10px; }  /* Figma literál 10 (karta 683:50081 → Content 683:50082 na y=194) */

/* `overflow-x: auto` robí z tracku scroll kontajner, ktorý ORezáva aj zvislo (computed
   `overflow-y` sa stane `auto`) — a jeho box je presne box karty, takže `box-shadow` karty
   nemal kde vykresliť a bol NEVIDITEĽNÝ, hoci v CSS deklarovaný. Padding mu dá miesto,
   záporný margin vráti pôvodné rozmery a pozíciu. Rozsah tieňa (0 12px 23.5px): dole
   12 + 23.5/2 = 23.75 → 24, do strán 23.5/2 = 11.75 → 12, hore 0 (posun nadol ho drží
   pod hornou hranou). Vodorovný padding 2×12 = 24 = `gap`, takže `step()` v script.js
   (šírka karty + gap) ostáva zhodný s `clientWidth` a snap pozície sedia. */
.zn-cb__test-track {
  display: flex;
  gap: var(--space-6);
  margin: 0 -12px -24px;
  padding: 0 12px 24px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 12px;   /* snapport = padding box, bez tohto by sa karta zarovnala
                                    na jeho hranu a celý slider by sedel o 12px vľavo */
  scrollbar-width: none;
}
.zn-cb__test-track::-webkit-scrollbar { display: none; }
@media (pointer: fine) { .zn-cb__test-track { cursor: grab; } }
.zn-cb__test-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }

.zn-cb__test-card {
  flex: 1 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                            /* 16 */
  padding: var(--space-6);                         /* 24 */
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 23.5px 0 rgba(5, 57, 69, .1);
}
.zn-cb__test-quote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-tagline);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
}
.zn-cb__test-author {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-text);
}

.zn-cb__test-nav { display: flex; align-items: center; justify-content: space-between; }
.zn-cb__test-dots { display: flex; gap: 8px; }
.zn-cb__test-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--color-text); opacity: .2; cursor: pointer; }
.zn-cb__test-dots button.is-active { opacity: 1; }
.zn-cb__test-arrows { display: flex; gap: var(--space-4); }  /* 16 */
.zn-cb__test-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);           /* 12 */
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
}
.zn-cb__test-arrow:hover:not(:disabled) { background: var(--color-bg-medium); }
.zn-cb__test-arrow:disabled { opacity: .35; cursor: default; }

/* ══ Tablet (≤1199.98px) - generický medzikrok, Figma preň nemá spec ══ */
@media (max-width: 1199.98px) {
  .zn-cb__fc { flex-direction: column; gap: var(--space-6); }
  .zn-cb__fc-labels { width: 100%; }
  .zn-cb__fc-labels-head { min-height: 0; }
  .zn-cb__fc-cards { width: 100%; }

  .zn-cb__usp { flex-direction: column; gap: var(--space-6); }

  /* Stackované - fixných 80 tu nedáva zmysel, vraciame fluidný odstup (clamp 48→80). */
  .zn-cb__test { flex-direction: column; gap: var(--space-20); }
  .zn-cb__test-col { width: 100%; }
  .zn-cb__test-slider { 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-cb { padding-inline: var(--space-4); }     /* 16 */
  .zn-cb.zn-block { --zn-pt-m: 32px; --zn-pb-m: 32px; }

  .zn-cb__container { gap: var(--space-16); }    /* 64 */

  .zn-cb__fc-cards { flex-direction: column; }
  .zn-cb__fc-card { width: 100%; }

  .zn-cb__test-col { width: 100%; }
  .zn-cb__test-slider { width: 100%; }
}