/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Zen AI feature (Figma node 857:48739 → riadok 857:48740 / 857:50301)

   Tmavá sekcia z rodiny feature-dark, ale SAMOSTATNÝ blok — vlastné `zn-zaf__*`
   triedy, nezdieľa nič s `zenturi/feature-dark`. Jeden riadok: vľavo zvislá vlnka
   + obsah (nadpis, text, accordion, biele CTA), vpravo vizuál 600×584.

   Italic akcent preberá zvolenú farbu (--zn-zaf-acc, nastavené inline z template
   podľa poľa „Farba vlnky + akcentu"). Row1 = modrá (secondary-light), Row2 = žltá
   (primary-dark).

   VLNKA (2026-07-30, Check bugfix — nahradzuje stav z 2026-07-21): vlnka sa DOPĹŇA
   FARBOU PRI SCROLLI, rovnako ako `zenturi/feature-dark` na úvodnej stránke (na to
   Maroš odkazoval „má byť pohyblivá ako na úvodnej"). Nie je to slučka ani keyframe —
   je to progres 0→1 z pozície vo viewporte, zapísaný do --zn-zaf-p, ktorý posúva
   gradient masku nad vrstvou výplne.
   Predošlý stav (farba ZAPEČENÁ v squiggle-row1/row2.svg, obyčajný <img>) bol v skutočnosti
   STATICKÝ SNÍMOK práve tohto efektu: Row1 mala 2-stop #8ECAE6→#75878F na offsetoch
   0.697/0.827 (= vyfarbené hore, šedé dole), Row1-h dokonca hranu 0.26/0.35, čo je
   presne 9 % = feature-dark ±4.5 %. Preto sa farby vrátili do CSS a tvary do masiek.
   Poznámka z 2026-07-21 tvrdila „vlastný, INÝ tvar" — platilo to o farbe, nie o geometrii:
   `d` atribúty zvislých ciest sú byte-identické s feature-dark (md5 fb78f62c31d2), takže
   zvislý tvar je dnes ZDIEĽANÝ. Horizontálny tvar zdieľaný NIE JE (viď komentár v @media).

   RESPONZIVITA (2026-07-21): tablet (≤1199.98px, generický medzikrok — Figma preň
   nemá samostatný spec, rovnaký dôvod ako hero-level3 bugfix, doplnené HNEĎ nech sa
   nezopakuje ten istý bug) a mobil (≤767.98px, Figma node 1200:43081 Row1 /
   1200:43111 Row2 — mobilné hodnoty overené cez `get_variable_defs`, JSX fallbacky
   ukazujú staré desktopové literály, rovnaký gotcha ako hero-level3). Zalomenie
   nadpisu rieši globálne pravidlo `zn-brk` v components.css.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-zaf {
  --zn-zaf-acc: var(--color-secondary-light);   /* fallback, inline z template prepíše */
  background: var(--color-text);                /* Scheme A/Text (Black Blue) #023047 */
  color: var(--color-white);
  padding-inline: var(--space-16);              /* page-padding 64 */
}
/* Vertikálne pady 0 (rodina feature-dark: tmavé riadky na seba nadväzujú); vnútorný
   rytmus dáva padding-block obsahu. Cez zn-block var systém (components.css po bloku). */
.zn-zaf.zn-block { --zn-pt: 0px; --zn-pb: 0px; }

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

/* Riadok: obsah + vizuál, vertikálne vycentrované */
.zn-zaf__row {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5.5vw, 80px);                /* Component gap (≈80 ako feature-dark) */
}

/* Ľavá skupina: vlnka + obsah */
.zn-zaf__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-8);                          /* vlnka ↔ obsah 32 */
}

/* ── Zvislá vlnka: dopĺňanie farby pri scrolli ──
   Rovnaký mechanizmus ako `zenturi/feature-dark` na úvodnej stránke: základ v šedej
   (Disabled Dark) + vrstva výplne v akcentovej farbe, orezaná posúvajúcim sa gradientom
   s mäkkou hranou ±4.5 %. Progres --zn-zaf-p riadi assets/script.js.

   TVAR = assets/img/feature/squiggle-v.svg, teda ZDIEĽANÝ asset s feature-dark.
   Overené porovnaním `d` atribútov: cesty sú byte-identické (md5 fb78f62c31d2), pôvodné
   squiggle-row1/row2.svg obsahovali presne ten istý motív 2× pod sebou, líšili sa LEN
   zapečenou farbou. Komentár z v1.13.x („vlastný tvar namiesto feature-dark asset")
   platil pre farbu, nie pre geometriu — preto sa tu zjednocuje.
   Motív je 404 vysoký, blok potrebuje 606 → dlaždicuje sa `repeat-y` s krokom 404
   (presne to je tá „dvojitá kópia" z Figma frame 15987/15986, orezaná rodičom). */
