/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Zen AI + FAQ
   Mobil = rám 393.

   Sekcia = centrovaný stĺpec: hlavička → Zen AI dekor → chat mock + otázky.
   Dekor (nápis, tag, sparkle, glow) aj chat sú jeden spojený celok: dekor má
   pevný rám 372×138, ale jeho vrstvy z neho zámerne PRETEKAJÚ (glow siaha
   ~89 nad rám a ~285 pod neho, teda až za chat) — preto sú absolútne
   pozicované presnými offsetmi z Figmy a sekcia má overflow: hidden.

   Mobil = tá istá kompozícia, len rám dekoru je vyšší (181) a všetky vrstvy
   sú posunuté o +24.287 (--zn-decor-shift).

   Chat aj otázky sú zatiaľ NEinteraktívne (Figma nedefinuje správanie).
   ══════════════════════════════════════════════════════════════════════════ */

.zn-zfaq {
  position: relative;
  overflow: hidden;                             /* orezáva presahujúci glow po okraje sekcie */
  padding-inline: var(--space-16);              /* padding-global 64 */
  /* Figma: radiálny prechod (ellipse 50%×50%) cez bielu, celková opacity 0.37 */
  background:
    radial-gradient(ellipse 50% 50% at 50% 50%,
      rgba(142, 202, 230, .37) 0%,
      rgba(199, 229, 243, .37) 50%,
      rgba(255, 255, 255, .37) 100%),
    var(--color-bg);
}
/* Spacing cez zn-block var systém (components.css sa načítava PO blokovom CSS) */
.zn-zfaq.zn-block {
  --zn-pt: var(--space-20);                     /* section-medium 80 */
  --zn-pb: var(--space-24);                     /* section-large 112 */
  --zn-pt-m: 48px;                              /* mobilný mód: section-medium 48 */
  --zn-pb-m: 64px;                              /* mobilný mód: section-large 64 */
}

.zn-zfaq__container {
  position: relative;
  max-width: var(--container-max);              /* max-width-xxlarge 1280 */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);                         /* div-padding-large 48 */
}

/* ── Hlavička (Section Title, šírka 500) ── */
.zn-zfaq__head {
  width: 500px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);                          /* 24 */
  text-align: center;
}
.zn-zfaq__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zn-zfaq__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);                     /* Scheme A/Text #023047 */
}
.zn-zfaq__heading-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);           /* Mix Regular Italic */
  color: var(--color-secondary-dark);           /* #1b8098 */
}

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

/* Actions: gap 24. Vzhľad tlačidiel z globálnych .btn tried.
   Poradie vykreslenia NEmeníme (glow je vo Figme nad tlačidlami) — klikateľnosť
   rieši pointer-events: none na dekore, nie z-index. */
.zn-zfaq__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Zalomenie rieši globálne pravidlo [class*="__actions"] v components.css;
     tu len menší zvislý odstup, nech zalomené CTA nie sú od seba o 24. */
  gap: var(--space-4) var(--space-6);           /* 16 / 24 */
}
/* Kratší mobilný text tlačidla (rovnaký princíp ako Feature 50/50) */
.zn-zfaq__label--m { display: none; }
/* Sekundárne CTA = globálna .btn--link (výška 48, ikona 32, teal underline hover z DS).
   Lokálne len gap 0 - táto sekcia má text a šípku bez medzery (deviácia od DS gap 8). */
.btn.zn-zfaq__cta-link { gap: 0; }

/* ── Zen AI dekor ──
   Rám 372×138; vrstvy sú absolútne na presných offsetoch z Figmy
   (offsety zahŕňajú aj rozšírenie plátna SVG filtrami — tieň/blur). */
