/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Porovnávacia tabuľka (Figma „VypocetCeny-R" 768:43664,
   desktop 1440)

   Audit voči `comparison` a `pricing-compare` je v hlavičke template.php.

   Obal: Figma 768:43664 je 1440 × 620,71, kontajner na (80, 16) vysoký
   524,71 (= panel 478 + vlnka 46,71) → px 64 (kontajner max 1280
   vycentrovaný), pt 16, pb 80. Pozadie BIELE - naväzuje na bielu sekciu
   „Čo musí obsahovať faktúra?" nad ňou, takže medzi nimi nie je hrana.

   ⚠️ SPODNÉ ZAOBLENIE OBALU SA NEKOPÍRUJE - je to MŔTVY ZÁPIS.
   Figma má na obale `rounded-bottom 40` + `overflow: clip`, ale nemá to
   čo orezať. Odmerané z renderu 1440 × 621:
     - spodný riadok obalu (y = 618) je po CELEJ šírke čisto biely, vrátane
       rohových oblastí x = 2…79 a x = 1350…1437;
     - kontajner končí na y ≈ 540,7, teda 80 px NAD spodnou hranou obalu
       (to je to `pb 80`), a vodorovne je odsadený o 80 px;
     - keby zaoblenie 40 orezávalo kontajner, na x = 80 by obsah nesmel siahať
       nižšie než y = 500,7 - reálne tam siaha po y = 524.
   Preto sa tu `border-radius` ani `overflow` na obale nezavádza; bol by to
   no-op, ktorý len mätie. Keby budúca inštancia mala obsah až po spodné rohy,
   treba sa k tomu vrátiť.

   MOBIL: Figma frame NEDODANÝ - hodnoty pri @media sú konvencia témy.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-cmt {
  background: var(--color-bg);                  /* biela */
  padding-inline: var(--space-16);              /* Page Padding 64 */
}
.zn-cmt.zn-block {
  --zn-pt: var(--space-4);                      /* div-padding-xsmall 16 */
  --zn-pb: var(--space-20);                     /* section-medium 80 */
}

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

/* Panel: Figma „Component" 768:43666 = 1280 × 478, px 80 / pt 80 / pb 48,
   horné rohy 40, pozadie bg-medium. */
.zn-cmt__panel {
  position: relative;
  z-index: 2;
  background: var(--color-bg-medium);           /* #ecf2f4 */
  padding: var(--space-20) var(--space-20) var(--space-12);   /* 80 / 80 / 48 */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;       /* 40 */
}

/* „div.row" 768:43667 = 1120 × 350, gap 48, items-start. */
.zn-cmt__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);                         /* 48 */
}

/* Ľavý blok „div" 768:43668 = 480 × 226, pt 16 / pb 6, gap 32.
   Kontrola: 16 + 124 (nadpis) + 32 + 48 (tlačidlo) + 6 = 226. ✓ */
.zn-cmt__intro {
  flex: 0 0 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);                          /* 32 */
  padding-block: var(--space-4) 6px;            /* 16 / 6 (6 je Figma literál) */
}
.zn-cmt__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-text);                     /* #023047 */
}
/* Akcent sa líši LEN rezom - farba je tá istá ako nadpis (obe #023047). */
.zn-cmt__heading-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);
  color: inherit;
}
.zn-cmt__actions { display: flex; align-items: center; }

/* ── Tabuľka: tri stĺpce vedľa seba (Figma „Frame 15917" 768:43813) ─────────
   592 × 350, gap 10, items-center. Stredný stĺpec je vyšší (350 vs 318),
   preto `center` posunie krajné o 16 - presne ako Figma. */
.zn-cmt__table {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;                                    /* Figma literál, nie token */
}
.zn-cmt__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Stĺpec popiskov: flex 1 (pri 592 vyjde 292 = 592 − 2 × 140 − 2 × 10). */
.zn-cmt__col--labels { flex: 1 1 0%; min-width: 0; }
.zn-cmt__col--own,
.zn-cmt__col--other { flex: 0 0 140px; }

/* Vyzdvihnutý stĺpec: biele pozadie, rám, radius 16, py 16 a dvojitý tieň.
   Rám cez `box-shadow: inset`, NIE `border`: Figma stroke je INSIDE, kým
   `border` by pri výške danej obsahom pridal 2px (350 → 352) a stĺpec by
   prestal lícovať s krajnými (CLAUDE.md, bento-tabs v1.21.7). Inset rám aj
   vonkajší tieň idú v jednej deklarácii. */
.zn-cmt__col--own {
  background: var(--color-white);
  border-radius: var(--radius-base);            /* 16 */
  padding-block: var(--space-4);                /* 16 */
  box-shadow:
    inset 0 0 0 1px rgba(3, 3, 3, .15),
    0 4px 6px -2px rgba(178, 95, 0, .05),
    0 12px 16px -4px rgba(178, 95, 0, .15);
}

/* Hlavičkový riadok - v 48, padding 8, spodný rám 1px #219ebc.
   Prázdny je len v stĺpci popiskov (Figma „Frame 15919"). */
.zn-cmt__head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: var(--space-2);                      /* 8 */
  border-bottom: 1px solid var(--color-secondary);   /* #219ebc */
}
.zn-cmt__logo { display: block; width: 87px; height: 32px; }
/* „Vzor" - Text/Regular/Semi Bold 16, čierny (nie #023047). */
.zn-cmt__head-text {
  font-family: var(--font-display);
  font-size: var(--text-base);                  /* 16 */
  font-weight: var(--weight-semibold);          /* 650 */
  line-height: 1.5;
  color: var(--color-black);
}

