/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Sekcia obsah + obrázok (univerzálna, napr. Integrácie)
   ══════════════════════════════════════════════════════════════════════════ */

.zn-sbase {
  background: var(--color-bg);
  padding-inline: var(--space-16); /* page-padding 64 */
}

.zn-sbase__container {
  display: flex;
  flex-direction: row;              /* default = obrázok vľavo (v DOM je .zn-sbase__visual prvý) */
  align-items: center;
  gap: var(--space-20); /* div-padding-xlarge 80 */
  max-width: 1280px;
  margin-inline: auto;
}
.zn-sbase--img-right .zn-sbase__container { flex-direction: row-reverse; }

.zn-sbase__visual {
  flex: 1 0 0;
  min-width: 0;
}
/* Figma rám sa volá `Image-aspect-ratio` a je 600x600 - obrázok je teda ŠTVOREC, nech má
   zdroj akýkoľvek pomer. Bez toho neštvorcový obrázok naťahoval výšku sekcie a rozhadzoval
   pomer voči textovému stĺpcu (600x472). Ostatné dva výskyty v projekte (úvodná, Prečo Zenturi)
   majú zdroj už 1:1, takže sa im tým nič nemení.

   DOPLNENÉ 2026-08-08: ten istý rám NIE JE vždy štvorec - inštancia 768:43270
   (sekcia s videom na detaile pomôcky) ho má 600 × 400. Pribudlo preto pole
   `sb_image_ratio` s pevnými voľbami. Default `1-1` drží pravidlo nižšie
   nezmenené a trieda `--ratio-*` sa pri ňom ani nevypisuje, takže tri už
   nasadené stránky majú rovnaký markup aj rovnaké CSS ako predtým.
   Pôvodná úvaha platí ďalej: pomer sa VYNUCUJE, nepreberá sa zo zdroja. */
.zn-sbase__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-base);   /* Figma radius/base 16 (rovnako PC aj mobil) */
}
.zn-sbase--ratio-3-2 .zn-sbase__image  { aspect-ratio: 3 / 2; }
.zn-sbase--ratio-16-9 .zn-sbase__image { aspect-ratio: 16 / 9; }

/* ── Obrázok ako odkaz (náhľad videa, doplnené 2026-08-09) ───────────────────
   Obal sa renderuje LEN keď je vyplnené `sb_image_url`, takže stránky 2, 26
   a 121 nemajú v DOM ani tento prvok, ani na čo tieto pravidlá naviazať.

   `display: block` je nutné - inline `<a>` by okolo obrázka nechal riadkovú
   medzeru a posunul by celý obrázkový stĺpec.

   Odozva na hover/fokus vo Figme NIE JE (náhľad je tam statický obrázok) -
   je to naša UX vrstva, rovnako ako podčiarknutie štítkov v `tag-groups`.
   Bez nej sa klikateľný náhľad nedá odlíšiť od obyčajnej fotky.
   Zámerne sa NEPRIDÁVA tlačidlo Play: je zapečené v rastri náhľadu. */
.zn-sbase__visual-link {
  display: block;
  border-radius: var(--radius-base);   /* aby outline aj tieň kopírovali roh obrázka */
  transition: box-shadow .2s ease, transform .2s ease;
}
.zn-sbase__visual-link:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.zn-sbase__visual-link:focus-visible {
  outline: 2px solid var(--color-secondary);   /* #219ebc */
  outline-offset: 4px;
}

.zn-sbase__column {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8); /* div-padding-medium 32 */
}

.zn-sbase__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 24 */
}

.zn-sbase__headline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* 8 */
}

.zn-sbase__tagline {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-tagline);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
}

.zn-sbase__heading {
  margin: 0;
  width: 100%;                     /* inak shrink-to-fit na max-content → akcent sa nezalomí a preteká
                                      (rovnaká lekcia ako hero-level2); na mobile v centrovanom stĺpci to inak pretečie */
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  font-weight: var(--weight-regular);
  line-height: 1.1;
  color: var(--color-text);
}
.zn-sbase__heading-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);
  color: var(--color-secondary-dark);
}
.zn-sbase--accent-primary-dark   .zn-sbase__heading-accent { color: var(--color-primary-dark); }
.zn-sbase--accent-secondary      .zn-sbase__heading-accent { color: var(--color-secondary); }
.zn-sbase--accent-primary        .zn-sbase__heading-accent { color: var(--color-primary); }
.zn-sbase--accent-secondary-light .zn-sbase__heading-accent { color: var(--color-secondary-light); }
/* „Bez farby" (2026-08-08, Figma 768:43270): akcent dedí farbu nadpisu a líši sa
   LEN rezom. `inherit` zámerne, nie zopakovaná hodnota `--color-text` - tak sa
   farba nemôže rozísť s nadpisom ani keď ju niekto na nadpise zmení. */
