/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Compare Related (Figma "Section / Bento 2", node 683:50212,
   stránka "Compare - Zenturi vs " 566:14237)

   POZOR NÁZOV KOLIDUJE s existujúcim `zenturi/bento-2` (Cenník stránka,
   balíky+detailné porovnanie) - úplne INÝ blok/obsah, slug `compare-related`
   (prefix `cr_`) zámerne mimo tejto kolízie.

   Sekcia = gradient pozadie (Figma 2-vrstvové: bg-medium nahor plynulo do
   bielej dole) - blend s predchádzajúcou `section-base` (bg-medium) sekciou
   nad ňou a nasledujúcim `faq-2` (biele) pod ňou. pt=section-small 48,
   pb=section-medium 80, riadky gap 48 (div-padding-large), max-width 1024.

   Riadok = 2 stĺpce (text 500px + 3-bodkový zoznam výhod 444px, gap 80),
   KAŽDÝ riadok (aj posledný) má spodný border (Figma 1:1) + pb 48 pred ním.

   Bodka pri výhode = jednoduchý CSS kruh (Figma "Frame 15967" asset je
   vizuálne rovnaká jednofarebná bodka - nahradené CSS, žiadny nový asset).

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

.zn-cr {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-bg) 100%),
    linear-gradient(90deg, var(--color-bg-medium) 0%, var(--color-bg-medium) 100%);
  padding-inline: var(--space-16);              /* page-padding 64 */
}
.zn-cr.zn-block { --zn-pt: var(--space-12); --zn-pb: var(--space-20); }  /* 48 / 80 */

.zn-cr__container {
  max-width: 1024px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);                         /* div-padding-large 48 */
}

.zn-cr__row {
  display: flex;
  align-items: flex-start;
  gap: 80px;                                    /* Figma literál */
  width: 100%;
  padding-bottom: var(--space-12);              /* 48 */
  border-bottom: 1px solid var(--color-border);
}

.zn-cr__col-text {
  flex: none;
  width: 500px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                          /* div-padding-xsmall 16 */
}
.zn-cr__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-4xl);                    /* Size/H4 32 */
  line-height: 1.3;
  letter-spacing: -.32px;
  color: var(--color-text);
}
.zn-cr__heading em {
  font-style: italic;
  font-weight: var(--weight-tagline);
  font-size: var(--text-base);                   /* 16, menšie než meno konkurenta */
}
.zn-cr__desc {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);                     /* Size/Small 14 */
  line-height: 1.5;
  color: var(--color-text);
}
.zn-cr .zn-cr__cta { height: 40px; }              /* Figma Button 40, .btn default je tiež ~40-48, explicitný pre istotu */

.zn-cr__items {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                           /* div-padding-xsmall 16 */
}
.zn-cr__item { display: flex; align-items: flex-start; gap: 12px; }
.zn-cr__item-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 8px;                               /* zarovnanie na x-height 1. riadku titulku */
  border-radius: 50%;
  background: var(--color-primary);              /* #ffb703 */
}
.zn-cr__item-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zn-cr__item-title {
  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-text);
}
.zn-cr__item-text {
  font-family: var(--font-display);
  font-size: var(--text-sm);                     /* Size/Small 14 */
  line-height: 1.5;
  color: var(--color-text);
}

/* ══ Tablet (≤1199.98px) - generický medzikrok, Figma preň nemá spec ══ */
@media (max-width: 1199.98px) {
  .zn-cr__row { flex-direction: column; gap: var(--space-6); }
  .zn-cr__col-text { width: 100%; }
}

/* ══ Mobil (≤767.98px) - Figma frame NENÁJDENÝ - bezpečný fallback. ══ */
@media (max-width: 767.98px) {
  .zn-cr { padding-inline: var(--space-4); }     /* 16 */
  .zn-cr__heading { font-size: 24px; }
}