/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Bento 3 (Figma „Section / Bento 3", node 857:50594)

   SAMOSTATNÝ blok — vlastné `zn-b3__*` triedy, nezdieľa nič s `zenturi/bento-duo`
   ani `zenturi/bento-tabs` (len vizuálna inšpirácia štruktúrou konvencií témy).

   Svetlá sekcia (bg-medium #ecf2f4): center nadpis blok (max 768) + grid 2 riadkov.
   Riadok 1: Karta A (samostatná, obrázok hore) + vnorený stĺpec kariet B1/B2.
   Riadok 2: 2 ikonové karty (flex:1) + Karta C3 s pevnou šírkou 626px.

   Karty: biele pozadie, radius 12 (--radius-md — --radius-base je 16, nezodpovedá),
   shadow = --shadow-sm (Figma token "small-s", hodnota sedí presne, reuse).

   RESPONZIVITA (2026-07-21): tablet (≤1199.98px, generický medzikrok — Figma preň
   nemá samostatný spec; overené screenshotmi 768/1024: pevná šírka C3 626px +
   flex:1 karty kolabovali presne ako pri hero-level3/zenai-feature bugfixe) a mobil
   (≤767.98px, Figma node 1200:41570 — hodnoty cez `get_variable_defs`, mobilný mód).
   Horizontálne split karty (B1/B2/C3) sú od ≤1199.98px vertikálne: obrázok hore
   624/360 + obsah dole; mobilné obrázky sú INÉ kompozície než desktop (viď
   template.php <picture>). Mobilná typografia/paddingy až ≤767.98px.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-b3 {
  background: var(--color-bg-medium);           /* Scheme A/Background Medium #ecf2f4 */
  padding-inline: var(--space-16);              /* page-padding 64 */
}
.zn-b3.zn-block {
  --zn-pt: var(--space-20);                     /* section-medium 80 */
  --zn-pb: var(--space-20);                     /* section-medium 80 */
  --zn-pt-m: 48px;                              /* section-medium mobil 48 (Figma; default 0.5 škálovanie by dalo 24) */
  --zn-pb-m: 48px;
}

.zn-b3__container {
  max-width: var(--container-max);              /* max-width-xxlarge 1280 */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);                         /* Container gap 80 (nadpis blok ↔ grid) */
}

/* ── Nadpis blok (center, max 768) ── */
.zn-b3__head {
  max-width: 768px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);                          /* 24 */
  text-align: center;
}
.zn-b3__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-text);                     /* Scheme A/Text #023047 (svetlá sekcia) */
}
.zn-b3__heading-accent {
  display: block;
  font-style: italic;
  font-weight: var(--weight-tagline);           /* Mix Regular Italic */
  color: var(--color-secondary-dark);           /* #1b8098 */
}
.zn-b3__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);                    /* Size/Medium 18 */
  line-height: 1.5;
  color: var(--color-text);
}

/* ── Grid: 2 riadky, gap 32 medzi riadkami aj kartami v riadku ── */
.zn-b3__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                          /* 32 */
}
.zn-b3__row {
  display: flex;
  align-items: stretch;
  gap: var(--space-8);                          /* 32 */
  width: 100%;
}
/* Vnorený stĺpec B1/B2 (2. polovica riadku 1) — tvorí JEDNU flex:1 bunku riadku,
   vnútri má vlastné 2 karty na seba (nie je to samostatná karta ako A). */
.zn-b3__col-b {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                          /* 32 */
}

/* ── Spoločná báza kariet: biele pozadie, radius 12, shadow-sm (Figma "small-s") ── */
.zn-b3__card {
  background: var(--color-white);
  border-radius: var(--radius-md);              /* 12 (--radius-base je 16, nezodpovedá) */
  box-shadow: var(--shadow-sm);                  /* 0 2px 4px -2px rgba(19,91,108,.05), 0 4px 8px -2px rgba(19,91,108,.15) — token sedí presne, reuse */
  overflow: hidden;                              /* orezáva obrázky na radius rohov */
}
.zn-b3__card-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 40px;                              /* hardcode (rovnaká konvencia ako inde v téme: len 40/56 nadpisové veľkosti sa nehľadajú v tokenoch) */
  font-weight: var(--weight-regular);
  line-height: 1.1;
  color: var(--color-text);
}
.zn-b3__card-heading-accent {
  display: block;
  font-style: italic;
  font-weight: var(--weight-tagline);
  color: var(--color-secondary-dark);           /* teal akcent (len Karta A) */
}
.zn-b3__card-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);                  /* Size/Regular 16 */
  line-height: 1.5;
  color: var(--color-text);
}