.zn-sbase--accent-none .zn-sbase__heading-accent { color: inherit; }

.zn-sbase__text {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text);
}
.zn-sbase__text strong { font-weight: var(--weight-bold); }

.zn-sbase__actions {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4); /* 16 */
}

/* ── Tmavý variant (napr. Zen AI): tmavé pozadie + biely text ──
   Navy panel + zaoblenie sedia na `::before`, NIE na samotnej sekcii. Dôvod: zaoblené sú
   len SPODNÉ rohy, takže notch okolo nich ukazuje, čo je za sekciou — a to je pozadie
   stránky (biele), nie sekcia pod ňou. Vlastné pozadie sekcie preto slúži ako FARBA NOTCHU
   a default je `--color-bg` (biela = doterajšie správanie).
   Kde je pod tmavou sekciou iná farba, nastaví sa notch na inštancii cez base control
   „Farba pozadia" (`sb_bg_color` → inline `background`, prebije toto pravidlo) — hardcode
   v CSS nie je možný, blok je ZDIEĽANÝ: na `/vs-caflou/` je pod ním sekcia `#ecf2f4`,
   na `/preco-zenturi/` biela `zenturi/customers`. Rovnaký princíp ako `section-base-2`
   a `hero-level2` (obal = farba okolia, vnútorný box = vlastná farba + radius), len
   riadený z admina namiesto hardcode.
   POZOR: keby tmavá sekcia niekedy dostala obrázok na pozadí, `.zn-has-bg::before` overlay
   (components.css) by s týmto `::before` kolidoval — vtedy treba prekresliť na vlastný wrapper. */
.zn-sbase--dark {
  position: relative;
  background: var(--color-bg);
}
.zn-sbase--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-text, #023047);
  /* Figma: zaoblené LEN spodné rohy (vrch = vlnka nad sekciou), xlarge 40 (PC),
     large 24 (mobil, viď @media). Scoped na --dark: Integrácie (svetlá) sa nemení.
     Rôzna hodnota podľa breakpointu → CSS override, nie admin pole sb_border_radius. */
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.zn-sbase--dark > * { position: relative; z-index: 1; }   /* obsah nad ::before (vzor .zn-has-bg) */

/* Ikony checklistu (Figma 566:14333 aj mobil 1175:43869):
   obrys prstenca + fajka = „Scheme A/Accent/Secondary" #8ecae6 = --color-secondary-light,
   výplň prstenca = Figma token „Duotone" #7E869E pri default opacity 0.25.
   #7E869E nie je v palete témy (je to token DS knižnice ikon, nie farba značky) → literál,
   nezavádzame kvôli nemu nový token. Overené meraním: výplň v Figma renderi je (32,70,93),
   čo je presne #7E869E pri 0.25 nad navy (všetky tri kanály dajú α = 0,242/0,256/0,253). */
.zn-sbase--dark .zn-sbase__tag-icon {
  --zn-ico-main: var(--color-secondary-light);
  --zn-ico-soft: #7E869E;
}
/* Figma (ZenAI): akcent nadpisu na vlastnom riadku (br po "Váš nový kolega,").
   Base section-base má akcent inline (Integrácie); tu ho viažeme na dark variant.
   Ak by dark sekcia niekedy chcela inline akcent, presunúť na vlastný modifier. */
.zn-sbase--dark .zn-sbase__heading-accent { display: block; }
.zn-sbase--dark .zn-sbase__tagline,
.zn-sbase--dark .zn-sbase__heading,
.zn-sbase--dark .zn-sbase__text,
.zn-sbase--dark .zn-sbase__tag-text { color: var(--color-white); }

/* CTA v tmavej sekcii: globálna trieda .btn--white (components.css), nie lokálny override. */

