/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Section / Large text (Figma node 28:6181, inštancia 696:34148,
   sekcia 2 na /zakaznici/) — navy panel zaoblený len hore, tagline + jeden
   veľký H2 s dvoma nezávislými farebnými úsekmi (<mark> v poli lt_heading).

   MOBIL (Figma 1201:100139, get_design_context + get_variable_defs 2026-08-14):
   radius/large 24 (NIE xlarge 40), section-large mobil 64 (pt AJ pb - rovnaký
   token na oboch, na rozdiel od desktopu kde je to tiež 112/112, takže sa tu
   nič neprehadzuje), page-padding 16, Size/H2 mobil 38 (NIE fluid clamp -
   --text-6xl by pri 393px vyšiel ~34,25px, literál nižšie). Tagline ostáva 16
   na oboch (Size/Regular sa medzi módmi nemení).
   ══════════════════════════════════════════════════════════════════════════ */

/* Navy panel + zaoblenie sedia na `::before`, NIE na samotnej sekcii - rovnaký
   mechanizmus ako `section-base--dark` (changelog v1.23.9), reused 1:1.
   Dôvod: zaoblené sú len HORNÉ rohy, takže notch okolo nich ukazuje, čo je ZA
   sekciou - a to je sekcia NAD ňou (na /zakaznici/ hero-level3, bg-medium
   #ecf2f4), nie farba stránky. Vlastné pozadie sekcie preto slúži ako FARBA
   NOTCHU a default je `--color-bg` (biela) - kde je nad panelom iná farba,
   nastaví sa cez base control „Farba pozadia" (block_bg_color → inline
   `background`, prebije toto pravidlo) na konkrétnej inštancii, NIE hardcode
   v CSS - blok je zdieľateľný, iná stránka môže mať nad sebou inú sekciu.
   Nález (Check bugfix, 2026-08-14): pôvodne malo `.zn-lt` navy background aj
   radius na tom istom elemente, takže notch ukazoval transparentné pozadie
   Gutenberg wrapper divu → presvitala biela stránka, nie #ecf2f4 hero-level3. */
.zn-lt {
  position: relative;
  background: var(--color-bg);                  /* notch fill - default biela, override cez block_bg_color */
  padding-inline: var(--space-16);               /* page-padding 64 */
}
.zn-lt::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-text);                /* #023047 - skutočná farba panelu */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;  /* radius/xlarge 40, len hore */
}
.zn-lt > * { position: relative; z-index: 1; }   /* obsah nad ::before (vzor .zn-has-bg / .zn-sbase--dark) */
.zn-lt.zn-block {
  --zn-pt: var(--space-24);                      /* section-large 112 */
  --zn-pb: var(--space-24);                      /* section-large 112 */
}

.zn-lt__container {
  max-width: var(--container-max);               /* 1280 */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.zn-lt__title {
  display: flex;
  flex-direction: column;
  gap: 16px;                                     /* Figma Section Title gap 16 */
  max-width: 1024px;
  width: 100%;
}

.zn-lt__tagline-wrap { display: flex; align-items: center; }
.zn-lt__tagline {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-tagline);            /* Mix Regular Italic 420 */
  font-size: var(--text-base);                   /* Size/Regular 16 */
  line-height: 1.5;
  color: #fff;                                   /* scheme-a/text na tmavom = biela */
}

.zn-lt__content {
  display: flex;
  flex-direction: column;
  gap: 32px;                                     /* Figma Content gap 32 */
  width: 100%;
}
/* Celý nadpis (aj neakcentované časti) je v italic reze „Mix Regular Italic" —
   nejde o striedanie upright/italic ako pri hero-level3, len o farbu časti textu. */
.zn-lt__heading {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-tagline);
  font-size: var(--text-6xl);                    /* Size/H2 48 */
  line-height: 1.1;
  color: #fff;
}
/* <mark> = farebný úsek v strede vety, môže byť viackrát. Reset default
   prehliadačového žltého zvýraznenia — farbu dodáva modifier nižšie. */
.zn-lt__heading mark {
  background: none;
  font-style: inherit;
  color: var(--color-primary-lighter);           /* default = Krémová žltá #FDE9B4 (Figma) */
}

/* Farba akcentu cez modifier triedu na sekcii (rovnaká konvencia ako
   section-base .zn-sbase--accent-*) — prepíše default vyššie. */
.zn-lt--accent-secondary-dark  .zn-lt__heading mark { color: var(--color-secondary-dark); }
.zn-lt--accent-primary-dark    .zn-lt__heading mark { color: var(--color-primary-dark); }
.zn-lt--accent-secondary       .zn-lt__heading mark { color: var(--color-secondary); }
.zn-lt--accent-primary         .zn-lt__heading mark { color: var(--color-primary); }
.zn-lt--accent-secondary-light .zn-lt__heading mark { color: var(--color-secondary-light); }
/* „Bez farby" — dedí farbu nadpisu (inherit, nie zopakovaná hodnota), rovnaký
   dôvod ako section-base .zn-sbase--accent-none. */
.zn-lt--accent-none            .zn-lt__heading mark { color: inherit; }

/* ── Mobil (≤767.98px) ─────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .zn-lt { padding-inline: var(--space-4); }     /* page-padding 16 */
  /* Literály, NIE var(--space-16): ten je fluid clamp(2.5rem,4.45vw,4rem) a
     pri 393px sa vyhodnotí na svoje minimum 40px, nie na 64 - rovnaká pasca
     ako hero-level3/stats-1 (viď CONTEXT.md, 2026-08-14). */
  .zn-lt.zn-block { --zn-pt-m: 64px; --zn-pb-m: 64px; }  /* section-large mobil 64 / 64 */
  .zn-lt::before { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }     /* radius/large 24 */

  .zn-lt__title { gap: 12px; }                   /* Figma Section Title gap mobil 12 (z 16) */
  .zn-lt__content { gap: 24px; }                 /* Figma Content gap mobil 24 (z 32) */
  .zn-lt__heading { font-size: 38px; }            /* Size/H2 mobil - literál, --text-6xl je fluid clamp (~34,25px pri 393px) */
}