/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Záverečné CTA (Figma: Section / CTA 3)

   Desktop 1:1: sekcia pt 80 / px 64 / radius 40 hore, container 1280.
   Karta = ľavý stĺpec (flex 50 %, pt 48 / px 48 / pb 140, gap 32)
          + teal panel (640×516, radius 24 hore).
   Panel: vľavo flow stĺpec 212.5 (2 boxy ikona+text), vpravo fotka 411.5×500
          (jeden export z Figmy: osoba + pozadie + podpis; klient mení cez Multimédiá).
   Panel je container query kontext — vnútro (šírky, medzery, ikony, typografia)
   je v cqw, takže pri 640 sedí 1:1 a pod 1280 sa zmenšuje v presnom pomere.

   Mobil (Figma 393): panel 361×587, flow je RIADOK dvoch boxov nad fotkou,
   fotka má vlastnú kompozíciu (cta-person-mobile.webp). Mobil = len media query.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-fcta {
  position: relative;
  background: var(--color-bg-medium);           /* Scheme A/Background Medium */
  --zn-pt: var(--space-20);                     /* Section Padding/section-medium 80 */
  --zn-pb: 0px;                                 /* karta ide na doraz do vlny */
  padding-inline: var(--space-16);              /* Page Padding/padding-global 64 */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;  /* Figma: 40 hore */
  overflow: hidden;                             /* Figma overflow-clip */
}
/* Spacing defaulty cez zn-block var systém (vyššia špecificita než components.css) */
.zn-fcta.zn-block { --zn-pt: var(--space-20); --zn-pb: 0px; }

.zn-fcta__container {
  max-width: var(--container-max);              /* container-large 1280 */
  margin-inline: auto;
}

.zn-fcta__card {
  display: flex;
  align-items: flex-end;                        /* Figma Card items-end */
  overflow: hidden;
}

/* ── Ľavý stĺpec ─────────────────────────────────────────────────────────── */
.zn-fcta__column {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);                          /* Figma Column gap 32 */
  padding: var(--space-12) var(--space-12) var(--space-32);  /* pt 48 / px 48 / pb 140 */
}

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

/* Heading/H1: Season Sans Regular 56/1.1, Scheme A/Text #023047 */
.zn-fcta__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-text);
}
/* Mix Regular Italic */
.zn-fcta__heading-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);
}

/* Text/Medium/Medium: Sans Medium 18/1.5 */
.zn-fcta__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);                    /* Size/Medium 18 */
  font-weight: var(--weight-medium);
  line-height: 1.5;
  color: var(--color-text);
}

/* Zalomenie riadku NERIEŠI tento blok - dodáva ho globálne `[class*="__actions"]
   { flex-wrap: wrap }` v components.css (načítava sa PO blokových CSS, takže tu
   platí bez toho, aby sa opakovalo). Tu sa dopĺňa len centrovanie ZALOMENÝCH
   riadkov: bez neho ostal druhý button zarovnaný vľavo pod prvým.
   Kým sa riadok ZMESTÍ, `justify-content` nemá čo robiť - box je shrink-to-fit
   (stĺpec má `align-items: flex-start`, na mobile `center`), teda presne taký
   široký ako obsah. Overené pixel diffom: pri 1024-1440 a 393 sú všetky stránky
   s `final-cta` bit-identické, mení sa len 768 a 360, kde sa riadok reálne láme. */
.zn-fcta__actions {
  display: flex;
  justify-content: center;
  align-items: center;                          /* obe CTA majú vo Figme výšku 48 → rovnaký optický stred */
  gap: var(--space-4);                          /* Figma Actions gap 16 */
}
/* Šípka buttonu = theme konvencia .btn--arrow (default 32); netreba lokálne pravidlo. */

/* Kratší mobilný variant CTA textu (pole `fc_cta_label_m`). Bez neho sa
   nerenderuje ani jeden span - vzor z feature-dark / zenai-faq. */
.zn-fcta__label--m { display: none; }

/* ── Teal panel ────────────────────────────────────────────── */
.zn-fcta__panel {
  flex: 1 1 50%;
  min-width: 0;
  max-width: 640px;                             /* Figma: 640 pri containeri 1280 */
  aspect-ratio: 640 / 516;
  display: flex;
  background: var(--color-secondary);           /* #219ebc */
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;  /* Figma: 24 hore */
  overflow: hidden;
  container-type: inline-size;                  /* referencia pre cqw vnútra */
}

/* Flow stĺpec: 2 boxy (ikona + text). Figma: w 212.5, pt 32 / px 16 / pb 140, gap 40. */
.zn-fcta__flow {
  margin: 2.5cqw 0 0 2.5cqw;                    /* 16 / 16 */
  width: 33.2031cqw;                            /* 212.5 */
  padding: 5cqw 2.5cqw 21.875cqw;               /* 32 / 16 / 140 */
  display: flex;
  flex-direction: column;
  gap: 6.25cqw;                                 /* 40 */
  list-style: none;
}