/* ── Odškrtávací ZOZNAM pod textom (Figma „List" 768:43583) ──────────────────
   DOPLNENÉ 2026-08-08. Nie je to to isté ako `.zn-sbase__tags` nižšie: tie sú
   zalamovaný RIADOK štítkov (wrap, gap 16/32, ikona v 32 ráme, text 20 Bold),
   toto je ZVISLÝ zoznam celej šírky (položka py 8, gap 12, ikona 24,
   text 18 SemiBold). Spoločné majú len „ikona + text".

   Renderuje sa LEN keď je repeater `sb_list` vyplnený - bez neho na sekcii
   nepribudne ani trieda `--list`, takže stránky 2, 26 a 121 majú nezmenený
   markup aj CSS.

   Zoznam je 558 široký v 600 stĺpci - tak to má Figma (nie je to preklep). */
.zn-sbase__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 558px;
}
/* Figma „Menu Item" 558 × 43 = 8 + 27 + 8, bez medzier medzi položkami
   (13 × 43 by dalo 559; posledná je dvojriadková 70, spolu 586 ✓). */
.zn-sbase__list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);                  /* 12 */
  padding-block: var(--space-2);        /* 8 */
}
/* ⚠️ ZELENÁ JE SCOPNUTÁ NA TÚTO TRIEDU, nie globálna - inak by prefarbila
   KAŽDÚ duotone ikonu na webe.

   ⚠️ HODNOTY SÚ INÉ NEŽ V `checklist-cta` A JE TO SPRÁVNE. Tá istá ikona má
   na tmavom a na svetlom pozadí inú kresbu:
     navy (checklist-cta)  PLNÝ disk - main `#49D20E`, soft `#2C7F09`, opacity 1
     biela (tu)            OBRYSOVÁ - main `#2C7F09`, soft `#EEF9E9`, opacity 1
   Prvá verzia tohto pravidla prebrala navy hodnoty vrátane zdvihnutej
   `soft-opacity` a na bielej z ikony vznikla plná zelená guľa s bledou fajkou.

   Zmerané na Figma node 768:43585, KOMPOZITNE NA BIELEJ (na priehľadnom pozadí
   by vyšla alfa, nie výsledok), 4× export = 96 px:
     prstenec  `#2C7F09` - zhodne na všetkých štyroch svetových stranách (r = 36)
     fajka     `#2C7F09` - tá istá hodnota, sedí so SVG (prstenec aj fajka
               používajú `--zn-ico-main`); jediná odchýlka `#448E25` je
               antialiasing na diagonále
     disk      `#EEF9E9` - štyri vzorky mimo fajky, všetky zhodné
   `--zn-ico-soft` je preto rovno tá VÝSLEDNÁ svetlozelená a opacity ostáva 1;
   `ico-check-ring.svg` má default 0,25, ktorý by hodnotu ešte raz zosvetlil.
   Platí to na bielom podklade, teda presne tam, kde sa zoznam používa.
   ⏳ Ak Ján zelenú potvrdí, obe sady patria do theme.json ako tokeny. */
.zn-sbase__list-icon {
  flex-shrink: 0;                       /* ikona vo flex riadku (CLAUDE.md) */
  width: 24px;
  height: 24px;
  display: block;
  --zn-ico-main: #2C7F09;
  --zn-ico-soft: #EEF9E9;
  --zn-ico-soft-opacity: 1;
}
/* Text/Medium/Semi Bold: 18 / 1.5, weight 650, Scheme A/Text. */
.zn-sbase__list-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);            /* Size/Medium 18 */
  font-weight: var(--weight-semibold);  /* 650 */
  line-height: 1.5;
  color: var(--color-text);
}
.zn-sbase--dark .zn-sbase__list-text { color: var(--color-white); }

/* So zoznamom je textový stĺpec podstatne vyšší než obrázok (812 vs 400), a Figma
   ich vtedy zarovnáva HORE, nie na stred. Viazané na `--list` zámerne: bez zoznamu
   ostáva `align-items: center` z `.zn-sbase__container`, teda doterajšie správanie
   všetkých troch nasadených stránok. */
.zn-sbase--list .zn-sbase__container { align-items: flex-start; }

/* ── Tagy pod textom (ikona + tučný label). Figma: Layout=Wrap gap 16/32, Tag gap 4,
   ikona 18, text Sans Bold Size/Large 18. Wrap = na PC 2-3 v riadku, na mobile pod sebou. ── */