/* ── Karta A: obrázok hore (624×360, gradient do bielej) + obsah ── */
.zn-b3__card--a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.zn-b3__card-a-img {
  position: relative;
  width: 100%;
  aspect-ratio: 624 / 360;
  overflow: hidden;
}
.zn-b3__card-a-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Obrázok „vplynie" do bielej karty pod ním (Figma: lineárny gradient 25.3 % priehľadná
   → 97.9 % plná biela, nie ostrý rez). */
.zn-b3__card-a-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 25.3%, var(--color-white) 97.9%);
}
.zn-b3__card-a-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                          /* 32 */
  padding: var(--space-4) var(--space-12) var(--space-12); /* pt 16, px 48, pb 48 */
}
.zn-b3__card-a-body .zn-b3__card-heading { font-size: 40px; }

/* ── Karty B1/B2: obrázok + obsah vedľa seba (B1 obrázok vľavo, B2 vpravo — poradie
   riadi DOM, žiadny CSS order swap potrebný). Obsah pevná šírka 264 (Figma). ── */
.zn-b3__card--b1,
.zn-b3__card--b2 {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
}
.zn-b3__card-b-img {
  flex: 1 1 0;
  min-width: 0;
}
.zn-b3__card-b-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zn-b3__card-b-body {
  flex: 0 0 264px;
  width: 264px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-8);                          /* 32 */
  padding: var(--space-8);                      /* 32 */
}

/* ── Karty C1/C2: ikona + nadpis + text, flex:1, padding 32 ── */
.zn-b3__card--icon {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                          /* 32 */
  padding: var(--space-8);                      /* 32 */
}
.zn-b3__icon { display: block; width: 52px; height: 52px; flex-shrink: 0; }

/* ── Karta C3: pevná šírka 626 (NIE flex:1), obrázok + obsah, padding 24 (výnimka) ── */
.zn-b3__card--c3 {
  flex: 0 0 626px;
  width: 626px;
  display: flex;
  align-items: stretch;
}
.zn-b3__card-c3-img {
  flex: 1 1 0;
  min-width: 0;
}
.zn-b3__card-c3-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zn-b3__card-c3-body {
  flex: 0 0 264px;                              /* rovnaký vzor ako B1/B2 (fix: bez width
                                                    text pretekal mimo karty, obrázok mal 0px) */
  width: 264px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-8);                          /* 32 */
  padding: var(--space-6);                      /* 24 — výnimka, ostatné karty majú 32 */
}

/* CTA: vzhľad z globálnej .btn--primary + .btn--arrow (DS). Lokálne nič neprepisujeme. */
.zn-b3__card-actions { margin-top: var(--space-1); } /* jemný odstup od textu (4) */

/* <picture> okolo obrázkov B1/B2/C3 (breakpoint-swap assetov v template.php) nesmie
   tvoriť vlastný layout box — img selektory vyššie ostávajú platné bezo zmeny. */
.zn-b3__card-b-img picture,
.zn-b3__card-c3-img picture { display: contents; }