.zn-zfaq__decor {
  --zn-decor-shift: 0px;
  position: relative;
  width: 372px;
  height: 138px;
  flex-shrink: 0;
  /* Vrstvy pretekajú ďaleko mimo rámu (glow siaha až cez tlačidlá aj chat) —
     sú to čisté vizuály, nesmú brať kliky. */
  pointer-events: none;
}
.zn-zfaq__decor > * {
  position: absolute;
  display: block;
}
/* Nápis „Zen AI" */
.zn-zfaq__decor-word {
  left: 0;
  top: calc(18.571px + var(--zn-decor-shift));
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);            /* Mix Medium Italic */
  font-size: 130.309px;
  line-height: 1.4;
  white-space: nowrap;
  opacity: .3;
  color: var(--color-secondary-light);          /* #8ecae6 */
}
/* Tag */
.zn-zfaq__decor-tag {
  left: 67.161px;
  top: calc(-78.249px + var(--zn-decor-shift));
  width: 237.686px;
  height: 259.706px;
}
/* Sparkle */
.zn-zfaq__decor-sparkle {
  left: 91.141px;
  top: calc(-52.58px + var(--zn-decor-shift));
  width: 195.146px;
  height: 195.142px;
}
/* Glow — vo Figme je NAD ikonou (jemný #88C3DF @ 15 %, blur) */
.zn-zfaq__decor-glow {
  left: -68.366px;
  top: calc(-88.894px + var(--zn-decor-shift));
  width: 522.942px;
  height: 511.445px;
}

/* ── Zen AI chat mock + prompt pilulky (Figma „Section / FAQ 1", node 469:27447) ──
   Biela karta s textovým poľom a toolbarom, pod ňou 3 STATICKÉ prompt pilulky
   (žiadny accordion — ten z v1.8.16 bol postavený podľa nesprávneho nodu 669:19289
   a patrí samostatnému bloku `zenturi/faq-2`).
   Karta je nad decor glow (z-index 2) a jemne presahuje cez pilulky (-6px). */