.zn-sbase__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);   /* riadok 16 / stĺpec 32 */
  margin: 0;
  padding: 0;
  list-style: none;
}
.zn-sbase__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);                  /* 4 */
}
.zn-sbase__tag-icon {
  flex-shrink: 0;
  /* „Icon / Relume" = 32px FRAME (DS konvencia: vždy 32px Icon frame
     s vycentrovaným glyphom, glyph má vlastný vnútorný padding). Pozn.: design-context
     hlásil size-[18px], ALE to je zavádzajúca metadata externého DS komponentu —
     reálne renderovaný kruh = ~24px (button-kalibrované meranie 25px), čo sa do 18px
     rámu fyzicky nezmestí; 24px kruh / 0,75 fill = 32px rám.
     Relume check-ring má padding priamo v asset-e: viewBox 0 0 32 32, kruh r12 (24 j.)
     = 75 % rámu, 4 j. padding dokola → glyph < rám.
     Skutočná príčina nezhody: téma mala ico-check-ring.svg orezaný na viewBox 4 4 24 24
     (padding preč → kruh vyplnil celý rám, žiadny vzduch k textu). „Size number" pokusy
     (18→24) menili len veľkosť vyplneného kruhu, nie štruktúru. Oprava = SVG viewBox
     0 0 32 32 (padding vrátený) + rám 32px → viditeľný kruh 24px, stroke 1.2px,
     4px vzduch k textu, presne ako Figma. */
  width: 32px;
  height: 32px;
  display: block;
}
.zn-sbase__tag-text {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);      /* Sans Bold 750 */
  font-size: var(--text-xl);            /* Figma tag = Size/Small 20 (nie 18); --text-xl = 1.25rem = 20 */
  line-height: 1.5;
  color: var(--color-text);
}

