/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Porovnanie (Figma: Section / Header / Blog 1)

   Desktop 1:1: sekcia pt 80 / pb 48 / px 64, container 1280, gap 80 (OPRAVENÉ v1.15.5,
   pôvodná implementácia mala pt/pb prehodené — get_design_context na 569:26567 potvrdil
   `pt-[section-medium,80px] pb-[section-small,48px]`, nie naopak).
   Ľavý stĺpec fixne 420 (justify-between), pravý panel flex 1 (bg #ecf2f4, r24, p24).
   Mriežka: 3 stĺpce (auto / 200 / 180), medzery 10, hlavička 48, riadky 44.
   Zenturi stĺpec = vyvýšená biela karta: kreslená ako ::before pod bunkami tabuľky,
   presahuje o 16 nad a pod ostatné stĺpce (Figma: card py 16, ostatné stĺpce centrované).
   ══════════════════════════════════════════════════════════════════════════ */

.zn-compare {
  background: var(--color-bg);                  /* Color Scheme 1/Background */
  --zn-pt: var(--space-20);                     /* Section Padding/section-medium 80 */
  --zn-pb: var(--space-12);                     /* Section Padding/section-small 48 */
  padding-inline: var(--space-16);              /* Page Padding/padding-global 64 */
}
/* Spacing defaulty cez zn-block var systém (vyššia špecificita než components.css) */
.zn-compare.zn-block { --zn-pt: var(--space-20); --zn-pb: var(--space-12); }

.zn-compare__container {
  display: flex;
  align-items: stretch;
  gap: var(--space-20);                         /* Figma Content gap 80 */
  max-width: var(--container-max);              /* max-width-xxlarge 1280 */
  margin-inline: auto;
}

/* ── Ľavý stĺpec (Section Title) ── */
.zn-compare__column {
  flex: 0 0 420px;                              /* Figma: fixná šírka 420 */
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;               /* Figma justify-between */
}

/* Heading/H1: Season Sans Regular 56/1.1, Color Scheme 1/Text = #000 (NIE #023047) */
.zn-compare__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);
}
/* Mix Regular Italic, Scheme A/Accent/Primary Dark */
.zn-compare__heading-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);
  color: var(--color-primary-dark);
}

/* Text/Regular/Normal 16/1.5, čierna */
.zn-compare__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-black);
}
.zn-compare__text strong { font-weight: var(--weight-bold); }

/* ── Actions: tlačidlá spojené v rámčeku, celková výška 56 ──
   Figma stroke je „inside" (dieťa na y=4 v ráme 56), preto 1px border + 3px padding. */
.zn-compare__actions {
  display: inline-flex;
  align-items: flex-start;
  gap: 16px;
  padding: 4px;                                 /* Figma 523:35246 (pilulka 361×56, padding 4) */
  /* Rám cez inset box-shadow, NIE `border` (CLAUDE.md, precedens bento-tabs v1.21.7):
     Figma stroke je INSIDE, takže 48 + 2×4 padding = 56. CSS `border` by pripočítal 2px
     na výšku aj šírku a pilulka by mala 58. Kresba je identická, radius funguje ďalej. */
  box-shadow: inset 0 0 0 1px var(--color-border);
  border-radius: var(--radius-base);            /* Radius/Base 16 */
}

/* Sekundárne CTA = globálna .btn--link; lokálne gap 0 (text+chevron bez medzery).
   Bez hover teal borderu - „Bežné riešenia" je už podčiarknuté (DS), border by kazil dizajn. */
.btn.zn-compare__cta-secondary { gap: 0; }
.btn.zn-compare__cta-secondary:hover { border-bottom-color: transparent; }
.btn.zn-compare__cta-secondary .zn-compare__cta-chevron {
  color: #222222;                               /* Figma token fill_icon (chevron dole) */
}
/* „Bežné riešenia" = textové podčiarknutie (súčasť obsahu, vždy); hover pridáva
   teal spodný border z globálnej .btn--link (DS Link hover) - aditívne, bez skoku. */
.zn-compare__cta-secondary-target { text-decoration: underline; }
/* Mobil má vo Figme skrátený text CTA („Zenturi vs bežné") */
.zn-compare__cta-secondary-target--mobile { display: none; }