.zn-zfaq__mock {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Karta: radius 24, padding 16, tieň Primary Dark 5 %/15 % (Figma „medium").
   `--shadow-btn` má presne túto hodnotu — reuse tokenu namiesto hardcode
   (názov je button-ový, hodnota je zhodná; rovnaký tieň má aj karta v comparison). */
.zn-zfaq__chat {
  position: relative;
  z-index: 2;
  /* Šírku drží KARTA, nie box vnútri: karta je flex item pod `align-items: center`,
     takže sa zmršťuje na max-content (560 box + 32 padding = 592). `max-width: 100%`
     na boxe by sa počítalo voči tým 592 a nikdy by sa neuplatnilo — na úzkom rámci
     by karta pretiekla a `overflow: hidden` sekcie by ju orezala. */
  width: 592px;
  max-width: 100%;
  margin-bottom: -6px;                          /* presah cez pilulky */
  padding: var(--space-4);                      /* 16 */
  background: var(--color-bg);
  border-radius: var(--radius-lg);              /* 24 */
  box-shadow: var(--shadow-btn);
}

/* Textové pole 560×180, border 1px, radius 12, padding 12 */
.zn-zfaq__chat-box {
  position: relative;
  width: 560px;
  max-width: 100%;
  height: 180px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);              /* 12 */
}
.zn-zfaq__chat-input {
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  resize: none;                                 /* grip v rohu je len dekor vo Figme */
  font-family: var(--font-display);
  font-size: var(--text-lg);                    /* Size/Medium 18 */
  line-height: 1.5;
  color: var(--color-text);
  cursor: default;
}
.zn-zfaq__chat-input:focus { outline: none; }

/* Figma 469:27569 (desktop Frame 15930, 560×64) a 523:35318 (mobil 345×56):
   „+" je na ĽAVOM okraji riadku, mikrofón a odosielacie tlačidlo vpravo — nie sú
   zoskupené. Predtým bol toolbar ukotvený len sprava, takže „+" sedelo pri ostatných
   dvoch (@1440 x=415 namiesto 8). Riadok teraz drží celú šírku a prvé tlačidlo
   odtláča zvyšok `margin-inline-end: auto`.
   Odsadenie 8 = Figma (send končí na x=552 v 560 rámci, „+" začína na x=8);
   mobil má 4 (viď @media nižšie). */
.zn-zfaq__chat-toolbar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.zn-zfaq__chat-toolbar > .zn-zfaq__chat-btn:first-child { margin-inline-end: auto; }
.zn-zfaq__chat-btn,
.zn-zfaq__chat-send {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}
.zn-zfaq__chat-btn  { width: 32px; height: 32px; }
.zn-zfaq__chat-send {
  width: 48px;
  height: 48px;
  background: var(--color-primary);             /* #ffb703 */
  border-radius: var(--radius-md);              /* 12 */
}

/* 3 statické prompt pilulky: 528 široké, gap 8, radius 8, px 24 / py 8, text 20 bold */
.zn-zfaq__prompts {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.zn-zfaq__prompt {
  margin: 0;
  width: 528px;
  max-width: 100%;
  padding: 8px 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);              /* 8 */
  font-family: var(--font-display);
  font-size: var(--text-xl);                    /* Size/Large 20 */
  font-weight: var(--weight-bold);
  line-height: 1.5;
  color: var(--color-text);
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIL (rám 393). Hodnoty z `get_variable_defs`
   (mobilný mód), NIE z JSX fallbackov: H1 40 · Size/Medium 16 · Size/Large 18
   · padding-global 16 · section-medium 48 (pt) · section-large 64 (pb)
   · div-padding-large 24 · div-padding-small 16 · Radius/Base 16 (Text Area).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .zn-zfaq { padding-inline: 16px; }

  .zn-zfaq__container { gap: var(--space-6); }  /* div-padding-large 24 */

  /* Section Title na mobile nemá pevnú šírku — je daná riadkom tlačidiel (356) */
  .zn-zfaq__head { width: auto; }

  .zn-zfaq__heading { font-size: 40px; }        /* Size/H1 mobilný mód */

  /* Mobil: rám riadku je 345×56 (Figma 523:35318) → odsadenie 4, nie 8. */
  .zn-zfaq__chat-toolbar { left: 4px; right: 4px; bottom: 4px; }
  .zn-zfaq__text { font-size: var(--text-base); } /* Size/Medium 16 */
  .zn-zfaq__text br { display: none; }          /* mobil zalamuje prirodzene */

  /* Tlačidlá ostávajú vedľa seba (Figma). Zmestia sa vďaka kratšiemu mobilnému textu. */
  .zn-zfaq__label--d { display: none; }
  .zn-zfaq__label--m { display: inline; }

  /* Dekor: rovnaká kompozícia, vyšší rám a všetky vrstvy o +24.287 nižšie */
  .zn-zfaq__decor {
    height: 181px;
    --zn-decor-shift: 24.287px;
  }

  /* ── Prompt pilulky (Figma mobil „Frame 15927" 1201:51787, 329×145) ──
     Bez tohto bloku dedili desktopové hodnoty (text 20, px 24) a boli priveľké.
     Šírka 329 = zarovnanie s chat boxom: obal .zn-zfaq__chat má padding 16,
     takže jeho box je 361−32; pilulky sú jeho súrodenec, preto ten istý inset
     dávame na .zn-zfaq__prompts. Radius 8, border 1 a gap 8 už sedia z desktopu.
     POZOR: Figma má v pilulkách placeholder texty („Otázka číslo 1/2/3"), preto
     sú tam 43 vysoké a jednoriadkové. Reálny obsah je dlhší a zalomí sa —
     preto min-height, NIE height (fixná výška by text orezala). */
  .zn-zfaq__prompts { padding-inline: 16px; }
  .zn-zfaq__prompt {
    min-height: 43px;
    padding: 8px 16px;                          /* Figma: text 297 na x=16, y=8 */
    font-size: var(--text-lg);                  /* Size/Large mobilný mód 18 */
  }

}