/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Section / Base / 2 (Figma node 566:14341)

   Tmavá sekcia (bg = --color-text #023047, rovnaká konvencia ako feature-dark:
   "Scheme A/Background Light" v tomto dizajne = literálne rovnaká navy farba
   ako globálny --color-text, nie samostatný token). Radius 40 hore (Figma
   rounded-tl/tr), pt = section-large (112, --space-24 clamp), pb = section-
   medium (80, --space-20 clamp).

   "Scheme A/Border" (rgba(253,233,180,0.6)) je Figma scheme-špecifický token
   pre túto tmavú sekciu (NIE globálny --color-border, ten je iná farba/kontext)
   - použitý pre zvislé oddeľovače medzi tagmi aj vodorovný nad popiskom karty,
   preto literál priamo v tomto súbore.

   Vlnitý oddeľovač pod sekciou (Figma 568:14514) = samostatný existujúci blok
   `zenturi/wave-sep` (variant white-on-dark, default) vkladaný v Gutembergu,
   nie súčasť tohto CSS.

   MOBIL: node 1181:70867 nájdený a overený (get_design_context + get_variable_defs,
   viď mediaquery nižšie) - NIE je to len škálovanie desktopu (section padding,
   radius aj H2 majú vlastné mobilné hodnoty, líšiace sa od naivného odhadu).

   BUGFIX (Maroš 2026-07-23, screenshot): rounďové rohy (--radius-xl hore) boli
   priamo na `.zn-sb2` (outer <section>) → notch v rohu ukazoval biele pozadie
   stránky (`body`/`.site-main`), nie farbu sekcie NAD touto (na tejto stránke
   je to `zenturi/bento-1`, bg-medium #ecf2f4). Fix: navy pozadie + radius sa
   presunuli na `::before` (position:absolute; inset:0), samotná `.zn-sb2`
   sekcia teraz nesie bg-medium ako VLASTNÉ pozadie - notch okolo rounded rohu
   tak ukazuje bg-medium (sedí s bento-1 nad ňou), nie biele. Rovnaký princíp
   ako `hero-level2` (outer wrapper = bg-medium, vnútorný box = vlastná farba +
   radius) - v tejto téme NEEXISTUJE generický "farba predchádzajúcej sekcie"
   systém (over check pred touto zmenou), ide o zámerný hardcode na KONKRÉTNY
   kontext tejto stránky (Komplet, hneď za bento-1). Ak sa `section-base-2`
   niekedy použije inde s inou sekciou nad ním, treba tento bg-medium prehodnotiť.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-sb2 {
  position: relative;
  background: var(--color-bg-medium);           /* vyplní rounded-corner notch - sedí s bento-1 nad touto sekciou */
  color: var(--color-white);
  padding-inline: var(--space-16);              /* page-padding 64 */
}
.zn-sb2::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-text);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;  /* 40 hore */
}
.zn-sb2.zn-block {
  --zn-pt: var(--space-24);                     /* section-large 112 */
  --zn-pb: var(--space-20);                     /* section-medium 80 */
}

.zn-sb2__container {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);              /* 1280 */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;                                    /* Figma Content gap - literál, mimo škály */
}

.zn-sb2__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);
  text-align: center;
}
.zn-sb2__heading-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);           /* Mix Regular Italic */
  color: var(--color-primary-lighter);          /* #fde9b4 */
}