/* ══════════════════════════════════════════════════════════════════════════
   TABLET (≤1199.98px) — generický medzikrok, Figma preň nemá samostatný spec.
   Overené screenshotmi 768/1024: C3 (pevných 626px) pretekala viewport a
   flex:1 karty sa tlačili na prúžky so slovom na riadok — rovnaký kolaps ako
   pri hero-level3. Stack na 1 stĺpec, split karty vertikálne (obrázok hore
   624/360 — mobilná kompozícia assetu cez <picture> v template). Desktop
   typografia/paddingy tu zámerne ostávajú (mobilné až ≤767.98px), rovnaký
   vzor ako zenai-feature.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1199.98px) {
  .zn-b3__grid { gap: var(--space-5); }         /* 20 (Figma mobil: efektívne 20 medzi všetkými kartami) */
  .zn-b3__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);                        /* 20 */
  }
  /* Desktopové flex:1 1 0 by v column smere kolabovalo bunky na 0 výšku
     (flex-basis 0 v hlavnej osi) — všetky bunky stacku sú flex:none/plná šírka. */
  .zn-b3__card--a,
  .zn-b3__col-b,
  .zn-b3__card--icon {
    flex: none;
    width: 100%;
  }
  .zn-b3__col-b { gap: var(--space-5); }        /* 20 */

  /* B1/B2: horizontálny split → vertikál, obrázok hore (B2 má obsah v DOM prvý → order) */
  .zn-b3__card--b1,
  .zn-b3__card--b2 {
    flex: none;                                 /* desktop 1 1 0 kolabuje v column col-b */
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .zn-b3__card--b2 .zn-b3__card-b-img { order: -1; }
  .zn-b3__card-b-img {
    flex: none;
    width: 100%;
    aspect-ratio: 624 / 360;                    /* rovnaký rám ako Karta A */
  }
  .zn-b3__card-b-body {
    flex: none;
    width: 100%;
  }

  /* C3: pevná šírka preč, identická vertikálna karta ako ostatné */
  .zn-b3__card--c3 {
    flex: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .zn-b3__card-c3-img {
    flex: none;
    width: 100%;
    aspect-ratio: 624 / 360;
  }
  .zn-b3__card-c3-body {
    flex: none;
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIL (≤767.98px, Figma node 1200:41570). Hodnoty z mobilného módu
   (`get_variable_defs`): Size/H1 40 (akcent 56 literál — vzor „akcent väčší
   než základ" ako hero-level3/section-base) · Size/Medium 16 · Size/H3 32
   (akcent Karty A 40 literál) · page-padding 16 · section-medium 48 (hore
   v --zn-pt-m) · div-padding-large 24 · Content gapy 20/8/16.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .zn-b3 { padding-inline: var(--space-4); }    /* page-padding mobil 16 */

  .zn-b3__head { gap: var(--space-5); }         /* Content gap 20 (z 24) */
  .zn-b3__heading { font-size: 40px; }          /* Size/H1 mobil; akcent dedí 40 — POZOR:
                                                   JSX literál 56 = desktop mód (rovnaká pasca
                                                   ako hero); meraním Figma PNG overené, že
                                                   akcent = základ (šírka riadku 260px ≈ 40px,
                                                   pri 56px by sa zalomil) */
  .zn-b3__text { font-size: var(--text-base); } /* Size/Medium mobil 16 (z 18) */

  .zn-b3__card-heading { font-size: 32px; }     /* Size/H3 mobil (z 40) */
  .zn-b3__card-a-body .zn-b3__card-heading { font-size: 32px; }
  .zn-b3__card-heading-accent {
    display: inline;                            /* Figma mobil: akcent Karty A tečie v riadku
                                                   (desktop = vlastný riadok cez display:block);
                                                   veľkosť dedí 32 (JSX literál 40 = desktop mód,
                                                   meraním: celý titulok 293px = všetko 32px) */
  }

  /* Obsahy kariet: padding 24 (div-padding-large mobil), heading↔text gap 16;
     Karta A pt 8 / px+pb 24, text↔CTA 20 (16 + existujúci margin-top 4 na Actions) */
  .zn-b3__card-a-body {
    gap: var(--space-4);                        /* 16 */
    padding: var(--space-2) var(--space-6) var(--space-6); /* pt 8, px 24, pb 24 */
  }
  .zn-b3__card-b-body,
  .zn-b3__card-c3-body {
    gap: var(--space-4);                        /* 16 */
    padding: var(--space-6);                    /* 24 (C3 mala 24 už na desktope) */
  }
  .zn-b3__card--icon {
    gap: var(--space-2);                        /* ikona ↔ nadpis 8 (Content Top gap) */
    padding: var(--space-6);                    /* 24 */
  }
  .zn-b3__card--icon .zn-b3__card-text { margin-top: var(--space-2); } /* nadpis ↔ text 8+8=16 */
}