/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - CTA karta s obrázkom (Figma „Section / CTA 1" 768:43352,
   desktop 1440)

   Audit voči `final-cta` / `compare-cta` / `media-cta` je v hlavičke
   template.php. Zdieľané ostáva: tokeny, `.btn--white`, helpery.

   Sekcia: Figma 768:43352 je 1440 × 522,67, kontajner na (80, 48) vysoký
   426,67 → px 64 (kontajner max 1280 vycentrovaný), py 48. Pozadie BIELE
   (`--scheme-a/background-light`), teda `--color-bg` - rovnaké ako sekcia
   s videom nad ňou, takže medzi nimi nevzniká žiadna hrana.

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

.zn-ctc {
  background: var(--color-bg);                  /* Scheme A/Background Light #ffffff */
  padding-inline: var(--space-16);              /* Page Padding/padding-global 64 */
}
.zn-ctc.zn-block {
  --zn-pt: var(--space-12);                     /* Section Padding/section-small 48 */
  --zn-pb: var(--space-12);
}

/* Kontajner nesie zaoblenie aj orez - Figma „Container" I768:43352;14:1867
   má `rounded-16` + `overflow-clip`, karta vnútri je hranatá a orezáva ju až on. */
.zn-ctc__container {
  max-width: var(--container-max);              /* Container/container-large 1280 */
  margin-inline: auto;
  border-radius: var(--radius-base);            /* Radius/base 16 */
  overflow: hidden;
}

/* Karta: navy, 1px rám `rgba(253,233,180,0.6)`, `items-center`.

   Rám cez `box-shadow: inset`, NIE `border`: Figma stroke je INSIDE, kým
   `border` by pri výške danej obsahom pridal 2px (426,67 → 428,67) a karta
   by prestala sedieť s obrázkom, ktorý jej výšku určuje (CLAUDE.md,
   nález bento-tabs v1.21.7). Polopriehľadná farba sa inset tieňom vykreslí
   rovnako ako borderom. */
.zn-ctc__card {
  display: flex;
  align-items: center;
  background: var(--color-text);                /* Scheme A/Foreground #023047 */
  box-shadow: inset 0 0 0 1px rgba(253, 233, 180, .6);
  overflow: hidden;
}

/* Ľavý stĺpec: Figma „Column" 640 × 360 = presná polovica karty, padding 48, gap 32.
   Kontrola skladby: 48 + 184 (Content) + 32 + 48 (tlačidlo) + 48 = 360. ✓

   ⚠️ `flex-basis: 50%`, NIE `0%`. Pri `flex: 1 1 0%` sa padding pripočíta NAD
   nulový základ (aj pri `box-sizing: border-box` je podlahou šírky práve on),
   takže z 1280 ostane na rozdelenie len 1280 − 96 = 1184 → stĺpec vyjde
   592 + 96 = 688 a obrázok 592. Namerané presne tak, kým tu bola nula.
   S 50 % niet čo rozdeľovať a obe polovice sú rovných 640. */
.zn-ctc__column {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-8);                          /* 32 */
  padding: var(--space-12);                     /* div-padding-large 48 */
}

.zn-ctc__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);                          /* 24 */
  width: 100%;
}

/* Heading/H2 48 / 1.1, biely. Akcent tu NIE JE - celý nadpis je jedna farba,
   preto blok ani nemá pole na akcentovú časť. */
.zn-ctc__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-6xl);                   /* Size/H2 48 */
  line-height: 1.1;
  color: var(--color-white);
}
/* Text/Medium/Normal 18 / 1.5, biely. */
.zn-ctc__text {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--text-lg);                    /* Size/Medium 18 */
  line-height: 1.5;
  color: var(--color-white);
}

/* Figma „Actions" gap 16. Tlačidlo = globálna `.btn.btn--white` bez odchýlky
   (biele pozadie aj rám, text 16/650 čierny, v 48, px 16 / py 10, radius 12) -
   presne DS light variant pre tmavé pozadie. */
.zn-ctc__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);                          /* 16 */
}

/* Obrázok: Figma „Aspect ratio=3:2" = flex 1 (teda 640 z 1280), pomer 3:2,
   `object-cover`, orez rieši karta. Výška karty je odvodená OD NEHO
   (640 × 2/3 = 426,67), preto sa nezadáva - stačí pomer.

   POZN. k assetu: pravé rohy má zapečené biele zaoblenie (je to výrez z 2×
   exportu nodu, kde ho už orezal `overflow-clip` kontajnera). CSS klipuje
   tie isté rohy tým istým 16px radiusom, takže sa prekryjú a nevidno ich.
   Keby sa radius kontajnera niekedy zmenil, bude treba čistý export. */
.zn-ctc__visual {
  flex: 1 1 50%;                                /* druhá presná polovica - viď stĺpec */
  min-width: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.zn-ctc__visual-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ══ Tablet (≤1199.98px) - Figma preň nemá spec ══ */
@media (max-width: 1199.98px) {
  .zn-ctc { padding-inline: var(--space-8); }
  .zn-ctc__column { padding: var(--space-8); gap: var(--space-6); }
}

/* ══ Mobil (≤767.98px) - Figma frame NEDODANÝ ═════════════════════════════
   Karta stackuje na stĺpec, obrázok ide na plnú šírku NAD text (v DOM je
   text prvý, preto `order`). Hodnoty podľa konvencie témy: page-padding 16,
   padding karty 24. Section padding cez `-m`, NIE holé `--zn-pt` (CLAUDE.md). ══ */
@media (max-width: 767.98px) {
  .zn-ctc { padding-inline: var(--space-4); }
  .zn-ctc.zn-block { --zn-pt-m: var(--space-6); --zn-pb-m: var(--space-6); }   /* 24 */

  .zn-ctc__card { flex-direction: column; align-items: stretch; }
  .zn-ctc__column { padding: var(--space-6); gap: var(--space-6); }
  .zn-ctc__heading { font-size: 2rem; }         /* Size/H2 (mobil) 32 */
  .zn-ctc__text { font-size: var(--text-base); }
  .zn-ctc__visual { order: -1; }                /* obrázok nad textom */
}