/* ── Pravý panel ── */
.zn-compare__panel {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-bg-medium);           /* Scheme A/Background Medium */
  border-radius: var(--radius-lg);              /* Radius/Large 24 */
  padding: var(--space-6);                      /* div-padding-small 24 */
}

/* Mriežka: padding 16 hore/dole = presah bielej karty */
.zn-compare__grid {
  position: relative;
  padding-block: 16px;
}

/* Zenturi karta: 200 široká, prilepená k 3. stĺpcu (180 + medzera 10) */
.zn-compare__grid::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block: 0;
  right: 190px;
  width: 200px;
  background: var(--color-bg);                  /* Scheme A/Foreground */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);            /* Radius/Base 16 */
  /* Figma efekt „medium" — tieň tónovaný do A/Opacity/Primary Dark (#b25f00) */
  box-shadow: 0 4px 6px -2px rgba(178, 95, 0, .05), 0 12px 16px -4px rgba(178, 95, 0, .15);
}

/* ── Tabuľka ── */
.zn-compare__table {
  position: relative;
  z-index: 1;
  table-layout: fixed;
  width: calc(100% + 20px);
  margin: -10px;                                /* zrušenie vonkajšieho border-spacing */
  border-collapse: separate;
  border-spacing: 10px;                         /* Figma gap 10 (medzi stĺpcami aj riadkami) */
  font-family: var(--font-display);
}
.zn-compare__col--zenturi { width: 200px; }
.zn-compare__col--other   { width: 180px; }

/* Oddeľovače kreslíme cez inset box-shadow, nie border — vo Figme je stroke „inside",
   t.j. nesmie pripočítať výšku riadku (border by z 44 spravil 45). */
.zn-compare__table th,
.zn-compare__table td {
  height: 44px;                                 /* Figma riadok 44 (ikona 40 + 2+2) */
  padding: 8px;
  vertical-align: middle;
  text-align: center;
  font-size: var(--text-base);                  /* Size/Regular 16 */
  line-height: 1.5;
  color: var(--color-black);
  box-shadow: inset 0 -1px 0 var(--color-border);
}
.zn-compare__table thead th {
  height: 48px;                                 /* Figma hlavička 48 */
  box-shadow: inset 0 -1px 0 var(--color-secondary); /* Scheme A/Accent/Secondary #219ebc */
}
.zn-compare__table tbody tr:last-child > * { box-shadow: none; }

/* Bunky s ikonami: Figma padding 2/8 (ikona 40 + 2+2 = riadok 44) */
.zn-compare__table .zn-compare__td-zenturi,
.zn-compare__table .zn-compare__td-other { padding: 2px 8px; }

.zn-compare__table .zn-compare__th-label {
  text-align: left;
  font-weight: var(--weight-regular);           /* Text/Regular/Normal */
}
.zn-compare__table .zn-compare__td-label {
  text-align: left;
  font-weight: var(--weight-semibold);          /* Text/Regular/Semi Bold */
}
.zn-compare__table .zn-compare__th-other {
  font-weight: var(--weight-semibold);
  white-space: nowrap;                          /* Figma: hlavička sa nezalamuje */
}

/* Mobilný riadok hlavičky (logo cez oba stĺpce karty) sa zapína až v mobil MQ */
.zn-compare__head--mobile { display: none; }

.zn-compare__logo {
  display: block;
  width: 87px;
  height: 32px;
  margin-inline: auto;
}

/* ── Ikony áno/nie (duotone podľa palety) ── */
.zn-compare__icon {
  display: block;
  width: 40px;
  height: 40px;
  margin-inline: auto;
}
.zn-compare__icon--yes {
  --zn-ico-face: var(--color-success-light);
  --zn-ico-line: var(--color-success-dark);
}
.zn-compare__icon--no {
  --zn-ico-face: var(--color-error-light);
  --zn-ico-line: var(--color-error);
}
.zn-compare__icon circle {
  fill: var(--zn-ico-face);
  stroke: var(--zn-ico-line);
}
.zn-compare__icon path { stroke: var(--zn-ico-line); }

