/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Feature 50/50 + Vlna
   Bg = text Black Blue; H2 svetlý s farebným italic akcentom (voľba z palety);
   zvislý vektor vľavo sa pri scrolli dopĺňa zvolenou farbou; vizuál 50/50.
   Na mobile je ten istý vektor horizontálne nad nadpisom.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-fdark {
  /* Farby prichádzajú z editora ako inline premenné (template) */
  --zn-fd-vec: var(--color-secondary-light);
  --zn-fd-acc: var(--color-secondary-light);
  --zn-fd-p: 1;                              /* progres dopĺňania 0-1; bez JS plná farba */
  background: var(--color-text);
  color: var(--color-white);
  padding-inline: var(--space-16);
}
/* Vertikálne pady cez zn-block var systém (desktop 0 - riadky na seba nadväzujú,
   vizuál po okraj); priame padding-block by prebili media pravidlá .zn-block */
.zn-fdark.zn-block { --zn-pt: 0px; --zn-pb: 0px; }

.zn-fdark__container {
  max-width: 1280px;
  margin-inline: auto;
}

.zn-fdark__row {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5.5vw, 80px);             /* 80 z dizajnu (Row gap) */
}
.zn-fdark--reverse .zn-fdark__row {
  flex-direction: row-reverse;
}

/* Ľavá skupina: vektor + obsah */
.zn-fdark__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* ── Vektor: presný tvar z dizajnu ako CSS maska, dve vrstvy ──
   Základ = šedá (Disabled Dark), fill vrstva = zvolená farba orezaná
   posúvajúcim sa gradientom (mäkká hrana ~9 % ako v dizajnových stavoch).
   Progres --zn-fd-p riadi script.js podľa pozície sekcie vo viewporte. */
.zn-fdark__squiggle {
  position: relative;
  flex-shrink: 0;
  width: 28px;                               /* Figma Vector 28x404 */
  height: 404px;
  background: var(--color-text-secondary);
  -webkit-mask: url('../../../assets/img/feature/squiggle-v.svg') 0 0 / 100% 100% no-repeat;
  mask: url('../../../assets/img/feature/squiggle-v.svg') 0 0 / 100% 100% no-repeat;
}
.zn-fdark__squiggle-fill {
  position: absolute;
  inset: 0;
  background: var(--zn-fd-vec);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--zn-fd-p) * 109% - 4.5%), transparent calc(var(--zn-fd-p) * 109% + 4.5%));
  mask-image: linear-gradient(180deg, #000 calc(var(--zn-fd-p) * 109% - 4.5%), transparent calc(var(--zn-fd-p) * 109% + 4.5%));
}

/* ── Obsah ── */
.zn-fdark__column {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;                                 /* Figma: nadpis↔text 16 */
  padding-block: var(--space-24);            /* Figma: obsah 112 od okrajov sekcie */
}

/* Nadpis = zdieľaná .zn-heading; tmavá sekcia = biely text, akcent podľa voľby farby. */
.zn-fdark .zn-fdark__heading { color: var(--color-white); }
.zn-fdark .zn-heading__accent {
  color: var(--zn-fd-acc);
  /* Akcent je vo Figme VŽDY na vlastnom riadku (523:34994 „Nájdite svoj systém" /
     „v každom obore", rovnako 523:34684 a 523:34821 — overené screenshotom, nie z exportu).
     Bez `block` sa akcent lepí za základ nadpisu a zlom padne doprostred frázy
     („Keď systém myslí s" / „vami."). Dvojtriedny selektor kvôli kaskáde: components.css
     sa načítava PO blokových štýloch, jednotriedny `.zn-heading__accent` by prehral.
     Nahrádza to legacy `fd_accent_break` (ten dával `<br class="zn-brk">`, teda len desktop —
     na mobile by zlom nevznikol). Flag ostáva kvôli spätnej kompatibilite obsahu. */
  display: block;
}

.zn-fdark__text {
  margin: 0;
  max-width: 540px;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-white);
}
.zn-fdark__text strong { font-weight: var(--weight-bold); }

.zn-fdark__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 24px;                          /* Figma: text↔buttony 40 (16 gap + 24) */
}
/* Voliteľný kratší text buttonov pre mobil - prepínajú sa spany (bez JS) */
.zn-fdark__label--m { display: none; }