/* ── Responzivita ── */
@media (max-width: 1199.98px) {
  .zn-sbase__container,
  .zn-sbase--img-right .zn-sbase__container {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Obrázok hore (Figma mobil). V stĺpcovom kontajneri riadi `flex: 1 0 0` VÝŠKU
     (basis 0 → kolaps) — preto reset na `none`, viď lekcia z Bento. */
  .zn-sbase__visual,
  .zn-sbase__column {
    flex: none;
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIL (rám 393)
   POZOR: mobilný frame má Typography mód Auto (Desktop) — get_design_context
   vracia desktopové px. Hodnoty sú z get_variable_defs (správny mód):
   Size/H1 = 40 (NIE 56), Size/Medium = 16 (NIE 18), Size/Regular = 16,
   page-padding = 16, section-medium = 48, div-padding-medium = 20,
   div-padding-xsmall = 8. Obrázok = štvorec (aspect ratio keeper 100cqw).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* POZOR: components.css na mobile polovičí padding sekcie
     (`--zn-pt-m` fallback `calc(var(--zn-pt) * 0.5)` → z 80 by vyšlo 40, nie 48) —
     preto sa nastavujú mobilné premenné. Editor overrides (inline) stále vyhrávajú. */
  .zn-sbase.zn-block {
    --zn-pt: 48px;                    /* section-medium (mobil) */
    --zn-pb: 48px;
    --zn-pt-m: 48px;
    --zn-pb-m: 48px;
  }

  .zn-sbase { padding-inline: var(--space-4); }        /* page-padding 16 */
  .zn-sbase--dark::before { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }  /* Figma large 24 (mobil, PC = xlarge 40) */
  .zn-sbase__container { gap: var(--space-2); }        /* div-padding-xsmall 8 */

  /* Image-aspect-ratio: štvorec na plnú šírku, orez cez object-fit (Figma overflow-clip) */
  .zn-sbase__image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .zn-sbase__column  { align-items: center; gap: var(--space-5); }  /* div-padding-medium 20 */
  .zn-sbase__content { gap: var(--space-5); width: 100%; }          /* 20 */
  .zn-sbase__headline { align-items: center; width: 100%; }         /* gap 8 = ako desktop */

  .zn-sbase__heading { font-size: 2.5rem; text-align: center; }     /* Size/H1 (mobil) = 40 */
  .zn-sbase__text    { font-size: var(--text-base); text-align: center; } /* Size/Medium (mobil) = 16 */

  /* Figma mobil má v Actions LEN primárny button (outline „API dokumentácia" tam nie je).
     POZOR: platí pre celý blok section-base, nielen pre Integrácie. */
  .zn-sbase__actions { justify-content: center; flex-wrap: wrap; }
  .zn-sbase__actions .btn--outline { display: none; }

  /* Zen AI (dark) mobil = Figma 1175:43869: obsah je zarovnaný VĽAVO (items-start,
     NIE center), a medzera obrázok↔obsah je 48 (div-padding-xlarge, nie 8). Scoped
     na --dark, aby sa Integrácie (svetlá, vlastný Figma, ostáva center) nezmenila. */
  .zn-sbase--dark .zn-sbase__container { gap: var(--space-20); }        /* 48 (bolo 8) */
  .zn-sbase--dark .zn-sbase__column,
  .zn-sbase--dark .zn-sbase__headline { align-items: flex-start; }      /* vľavo */
  .zn-sbase--dark .zn-sbase__heading,
  .zn-sbase--dark .zn-sbase__text { text-align: left; }                 /* vľavo */
  .zn-sbase--dark .zn-sbase__actions { justify-content: flex-start; }   /* button vľavo */
  /* Tag text = Text/Large/Bold, a „Size/Large" má v mobilnom móde 18 (desktop 20) —
     z `get_variable_defs` na 1175:43869. Scoped na --dark: Integrácie majú vlastný
     mobilný Figma frame, ktorý sme pre tag text neoverovali. */
  .zn-sbase--dark .zn-sbase__tag-text { font-size: var(--text-lg); }    /* 18 */
}

/* Spacing defaulty cez zn-block var systém (vyššia špecificita než components.css) */
.zn-sbase.zn-block { --zn-pt: var(--space-20); --zn-pb: var(--space-20); }
/* Tmavý variant má vlastný section padding: Figma 566:14333 „Section Padding/section-large"
   112 (desktop), predtým sa dedilo base `--space-20` (section-medium 80 → pri 1440 len 79,2).
   Mobil ostáva 48 — mobilný node 1175:43869 má section-medium 48 a `--zn-pt-m` z mobilnej
   media query sa nemení. MUSÍ stáť POD riadkom vyššie: `.zn-sbase--dark.zn-block` má rovnakú
   špecificitu (2 triedy) ako `.zn-sbase.zn-block`, takže o víťazovi rozhoduje poradie. */
.zn-sbase--dark.zn-block { --zn-pt: var(--space-24); --zn-pb: var(--space-24); }

/* ══ Centrovaný variant BEZ obrázka (Figma "Section / Header / Basic", overené
   proti 2 inštanciám na Compare stránke - 566:14241 aj 683:50202) - tagline+
   nadpis+text centrované, žiadny obrázkový stĺpec (template.php skryje aj
   integracie.png fallback), max-width 768 na textový obsah. Scoped na
   --centered, existujúce použitia (Integrácie s obrázkom, Zen AI dark) sa
   nemenia.

   ZÁMERNE NEriešené v CSS (2 inštancie sa líšia, preto per-instance cez
   existujúce generické base controls, nie hardcode do tejto triedy):
   - pt/pb: 566:14241 = section-medium/small (80/48), 683:50202 = section-
     large/small (112/48) - nastaviť cez existujúci spacing inšpektor
     (block_pt/block_pb base control), NIE nový CSS.
   - farba pozadia: 566:14241 = biela (--color-bg, default section-base),
     683:50202 = bg-medium - nastaviť cez existujúci `sb_bg_color` base
     control (farba pozadia), NIE nový CSS/toggle.
   - akcent na vlastnom riadku vs inline: 566:14241 má akcent na vlastnom
     riadku, 683:50202 ho má INLINE (rovnako ako default non-centered) -
     riadi to admin priamo v `sb_heading`/`sb_heading_accent` poli cez
     zenturi_heading_brk() `<br>` (univerzálna konvencia, CLAUDE.md), NIE
     CSS display:block. */
.zn-sbase--centered .zn-sbase__container {
  flex-direction: column;
  align-items: center;
}
.zn-sbase--centered .zn-sbase__column {
  flex: none;
  width: 100%;
  max-width: 768px;
  margin-inline: auto;
  align-items: center;
}
.zn-sbase--centered .zn-sbase__headline {
  gap: var(--space-4);              /* Figma "Section Title" gap 16, nie 8 ako default */
  align-items: center;
  width: 100%;
}
.zn-sbase--centered .zn-sbase__tagline,
.zn-sbase--centered .zn-sbase__heading,
.zn-sbase--centered .zn-sbase__text {
  text-align: center;
}
.zn-sbase--centered .zn-sbase__content { align-items: center; }
.zn-sbase--centered .zn-sbase__actions { justify-content: center; }