.zn-compare__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Responzivita (mobilná verzia sa dorába podľa Figmy samostatne) ── */
@media (max-width: 1199.98px) {
  .zn-compare__container {
    flex-direction: column;
    align-items: stretch;
  }
  .zn-compare__column {
    flex: 0 0 auto;
    max-width: 100%;
    gap: var(--space-6);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIL (rám 393). Hodnoty z `get_variable_defs`
   (mobilný mód tokenov), NIE z JSX fallbackov: H1 40, Size/Small 14,
   padding-global 16, section-small 32 (pt), section-medium 48 (pb),
   div-padding-xsmall 8.

   Kľúčová zmena oproti desktopu: biela karta kryje UŽ DVA stĺpce — text funkcie
   aj Zenturi ikonu (šírka 211 = 8 + 145 + 10 + 40 + 8).
   „Bežné riešenia" ostáva vedľa karty. Hlavička karty = len logo, bez textu
   1. stĺpca → v tabuľke samostatný `<tr>` s `colspan="2"`.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .zn-compare { padding-inline: 16px; }                    /* padding-global 16 */
  .zn-compare.zn-block { --zn-pt-m: 32px; --zn-pb-m: 48px; } /* section 32 / 48 */

  .zn-compare__container { gap: 42px; }                    /* Content gap 42 */
  .zn-compare__column {
    width: 100%;
    justify-content: flex-start;
    gap: 16px;                                             /* Section Title gap 16 */
  }
  .zn-compare__heading { font-size: 40px; }                /* Size/H1 mobilný mód */

  /* Actions: plná šírka, gap 8; sekundárne CTA dopĺňa zvyšok riadku */
  .zn-compare__actions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
  }
  /* Priamym flex potomkom `.zn-compare__actions` je od v1.22.0 obal `.zn-compare__switch`
     (dropdown), nie samotný `.btn` — pravidlá musia mieriť naň, inak trigger nerastie ani
     nezmršťuje. `.btn` variant ostáva pre prípad, že blok beží bez konkurentov
     (vtedy je sekundárne CTA priamo odkaz).

     `min-width: max-content`, NIE `min-width: 0` + `flex-basis: 0`: pri pevnom podiele
     riadka dostal trigger 166px, ale s dlhším menom konkurenta mal obsah 182px a keďže
     `overflow` je `visible`, text sa vykreslil MIMO zaoblený rám — žiadny scrollbar,
     žiadne orezanie, len pretečený text cez okraj pilulky. Takto sa buď obe tlačidlá
     zmestia vedľa seba (krátke mená = stav z Figmy), alebo sekundárne spadne na druhý
     riadok. Pretečenie tým nevznikne pri žiadnej dĺžke mena, a mená konkurentov sa
     podľa dizajnu neskracujú. */
  .btn.zn-compare__cta-secondary,
  .zn-compare__switch { flex: 1 1 auto; min-width: max-content; }
  .zn-compare__actions > .btn--primary { flex: 0 1 auto; min-width: max-content; }
  .zn-compare__switch .btn.zn-compare__cta-secondary { width: 100%; }
  .zn-compare__cta-secondary-target--desktop { display: none; }
  .zn-compare__cta-secondary-target--mobile { display: inline; }

  /* Box: padding 8 (div-padding-xsmall v mobilnom móde) */
  .zn-compare__panel { padding: 8px; }
  .zn-compare__grid { padding-block: 8px; }

  /* Karta kryje 1. + 2. stĺpec: 153 + medzera 10 + 48 = 211 */
  .zn-compare__grid::before {
    left: 0;
    right: auto;
    width: 211px;
  }

  .zn-compare__col--label   { width: 153px; }              /* 8 + text 145 */
  .zn-compare__col--zenturi { width: 48px; }               /* ikona 40 + 8 */
  .zn-compare__col--other   { width: auto; }               /* zvyšok (pri 393 = 124) */

  .zn-compare__head--desktop { display: none; }
  .zn-compare__head--mobile  { display: table-row; }

  .zn-compare__table thead th { height: 52px; }            /* Figma hlavička 52 */
  .zn-compare__table th,
  .zn-compare__table td { height: 46px; }                  /* riadok 46 (2 riadky textu 42 + 2+2) */

  /* Text funkcie a Zenturi ikona sú vo Figme jeden flex riadok (px 8, gap 10) —
     v tabuľke tomu zodpovedá zrušenie priľahlých paddingov medzi bunkami. */
  .zn-compare__table .zn-compare__td-label {
    padding: 2px 0 2px 8px;
    font-size: var(--text-sm);                             /* Size/Small 14 */
    font-weight: var(--weight-regular);                    /* Text/Small/Normal */
  }
  .zn-compare__table .zn-compare__td-zenturi { padding: 2px 8px 2px 0; }
  .zn-compare__table .zn-compare__td-other   { padding: 2px 8px; }
}