.zn-fcta__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5cqw;                                  /* 16 */
  text-align: center;
}
.zn-fcta__item-icon {
  width: 9.375cqw;                              /* 60 */
  height: 9.375cqw;
  flex-shrink: 0;
}
/* Heading/H5: Sans Medium 24/1.4, Scheme A/Text Light */
.zn-fcta__item-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 3.75cqw;                           /* Size/H5 24 */
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--color-white);
}
.zn-fcta__item-text em {
  font-style: italic;
  font-weight: var(--weight-medium);            /* Mix Medium Italic */
}

/* Fotka = jeden obrázok (osoba + pozadie + podpis), Figma 411.5×500 pri x 228.5 / y 16. */
.zn-fcta__person {
  position: relative;
  margin: 2.5cqw 0 0;                           /* 16 */
  width: 64.2969cqw;                            /* 411.5 */
}
.zn-fcta__photo {
  display: block;
  width: 100%;
  height: auto;
}
.zn-fcta__photo--m { display: none; }

/* Meno + pozícia: vo Figme x 259 / y 48.43 → % z fotky */
.zn-fcta__caption {
  position: absolute;
  left: 7.4119%;                                /* (259 − 228.5) / 411.5 */
  top: 6.4858%;                                 /* (48.429 − 16) / 500 */
  display: flex;
  flex-direction: column;
  color: var(--color-text);                     /* #023047 */
  white-space: nowrap;
}
/* Text/Button: Sans SemiBold 16 */
.zn-fcta__caption-name {
  font-family: var(--font-body);
  font-size: 2.5cqw;                            /* 16 */
  font-weight: var(--weight-semibold);
}
/* Text/Tiny/Normal: Sans Regular 12/1.2 */
.zn-fcta__caption-role {
  font-family: var(--font-display);
  font-size: 1.875cqw;                          /* 12 */
  font-weight: var(--weight-regular);
  line-height: 1.2;
}

/* ── Navy vlnovka dole (rotácia 180° = wave-navy-flip.png) ──── */
.zn-fcta__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;                                 /* Figma desktop 56 */
  background: url('../../../assets/img/wave-navy-flip.png') repeat-x bottom left;
  background-size: auto 100%;                   /* 2880×112 → 1440×56 */
  pointer-events: none;
}
/* Prekrytie alfa hrany PNG na spodku (rovnako ako hero) */
.zn-fcta__wave::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-text);
}

/* ══ Mobil (Figma 393 → panel 361×587) ═══════════════════════════════════ */
@media (max-width: 767.98px) {
  .zn-fcta {
    padding-inline: 16px;                       /* padding-global mobilný mód 16 */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;  /* 24 */
  }
  .zn-fcta.zn-block { --zn-pt-m: 48px; --zn-pb-m: 0px; }   /* section-medium mobilný mód 48 */

  .zn-fcta__card { flex-direction: column; align-items: stretch; }

  /* Column: bez bočných paddingov, obsah centrovaný, pb 48 */
  .zn-fcta__column {
    flex: 0 0 auto;
    align-items: center;
    padding: 0 0 48px;
    gap: 32px;
  }
  .zn-fcta__content { align-items: center; }
  .zn-fcta__label--d { display: none; }
  .zn-fcta__label--m { display: inline; }
  .zn-fcta__heading { font-size: 40px; text-align: center; }  /* Size/H1 mobilný mód 40 */
  /* Figma mobil zalamuje nadpis natvrdo: „Ste pripravení" / „získať prehľad?" */
  .zn-fcta__heading-accent { display: block; }
  .zn-fcta__text    { font-size: 16px; text-align: center; }  /* Size/Medium mobilný mód 16 */

  /* Panel: výška z obsahu (16 + flow 160 + fotka), bez cqw škálovania */
  .zn-fcta__panel {
    flex: 0 0 auto;
    max-width: none;
    aspect-ratio: auto;
    flex-direction: column;
  }

  /* Flow = riadok dvoch boxov (Figma: gap 16, pt 20, pb 16, w = panel − 32) */
  .zn-fcta__flow {
    margin: 16px 16px 0;
    width: auto;
    padding: 20px 0 16px;
    flex-direction: row;
    gap: 16px;
  }
  .zn-fcta__item {
    flex: 1 1 0;
    min-width: 0;
    gap: 8px;                                   /* div-padding-xsmall mobilný mód 8 */
  }
  .zn-fcta__item-icon { width: 60px; height: 60px; }
  .zn-fcta__item-text { font-size: 20px; }      /* Size/H5 mobilný mód 20 */

  /* Fotka: mobilná kompozícia, cez celú šírku panela */
  .zn-fcta__person { margin: 0; width: 100%; }
  .zn-fcta__photo--d { display: none; }
  .zn-fcta__photo--m { display: block; }

  /* Meno + pozícia: vo Figme x 20 / y 277 (fotka začína na y 176) */
  .zn-fcta__caption {
    left: 5.5402%;                              /* 20 / 361 */
    top: 24.5742%;                              /* (277 − 176) / 411 */
  }
  .zn-fcta__caption-name { font-size: 16px; }
  .zn-fcta__caption-role { font-size: 12px; }

  .zn-fcta__wave { height: 37px; }              /* Figma mobil 37 */
}