.zn-zaf__squiggle {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 28px;                                  /* Vector 28×606 (Figma frame 15987/15986) */
  height: 606px;
  background: var(--color-text-secondary);      /* #75878F — nevyfarbený základ */
  -webkit-mask: url('../../../assets/img/feature/squiggle-v.svg') 0 0 / 100% 404px repeat-y;
  mask: url('../../../assets/img/feature/squiggle-v.svg') 0 0 / 100% 404px repeat-y;
}
.zn-zaf__squiggle-fill {
  position: absolute;
  inset: 0;
  background: var(--zn-zaf-vec);                /* Row1 secondary-light / Row2 primary —
                                                   NIE --zn-zaf-acc, viď $zn_vec_map v template.php */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--zn-zaf-p, 1) * 109% - 4.5%), transparent calc(var(--zn-zaf-p, 1) * 109% + 4.5%));
  mask-image: linear-gradient(180deg, #000 calc(var(--zn-zaf-p, 1) * 109% - 4.5%), transparent calc(var(--zn-zaf-p, 1) * 109% + 4.5%));
}

/* Bez JS aj pri prefers-reduced-motion ostáva vlnka plne vyfarbená (--zn-zaf-p default 1),
   nie celá šedá — rovnaká voľba ako fallback vo feature-dark. */
@media (prefers-reduced-motion: reduce) {
  .zn-zaf__squiggle-fill {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ── Obsah ── */
.zn-zaf__column {
  flex: 1 1 0;
  min-width: 0;
  max-width: 600px;                             /* ľavý obsah max ~600 */
  display: flex;
  flex-direction: column;
  padding-block: var(--space-24);               /* vertikálne vyváženie (rodina feature-dark) */
}
.zn-zaf__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                          /* Content gap 16: nadpis→text→accordion */
}

/* Nadpis: base 56 Sans Regular biely, akcent 56 italic na vlastnom riadku (farba z vlnky) */
.zn-zaf__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-white);
}
.zn-zaf__heading-accent {
  display: block;
  font-style: italic;
  font-weight: var(--weight-tagline);           /* Mix Regular Italic */
  color: var(--zn-zaf-acc);
}

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

/* ── Accordion (panel White 10 %, padding 24, radius 16) ── */
.zn-zaf__accordion {
  width: 100%;
  padding: var(--space-6);                      /* 24 */
  background: rgba(255, 255, 255, .1);          /* A/Opacity/White 10 */
  border-radius: var(--radius-base);            /* 16 */
}
.zn-zaf__item { width: 100%; }
/* Deliaci 1px riadok LEN medzi položkami (Figma token Scheme A/Text Secondary #ecf2f4 na tmavom) */
.zn-zaf__item + .zn-zaf__item { border-top: 1px solid var(--color-bg-medium); }

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

/* Odpoveď = CSS-only panel (skrytá okrem .is-open), pb 24 */
.zn-zaf__a {
  display: none;
  padding-bottom: var(--space-6);               /* 24 */
}
[data-zn-acc].is-open .zn-zaf__a { display: block; }
.zn-zaf__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-white);
}

/* ── CTA: vzhľad z globálnej .btn--white (biela, čierny text, DS). Lokálne len ikona. ──
   Gap text↔ikona 8 dedí z .btn (needefinujeme). */
.zn-zaf__actions { margin-top: var(--space-6); } /* pt tlačidla 24 */
.zn-zaf__cta .zn-zaf__btn-icon {
  flex-shrink: 0;
  width: 32px;                                  /* ZenAI-Icon 32 (SVG má vlastné 62, CSS zmenší) */
  height: 32px;
}