/* ── Veľmi úzke mobily (< 375): CTA stack pod seba ──
   Primárne (~179) + sekundárny obsah (~149, white-space:nowrap) + medzery sa pod
   ~375px nezmestia vedľa seba → sekundárny text pretekal a PREKRÝVAL primárne
   tlačidlo (a rám pretekal viewport). Fix: stack pod seba, obe plná šírka; sekundárne
   ostáva VYCENTROVANÉ (justify-center z .btn base). Na ≥375 (vrátane Figma 393)
   ostáva vedľa seba 1:1 s dizajnom. */
@media (max-width: 374.98px) {
  .zn-compare__actions { flex-direction: column; }
  .zn-compare__actions > .btn,
  .zn-compare__actions > .zn-compare__switch { width: 100%; }
  .btn.zn-compare__cta-secondary,
  .zn-compare__switch { flex: 0 0 auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Prepínač konkurentov (CPT `zenturi_solution`) — chevron rozbalí zoznam.
   Ikony ✓/✗ sú v bunke obe, prepína ich trieda `is-no` (JS neinjektuje SVG).
   ══════════════════════════════════════════════════════════════════════════ */
.zn-compare__td-other .zn-compare__icon-no,
.zn-compare__td-other.is-no .zn-compare__icon-yes { display: none; }
.zn-compare__td-other.is-no .zn-compare__icon-no  { display: inline-flex; }

.zn-compare__switch { position: relative; }
/* Chevron sa pri otvorení otočí — rovnaká konvencia ako accordiony v téme. */
.zn-compare__switch.is-open .zn-compare__cta-chevron { transform: rotate(180deg); }
.zn-compare__cta-chevron { transition: transform var(--transition-base); }

.zn-compare__switch-list {
  position: absolute;
  z-index: 2;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);            /* 12 */
  box-shadow: var(--shadow-md);
}
.zn-compare__switch-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);            /* 8 */
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.5;
  text-align: left;
  color: var(--color-text);
  transition: background var(--transition-fast);
}
.zn-compare__switch-item:hover,
.zn-compare__switch-item:focus-visible { background: var(--color-bg-medium); }
.zn-compare__switch-item[aria-selected="true"] { font-weight: var(--weight-bold); }

@media (max-width: 767.98px) {
  .zn-compare__switch-list { left: auto; right: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Otvorený dropdown na MOBILE — ⚠️ NAŠE UX RIEŠENIE, NIE FIGMA HODNOTY.
   Otvorený stav pre mobil v dizajne neexistuje (rovnaká situácia ako anti-jump
   rezerva v bento-tabs — vlastná vrstva, ktorú Figma nekreslí). Ak Ján dodá
   mobilný návrh, tieto hodnoty sa nahradia jeho.

   Rozhodnutia a dôvody:
   - Panel na šírku CELEJ pilulky (nie triggera): pri kotvení na trigger vychádzal
     220px panel mimo obrazovku (@375 mal x = −51). Kotvenie sa robí cez
     `position: static` na `.zn-compare__switch`, takže offset parent je riadok
     akcií — bez zmeny markupu.
   - Radius 16 = radius pilulky (zhodný vizuál), rám cez inset box-shadow
     rovnako ako pilulka, aby nepribúdal 1px na rozmeroch.
   - Položky min 44px = odporúčaná dotyková plocha (pilulka má 48, takže to
     v riadku nevytŕča).
   - Vybraná položka má podfarbenie + tučný rez, aby sa dala rozoznať bez farby.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .zn-compare__actions { position: relative; }
  .zn-compare__switch  { position: static; }

  .zn-compare__switch-list {
    left: 0;
    right: 0;
    min-width: 0;
    top: calc(100% + 8px);
    padding: 6px;
    border: 0;
    border-radius: var(--radius-base);          /* 16 — ako pilulka */
    box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-md);
  }
  .zn-compare__switch-item {
    display: flex;
    align-items: center;
    min-height: 44px;                            /* dotyková plocha */
    padding: 10px 12px;
    border-radius: var(--radius-md);             /* 12 — ako žlté tlačidlo */
  }
  .zn-compare__switch-item[aria-selected="true"] {
    background: var(--color-bg-medium);
  }
}