/* ── Tag list (3 stĺpce) ─────────────────────────────────────────────────── */
.zn-sb2__tags {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);                          /* 32 */
  width: 100%;
}
.zn-sb2__divider {
  flex: none;
  align-self: stretch;
  width: 1px;
  background: rgba(253, 233, 180, 0.6);         /* Scheme A/Border (viď hlavička) */
}
.zn-sb2__tag {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);                          /* 4 */
  padding: var(--space-4);                      /* 16 */
  border-radius: var(--radius-xs);              /* 4 */
  text-align: center;
}
.zn-sb2__tag-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  /* Figma duotone na navy: main #FB8500 + svetlá vrstva #FDE9B4 (primary-lighter) —
     knižničné ikony majú soft fallback #FBD26A, preto explicitný override */
  --zn-ico-main: var(--color-primary-dark);
  --zn-ico-soft: var(--color-primary-lighter);
}
.zn-sb2__tag-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);                          /* 8 */
  width: 100%;
}
.zn-sb2__tag-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);                   /* Size/Large 20 */
  font-weight: var(--weight-medium);
  line-height: 1.5;
  color: var(--color-white);
}
.zn-sb2__tag-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.zn-sb2__tag-values {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;                                    /* Figma literál, mimo škály */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-tagline);           /* Mix Regular Italic */
  font-size: var(--text-6xl);                   /* Size/H2 48 */
  line-height: 1.1;
}
.zn-sb2__tag-value1,
.zn-sb2__tag-slash { color: var(--color-primary-light); }  /* #fbd26a */
.zn-sb2__tag-value2 { color: var(--color-secondary-light); }  /* #8ecae6 */
.zn-sb2__tag-info {
  align-self: flex-start;
  margin-top: 8px;                              /* Figma: info frame má vlastný pt-8 voči riadku */
  flex-shrink: 0;
  color: var(--color-white);
}
.zn-sb2__tag-period {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);                    /* Size/Small 14 */
  line-height: 1.5;
  color: var(--color-bg-medium);                /* #ecf2f4 - Figma "text-secondary" fallback v tejto scheme */
}
.zn-sb2__tag-desc {
  margin: 0;
  width: 100%;
  padding-top: var(--space-2);                  /* 8 */
  border-top: 1px solid rgba(253, 233, 180, 0.6);  /* Scheme A/Border */
  font-family: var(--font-display);
  font-size: var(--text-base);                  /* Size/Regular 16 */
  line-height: 1.5;
  color: var(--color-white);
}

/* ── Spodný text + CTA ───────────────────────────────────────────────────── */
.zn-sb2__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);                          /* div-padding-small 24 */
  width: 100%;
}
.zn-sb2__footer-text {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: var(--text-lg);                    /* 18 */
  line-height: 1.5;
  color: var(--color-white);
  text-align: center;
}
.zn-sb2__footer-text strong { font-weight: var(--weight-bold); }

/* ══ Tablet (≤1199.98px) - generický medzikrok (Figma preň nemá spec) ══════
   Tag padding NEmeniť na 0 (predošlý omyl) - mobilný node 1181:70867 potvrdil
   Tag drží p-16 aj tam, takže generický medzikrok ho môže len zdediť. ══════ */
@media (max-width: 1199.98px) {
  .zn-sb2__tags { flex-direction: column; align-items: stretch; gap: var(--space-6); }
  .zn-sb2__divider { width: 100%; height: 1px; align-self: auto; }
}

/* ══ Mobil (≤767.98px) - overené proti Figma node 1181:70867 + get_variable_defs
   (Section Padding/section-large=64 [!], section-medium=48, Radius/Large=24 [!],
   Size/H1=40, Size/H2=38 [!], Div Padding/div-padding-small=16, Page Padding=16,
   Tag List vlastný gap=8 literál). Hodnoty označené [!] sa líšia od pôvodného
   generického odhadu (pt bol 48 namiesto 64, radius 40 namiesto 24, H2 40 namiesto 38). */
@media (max-width: 767.98px) {
  .zn-sb2 {
    padding-inline: var(--space-4);             /* page-padding mobil 16 */
  }
  .zn-sb2::before {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;  /* 24 - NIE 40 ako desktop */
  }
  .zn-sb2.zn-block { --zn-pt-m: 64px; --zn-pb-m: 48px; }  /* section-large 64 / section-medium 48 - literály, --space-24/20 sú clampy */
  .zn-sb2__container { gap: var(--space-8); }   /* 32 */
  .zn-sb2__heading { font-size: 40px; }         /* Size/H1 mobilný mód (potvrdené, nezmenené) */
  .zn-sb2__tags { gap: 8px; }                   /* Figma literál (mobil vlastný, nie zdedený z tabletu) */
  .zn-sb2__tag-values { font-size: 38px; }      /* Size/H2 mobilný mód 38 (NIE 40 - opravené) */
  .zn-sb2__footer { gap: var(--space-4); }      /* div-padding-small mobil 16 (desktop 24) */
}