/* ── Pravý stĺpec: vizuál 600×584 (radius 16) ── */
.zn-zaf__visual {
  flex: 0 0 600px;
  max-width: 47%;
  min-width: 0;
  aspect-ratio: 600 / 584;
  border-radius: var(--radius-base);            /* 16 */
  overflow: hidden;
}
.zn-zaf__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--transition-base);   /* plynulejšie prepnutie pri zmene z accordionu */
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLET (≤1199.98px) — generický medzikrok, Figma preň nemá samostatný spec.
   Rovnaký dôvod ako hero-level3 bugfix: bez neho by pevná šírka vizuálu (600px)
   + rigidný riadok vlnka/obsah kolabovali presne v tomto rozsahu. Vlnka sa
   presúva nad obsah, horizontálne (vlastný asset, žiadny mask).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1199.98px) {
  /* Prvý riadok za wave-sep: Figma mobil Section py 42 (Row1 1200:43081;
     Row2 1200:43111 vertikálny padding NEMÁ — medzeru medzi riadkami dáva
     spodný padding Row1). Tablet = rovnaký generický medzikrok ako zvyšok
     tohto @media (stacked layout so squiggle hore). Susedstvo cez LZB
     wrappery (bloky nie sú priami súrodenci); -t/-m varianty premenných
     nastavené na plnú hodnotu, nech nebeží auto-škálovanie 0.7/0.5
     z components.css — Figma hodnota je presne 42. */
  .wp-block-zenturi-wave-sep + .wp-block-zenturi-zenai-feature .zn-zaf.zn-block {
    --zn-pt: 42px; --zn-pb: 42px;
    --zn-pt-t: 42px; --zn-pb-t: 42px;
    --zn-pt-m: 42px; --zn-pb-m: 42px;
  }

  .zn-zaf__row {
    flex-direction: column;
    gap: 0;
  }
  .zn-zaf__body {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);                        /* 24 (z 32 desktop) */
  }
  /* Vlnka nad obsahom, horizontálne — mení sa LEN maska, prvok je ten istý.
     Tvar je VLASTNÝ asset bloku (squiggle-h.svg 361×25), NIE zdieľaný ako pri zvislej:
     feature-dark/squiggle-h.svg je iba zvislý motív otočený o -90° (viewBox 404×28,
     `transform="translate(0 28) rotate(-90)"`), kým tento je samostatne kreslený tvar
     na 361×25 s inou cestou (md5 d6ed277f1ecc vs fb78f62c31d2). Preto sa NEZJEDNOCUJE
     — ak to niekto skúsi znova spojiť, vlnka na mobile zmení proporcie. */
  .zn-zaf__squiggle {
    width: 100%;
    height: auto;
    aspect-ratio: 361 / 25;                      /* pomer horizontálneho SVG */
    -webkit-mask: url('../../../assets/img/zenai-feature/squiggle-h.svg') 0 0 / 100% 100% no-repeat;
    mask: url('../../../assets/img/zenai-feature/squiggle-h.svg') 0 0 / 100% 100% no-repeat;
  }
  /* Horizontálne sa dopĺňa zľava doprava */
  .zn-zaf__squiggle-fill {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--zn-zaf-p, 1) * 109% - 4.5%), transparent calc(var(--zn-zaf-p, 1) * 109% + 4.5%));
    mask-image: linear-gradient(90deg, #000 calc(var(--zn-zaf-p, 1) * 109% - 4.5%), transparent calc(var(--zn-zaf-p, 1) * 109% + 4.5%));
  }
  .zn-zaf__column {
    max-width: 100%;
    padding-block: 0;                            /* desktopové vyváženie voči vizuálu mizne */
  }
  .zn-zaf__content { gap: var(--space-6); }      /* 24 (z 16 desktop) */
  .zn-zaf__visual {
    flex: none;
    width: 100%;
    max-width: 100%;
    margin-block: var(--space-6);                /* 24 — Figma „Image container" py 24,
                                                     rovnaký vzor ako feature-dark .zn-fdark__visual */
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIL (≤767.98px, Figma node 1200:43081 Row1 / 1200:43111 Row2). Hodnoty z
   mobilného módu (`get_variable_defs`), NIE z JSX fallbackov — tie ukazujú staré
   desktopové literály (56/20/18), rovnaký gotcha ako hero-level3.
   Mobilný mód: Size/H1 40 · Size/Medium 16 · Size/Large 18 · Size/Regular 16
   (bez zmeny, desktop už bol --text-base) · page-padding 16 · accordion padding 16.
   CTA (Button 48/Icon 32) už sedí s .btn defaultom — žiadny override netreba.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .zn-zaf { padding-inline: var(--space-4); }    /* 16 */

  .zn-zaf__heading { font-size: 40px; }          /* Size/H1 mobil */
  .zn-zaf__text { font-size: var(--text-base); } /* Size/Medium mobil 16 (z 18) */

  .zn-zaf__accordion { padding: var(--space-4); } /* 16 (z 24 desktop) */
  .zn-zaf__question { font-size: var(--text-lg); } /* Size/Large mobil 18 (z 20) */
}