/* Primárny button = globálna trieda .btn--white (biela na tmavom, hover žltá) -
   žiadny lokálny štýl netreba. Sekundárny odkaz = .btn--link + farba na tmavom. */
/* Link na tmavom pozadí = DS light variant: biely text, hover svetlomodrý spodný
   border (#c0e2f1), NIE oranžová/tmavý teal. Rozmery (48/ikona 32/border-bottom)
   nesie globálna .btn--link. */
.zn-fdark .zn-fdark__link { color: var(--color-white); }
.zn-fdark .zn-fdark__link:hover { border-bottom-color: var(--color-secondary-lighter); }
.zn-fdark__link .zn-fdark__link-icon { flex-shrink: 0; object-fit: contain; }

/* ── Vizuál (600/1280 z dizajnu, riadok min. 864, radius 16) ── */
.zn-fdark__visual {
  flex: 0 0 600px;
  max-width: 47%;
  min-width: 0;
  border-radius: var(--radius-base);
  overflow: hidden;
}
@media (min-width: 1200px) {
  .zn-fdark__row { min-height: 864px; }
}
.zn-fdark__image {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Responzivita: pod 1200 stĺpec, vektor horizontálne nad nadpisom ── */
@media (max-width: 1199.98px) {
  /* Figma mobil: section py 42 - cez vars, aby ich .zn-block auto-scale nepolovičil */
  .zn-fdark.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-fdark__row,
  .zn-fdark--reverse .zn-fdark__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .zn-fdark__body {
    flex: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 24px;                               /* Figma mobil: vektor↔obsah 24 */
  }
  .zn-fdark__squiggle {
    width: 100%;
    height: auto;
    aspect-ratio: 404 / 28;
    -webkit-mask-image: url('../../../assets/img/feature/squiggle-h.svg');
    mask-image: url('../../../assets/img/feature/squiggle-h.svg');
  }
  /* Horizontálne sa dopĺňa zľava doprava */
  .zn-fdark__squiggle-fill {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--zn-fd-p) * 109% - 4.5%), transparent calc(var(--zn-fd-p) * 109% + 4.5%));
    mask-image: linear-gradient(90deg, #000 calc(var(--zn-fd-p) * 109% - 4.5%), transparent calc(var(--zn-fd-p) * 109% + 4.5%));
  }
  .zn-fdark__column { padding-block: 0; }
  .zn-fdark__visual {
    flex-basis: auto;
    width: 100%;
    max-width: 100%;
    margin-block: 24px;                      /* Figma: image container py 24 */
  }
}

/* Mobil ≤767: hodnoty z mobilného módu tokenov (H1 40, Medium 16) */
@media (max-width: 767.98px) {
  .zn-fdark { padding-inline: var(--space-4); }
  .zn-fdark__label--d { display: none; }
  .zn-fdark__label--m { display: inline; }
  .zn-fdark__column { gap: 24px; }
  .zn-fdark__text { font-size: var(--text-base); }
  .zn-fdark__actions {
    width: 100%;
    justify-content: space-between;
    margin-top: 0;                           /* mobil: text↔buttony len content gap 24 */
  }
  /* Figma mobil (523:34997 primárny 195×48 na x=0, 523:34998 sekundárny 150×48 na x=211):
     buttony sú VEDĽA SEBA v riadku 361, nie pod sebou. Pôvodné `flex-wrap: wrap` + `gap 24`
     ich pri dlhšom texte („Nájdite svoj systém", primárny 198) zalomilo: 198+24+150 = 372 > 361.
     DVOJTRIEDNY selektor je nutný (CLAUDE.md): `components.css` má
     `[class*="__actions"] { flex-wrap: wrap }` — atribútový selektor má rovnakú špecificitu
     ako trieda a načítava sa PO blokových štýloch, takže jednotriedny override prehrá.
     `column-gap` je 12, nie Figma 16: tlačidlá majú `white-space: nowrap` + `min-width: auto`,
     takže sa nezmršťujú, a náš primárny renderuje 198 namiesto Figma 195 (rozdiel je vo
     výpočte šírky textu Season VF, padding 16/16 sedí). 198+12+150 = 360 ≤ 361; pri 16 by
     riadok pretiekol o 3px. Riadkový gap zostáva 16 pre prípad, že by sa predsa zalomilo. */
  .zn-fdark .zn-fdark__actions {
    flex-wrap: nowrap;
    gap: 16px 12px;
  }
}