/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - FAQ 2 (Figma „Section / FAQ 2", node 669:19289)

   Dvojstĺpcový layout: vľavo Section Title (fixná šírka 500), vpravo Accordion
   List. SAMOSTATNÝ blok — nezdieľa nič so `zenturi/zenai-faq` (žiadny dekor,
   glow, tag ani sparkle; vlastné `zn-faq2__*` triedy).

   Desktop = 1:1 podľa 669:19289; mobil (≤767.98) = 1:1 podľa 1175:43929 — viď
   MOBIL blok na konci súboru.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-faq2 {
  background: var(--color-bg);                  /* Color Scheme 1/Background #ffffff */
  padding-inline: var(--space-16);              /* page-padding 64 */
}
/* Spacing cez zn-block var systém (components.css sa načítava PO blokovom CSS) */
.zn-faq2.zn-block {
  --zn-pt: var(--space-20);                     /* section-medium 80 */
  --zn-pb: var(--space-24);                     /* section-large 112 */
}

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

/* Row (Container → Component): dva stĺpce, gap 80, zarovnané hore */
.zn-faq2__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);                         /* 80 */
  width: 100%;
}

/* ── Ľavý stĺpec: Section Title (Figma FIXNÁ šírka 500, nie max-width) ── */
.zn-faq2__title {
  flex: 0 0 500px;
  width: 500px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                          /* 32 */
}
.zn-faq2__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                          /* 24 */
  color: var(--color-text);                     /* #023047 — platí pre nadpis AJ text */
}

/* Nadpis: obe časti 56/1.1.
   POZOR — vedomá odchýlka od bežnej projektovej konvencie: accent tu NIE JE teal
   (`--color-secondary-dark`) ako v cards-descending/customers/section-base. Vo Figma
   exporte (669:19289) majú OBE časti nadpisu rovnakú farbu #023047 a líšia sa LEN
   font-style (accent = Mix Regular Italic, base = Sans Regular). Overené v design
   contexte: obe `<p>` sú bez color overridu, farbu dedia z Content wrappera. */
.zn-faq2__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-7xl);                   /* Size/H1 56 */
  font-weight: var(--weight-regular);           /* Sans Regular */
  line-height: 1.1;
}
.zn-faq2__heading-accent {
  /* Figma má nadpis na DVOCH riadkoch (dva blokové <p>: „Jasnosť " / „je dôležitá.").
     Pri 500px stĺpci sa text zmestí na jeden riadok, takže sa prirodzene nezalomí —
     preto blokový accent (rovnaký prístup ako section-base dark variant). */
  display: block;
  font-style: italic;
  font-weight: var(--weight-tagline);           /* Mix Regular Italic */
  /* zámerne ŽIADNY color override — dedí #023047 (1:1 s Figmou) */
}

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

/* Actions: jedno tlačidlo, vzhľad výhradne z globálnej .btn--primary (DS) */
.zn-faq2__actions {
  display: flex;
  align-items: center;
}
/* Zen AI ikona vpravo v tlačidle (Figma 32px rám). `flex-shrink: 0` je povinné —
   v natesnanom riadku by sa inak scvrkla na 0 (CLAUDE.md). Zhodné s `.zn-cf__zenai-icon`. */
.zn-faq2__btn-icon { display: block; width: 32px; height: 32px; flex-shrink: 0; }

/* ── Pravý stĺpec: Accordion List ── */
.zn-faq2__accordion {
  flex: 1 0 0;
  min-width: 0;
  border-bottom: 1px solid var(--color-border); /* Scheme A/Border #03030326 */
}
.zn-faq2__item { width: 100%; }

/* Otázka = klikateľný riadok (border-top, py 20, gap 24, bez horizontálneho paddingu) */
.zn-faq2__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-6);                          /* 24 */
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
  color: var(--color-text);                     /* #023047 (chevron dedí cez currentColor) */
}
.zn-faq2__question {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);              /* Sans Bold 750 */
  font-size: var(--text-xl);                    /* Size/Large 20 */
  line-height: 1.5;
}
.zn-faq2__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  transition: transform var(--transition-fast); /* rovnaký vzor ako .zn-nav__caret */
}
[data-zn-acc].is-open .zn-faq2__icon { transform: rotate(180deg); }

/* Odpoveď = CSS-only panel (skrytá okrem .is-open), pb 24 */
.zn-faq2__a {
  display: none;
  padding-bottom: var(--space-6);               /* 24 */
}
[data-zn-acc].is-open .zn-faq2__a { display: block; }
.zn-faq2__answer {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);                  /* Size/Regular 16 */
  font-weight: var(--weight-regular);           /* Sans Regular */
  line-height: 1.5;
  color: var(--color-text);                     /* #023047 */
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIL (rám 393, Figma node 1175:43929). Hodnoty z `get_variable_defs`
   (mobilný mód), NIE z JSX fallbackov — tie ukazujú desktopové 56/20/18.
   Mobilný mód: Size/H1 40 · Size/Medium 16 · Size/Large 18 · Size/Regular 16
   · page-padding 16 · section-medium 48 (pt) · section-large 64 (pb)
   · Component gap 48 · Section Title gap 24 · Content gap 20
   · Question gap 16 · Answer pb 20.

   Nemení sa: farba nadpisu (obe časti #023047, žiadny teal), `display:block`
   na accente, tlačidlo (button token set je na mobile rovnaký), ikona 32,
   farby rámov/dividerov a JS správanie accordionu.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* Sekcia. page-padding 16 = --space-4 (flat, sedí presne).
     pt/pb cez --zn-*-m: mobilné `.zn-block` pravidlo v components.css číta -m variant
     (inak by polovičilo desktop hodnotu). 48/64 natvrdo — rovnaký vzor a čísla ako
     zenai-faq mobil; --space-* clamp minimá na 393px tieto čísla nedajú
     (--space-24 → 56, --space-16 → 40). */
  .zn-faq2 { padding-inline: var(--space-4); }               /* 16 */
  .zn-faq2.zn-block { --zn-pt-m: 48px; --zn-pb-m: 64px; }    /* section-medium 48 / section-large 64 */

  /* Layout: side-by-side → stack (Title hore, Accordion pod ním); DOM poradie sa nemení.
     Component gap 48 = --space-20: na mobile rezolvuje presne na 48 (clamp min 3rem,
     5.5vw je pod ním v celom rozsahu ≤767) — token, nie hardcode (rovnako ako
     cards-descending mobil). Pozn.: --space-12 by dalo len 40, preto sa nepoužíva. */
  .zn-faq2__row {
    flex-direction: column;
    gap: var(--space-20);                                    /* = 48 na mobile */
  }
  .zn-faq2__title {
    flex: none;                                              /* ruší fixných 500px */
    width: 100%;
    gap: var(--space-6);                                     /* 24 (z 32) */
  }
  .zn-faq2__accordion { width: 100%; }

  /* Section Title obsah */
  .zn-faq2__content { gap: var(--space-5); }                 /* 20 (z 24) */
  .zn-faq2__heading { font-size: 40px; }                     /* Size/H1 mobilný mód (token 40 nedá) */
  .zn-faq2__text    { font-size: var(--text-base); }         /* Size/Medium 16 (z 18) */

  /* Accordion */
  .zn-faq2__q        { gap: var(--space-4); }                /* 16 (z 24) */
  .zn-faq2__question { font-size: var(--text-lg); }          /* Size/Large mobil 18 (z 20) */
  .zn-faq2__a        { padding-bottom: var(--space-5); }     /* 20 (z 24) */
}