/* Bunka - v 44, spodný rám 1px rgba(3,3,3,.15). Výška je pevná a
   `box-sizing: border-box` (globálne v style.css) drží rám vnútri, takže
   riadok ostáva 44, nie 45. */
.zn-cmt__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 2px var(--space-2);                  /* py 2 / px 8 */
  border-bottom: 1px solid var(--color-border); /* rgba(3,3,3,.15) */
}
/* Popisok: text vľavo, 16 SemiBold čierny, zvisle vycentrovaný.
   Figma: text na (8, 10) v riadku 44 → px 8 a (44 − 24) / 2 = 10. */
.zn-cmt__cell--label {
  justify-content: flex-start;
  padding: 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-base);                  /* 16 */
  font-weight: var(--weight-semibold);          /* 650 */
  line-height: 1.5;
  color: var(--color-black);
  text-align: left;
}

/* ── Značky ✓ / ✗ (obe 40 × 40) ─────────────────────────────────────────────
   ⚠️ FARBY SÚ SCOPNUTÉ NA `.zn-cmt__mark*`, nie globálne - inak by prefarbili
   každú duotone ikonu na webe.

   ✓ `ico-check-ring` na SVETLOM podklade = OBRYSOVÁ (main #2C7F09,
   soft #EEF9E9), teda tá istá sada ako svetlý zoznam v `section-base`.
   NIE navy sada z `checklist-cta` (plný disk) - tá patrí len na tmavé pozadie.
   `soft-opacity` sa musí zdvihnúť na 1, lebo `ico-check-ring.svg` má default
   0,25, ktorý by výplň ešte raz zosvetlil.

   ✗ `ico-close-ring` - NOVÁ ikona, v knižnici nebola. Poskladaná z vektorov
   nodu 768:43845 (detail v jej `<metadata>`). Farby zmerané kompozitne
   na bielej zo 4× exportu: prstenec aj uhlopriečky #EF4738, výplň #FBEFEF.
   Tá ikona `fill-opacity` NEMÁ, preto sa tu ani nenastavuje. */
.zn-cmt__mark { display: block; line-height: 0; }
.zn-cmt__mark-icon { display: block; width: 40px; height: 40px; }
.zn-cmt__mark--yes .zn-cmt__mark-icon {
  --zn-ico-main: #2C7F09;
  --zn-ico-soft: #EEF9E9;
  --zn-ico-soft-opacity: 1;
}
.zn-cmt__mark--no .zn-cmt__mark-icon {
  --zn-ico-main: #EF4738;
  --zn-ico-soft: #FBEFEF;
}
/* Význam bunky pre čítačky (ikona je `aria-hidden`). Vlastná trieda, téma
   `screen-reader-text` nemá. */
.zn-cmt__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Vlnka - farba sa riadi farbou PANELU (#ecf2f4), preto svetlá kópia.
   Prekryv 3,415 % je vlastnosť assetu (CLAUDE.md). */
.zn-cmt__wave {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  margin-top: -1px;
}
.zn-cmt__wave-piece {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 34;
}
.zn-cmt__wave-piece:first-child { margin-right: -3.415%; }

/* ══ Tablet (≤1199.98px) - Figma preň nemá spec ══ */
@media (max-width: 1199.98px) {
  .zn-cmt { padding-inline: var(--space-8); }
  .zn-cmt__panel { padding: var(--space-12) var(--space-8) var(--space-8); }
  .zn-cmt__row { flex-direction: column; gap: var(--space-8); }
  .zn-cmt__intro { flex: 0 0 auto; width: 100%; }
  .zn-cmt__table { width: 100%; }
}

/* ══ Mobil (≤767.98px) - Figma frame NEDODANÝ ═════════════════════════════
   Popisky sa zúžia a stĺpce zoštíhlia, aby sa tri vošli aj do 328.
   Section padding cez `-m`, NIE holé `--zn-pt` (CLAUDE.md). ══ */
@media (max-width: 767.98px) {
  .zn-cmt { padding-inline: var(--space-4); }
  .zn-cmt.zn-block { --zn-pt-m: var(--space-2); --zn-pb-m: var(--space-12); }  /* 8 / 48 */

  .zn-cmt__panel {
    padding: var(--space-6) var(--space-4) var(--space-6);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;      /* 24 */
  }
  .zn-cmt__row { gap: var(--space-6); }
  .zn-cmt__heading { font-size: 2.5rem; }                      /* H1 (mobil) 40 */
  .zn-cmt__intro { padding-block: 0; gap: var(--space-6); }

  .zn-cmt__table { gap: 4px; }
  .zn-cmt__col--own,
  .zn-cmt__col--other { flex: 0 0 72px; }
  .zn-cmt__col--own { padding-block: var(--space-2); }
  .zn-cmt__cell--label { font-size: var(--text-sm); }          /* 14 */
  .zn-cmt__mark-icon { width: 32px; height: 32px; }
  .zn-cmt__logo { width: 64px; height: 23px; }
  /* Prekryv vlnky je na mobile o jednu periódu väčší - rovnaká derivácia
     ako v hero-simple. */
  .zn-cmt__wave-piece:first-child { margin-right: -14.472%; }
}