/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Ako Zenturi rieši problémy
   Tab prepínač: Výhody (bento grid) / Funkcie (karuzel) / Riešenie pre váš biznis.
   Hodnoty 1:1 z Figmy (desktop). Mobil čaká na dodanie mobilného frame-u.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-bt {
  background: var(--color-bg-medium);
  --zn-pt: var(--space-12);                    /* section-small 48 */
  --zn-pb: var(--space-20);                    /* section-medium 80 */
  padding-inline: var(--space-16);             /* padding-global 64 */
  /* karuzel vytŕča k pravej hrane viewportu - sekcia ho orezáva */
  overflow-x: hidden;
  overflow-x: clip;
  /* farby inline SVG ikon (rovnaký mechanizmus ako hero) */
  --zn-ico-main: var(--color-primary-dark);
  --zn-ico-soft: var(--color-primary-light);
}
/* Spacing defaulty cez zn-block var systém (vyššia špecificita než components.css) */
.zn-bt.zn-block { --zn-pt: var(--space-12); --zn-pb: var(--space-20); }

.zn-bt__container {
  max-width: 1280px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);                        /* hlavička ↔ obsah 80 */
}

/* ── Hlavička ── */
.zn-bt__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);                         /* 16 */
  max-width: 768px;                            /* max-width-large */
  margin-inline: auto;
  text-align: center;
}
.zn-bt__tagline {
  margin: 0;
  font-size: var(--text-base);
  font-style: italic;
  font-weight: var(--weight-tagline);          /* Mix Regular Italic 420 */
  line-height: 1.5;
  color: var(--color-text);
}
.zn-bt__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-7xl);                  /* H1 škála 56 */
  font-weight: var(--weight-regular);
  line-height: 1.1;
  color: var(--color-text);
}
/* akcent tečie v texte - zalamuje sa prirodzene */
.zn-bt__accent {
  font-style: italic;
  font-weight: var(--weight-tagline);
  color: var(--color-secondary-dark);
}
/* karta 1 má akcent na samostatnom riadku (Figma: dva blokové odseky) */
.zn-bt__accent--block { display: block; }

/* ── Tab prepínač ── */
.zn-bt__component {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);                         /* taby ↔ panel 32 */
}

.zn-bt__tabs {
  display: inline-flex;
  align-items: flex-start;
  padding: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);           /* 16 */
}
.zn-bt__tab {
  display: grid;                               /* label + rezerva sa prekrývajú */
  place-items: center;
  padding: 10px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);         /* 12 */
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), font-weight var(--transition-base);
}
.zn-bt__tab-label { grid-area: 1 / 1; }
/* Neviditeľná kópia v semibold rezervuje šírku - inak by tab bar pri prepnutí poskočil */
.zn-bt__tab::after {
  content: attr(data-label);
  grid-area: 1 / 1;
  font-weight: var(--weight-semibold);
  visibility: hidden;
}
.zn-bt__tab.is-active {
  background: var(--color-bg);
  border-color: var(--color-border);
  font-weight: var(--weight-semibold);
  filter: drop-shadow(0 12px 8px rgba(19, 91, 108, .15)) drop-shadow(0 4px 3px rgba(19, 91, 108, .05));
}
.zn-bt__tab:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.zn-bt__panel { width: 100%; }
.zn-bt__panel[hidden] { display: none; }

/* ══ Tab Výhody - bento grid ═══════════════════════════════════════════════ */
.zn-bt__bento {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                         /* riadky 32 */
}
.zn-bt__row {
  display: flex;
  align-items: stretch;
  gap: var(--space-8);                         /* karty 32 */
}
.zn-bt__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.zn-bt__col > .zn-bt-card { flex: 1 1 0; }
.zn-bt__row--top > .zn-bt-card--big { flex: 1 1 0; min-width: 0; }
.zn-bt__row--bottom > .zn-bt-card--icon { flex: 1 1 0; min-width: 0; }
/* Figma: široká karta má fixnú šírku 626 */
.zn-bt__row--bottom > .zn-bt-card--wide { flex: 0 0 626px; max-width: 626px; }

.zn-bt-card {
  position: relative;
  display: flex;
  background: var(--color-bg);
  border-radius: var(--radius-md);             /* 12 */
  box-shadow: var(--shadow-sm);                /* small-s z Figmy */
  overflow: hidden;
}
.zn-bt-card--big,
.zn-bt-card--icon { flex-direction: column; }
.zn-bt-card--split { flex-direction: row; align-items: stretch; }

/* ── Médiá v karte ── */
.zn-bt-card__media {
  position: relative;
  overflow: hidden;
}
.zn-bt-card__media picture { display: contents; }  /* wrapper mimo layoutu - img štýluje pravidlo nižšie */
.zn-bt-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;                        /* screenshot sedí hore, dole sa stráca v gradiente */
}
/* veľká karta: obrázok hore cez celú šírku + prechod do bielej (Figma) */
.zn-bt-card__media--wide {
  width: 100%;
  aspect-ratio: 624 / 360;
}
.zn-bt-card__media--wide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 44.663%, var(--color-bg) 97.857%);
}
/* split karty: obrázok vypĺňa polovicu karty na plnú výšku */
.zn-bt-card__media--fill {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
}

/* ── Split karty: nesmieme odrezať fade zapečený v obrázku ───────────────────
   Vizuály split kariet majú prechod do bielej ZAPEČENÝ v rastri (Ján ich tak
   exportoval z Figmy) - `vytazenie.png` ho má vpravo v poslednom ~4 % šírky
   (zdroj 584-608 z 624), `mobil.png` vľavo (zdroj 0-100 zo 600). CSS gradient
   sa preto pridať NESMIE, bol by dvojitý (precedens bento-1 v1.21.20).

   Lenže štvorcový zdroj (600/624) v úzkom boxe (~289x324) sa cez `object-fit:
   cover` orezáva vodorovne, a pri `object-position: 50%` padne orez presne na
   ten okraj, kde fade je: karta 6 videla zdroj len 34-590, teda z fadeu 584-608
   ostal zlomok → obrázok končil ostrou zvislou hranou (to hlásil Maroš).

   Fix = zakotviť obrázok na tú hranu, ktorá sa dotýka TEXTU, nech sa oreže tá
   druhá (lícuje s vonkajším okrajom karty, tam sa nič nestráca):
     - obrázok vľavo, text vpravo  → `right` (karty 2 a 6)
     - `--rev` (obrázok vpravo, text vľavo) → `left` (karta „Pracujte odkiaľkoľvek")
   Ako vedľajší efekt to dáva rozumné správanie aj pre obrázok nahraný klientom:
   pri okraji k textu ostane viditeľné to, čo naň nadväzuje.

   Len >=992: pod tým je split karta stackovaná (`flex-direction: column` nižšie)
   a médium má landscape pomer, takže sa vodorovne neorezáva vôbec. */
@media (min-width: 992px) {
  .zn-bt-card--split .zn-bt-card__media--fill img { object-position: right top; }
  .zn-bt-card--split.zn-bt-card--rev .zn-bt-card__media--fill img { object-position: left top; }
}

/* ── Obsah karty ── */
.zn-bt-card__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-8);                         /* 32 */
  padding: var(--space-8);                     /* 32 */
}
/* veľká karta: pt 16 / px 48 / pb 48 */
.zn-bt-card__content--big {
  flex: 0 0 auto;
  padding: var(--space-4) var(--space-12) var(--space-12);
}
/* karta 2: textový stĺpec má vo Figme fixnú šírku 264 */
.zn-bt-card__content--narrow { flex: 0 0 auto; }
.zn-bt-card__content--narrow .zn-bt-card__text-wrap { width: 264px; }
/* karta 3: Content gap 24 (nie 32) */
.zn-bt-card__content--cta { gap: var(--space-6); }
/* karta 6: padding 24 */
.zn-bt-card__content--tight { padding: var(--space-6); }
/* Ikonové karty (4/5): obsah zarovnaný HORE, nie na stred - ikona aj nadpis
   tak držia rovnakú výšku naprieč kartami bez ohľadu na dĺžku popisu (Figma
   Row = items-start, karty rovnako vysoké; node 19:3259 / 20:4296). */
.zn-bt-card--icon .zn-bt-card__content { justify-content: flex-start; }

.zn-bt-card__icon {
  display: block;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  margin-bottom: var(--space-2);               /* ikona ↔ nadpis 8 */
}
.zn-bt-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-5xl);                  /* H3 škála 40 */
  font-weight: var(--weight-regular);
  line-height: 1.1;
  color: var(--color-text);
}
.zn-bt-card__title--tight { letter-spacing: -0.32px; }  /* Figma karta 1 */
.zn-bt-card__text {
  margin: var(--space-4) 0 0;                  /* nadpis ↔ text 16 */
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
}
.zn-bt-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);                         /* 24 */
}

/* Override globálnych .btn hodnôt - components.css sa načítava PO blokovom CSS,
   preto 2-triedna špecificita. Figma: link CTA má výšku 48 a ikonu 32 (nie 32/18). */
.zn-bt .btn--link { height: 48px; color: var(--color-text); }
.zn-bt .btn--link svg { width: 32px; height: 32px; }
.zn-bt .zn-bt__cta-arrow { flex-shrink: 0; }

/* ══ Tab Riešenie pre váš biznis - mriežka 3×3 odvetví ═════════════════════ */
.zn-bt__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);                         /* Figma 32 */
  /* Figma: karty sú self-start - nenaťahujú sa na výšku najvyššej v riadku */
  align-items: start;
  width: 100%;
}

/* Figma: karta odvetvia je BEZ tieňa (na rozdiel od kariet vo Výhodách) */
.zn-bt-card--industry { box-shadow: none; }
/* Fotka má svetlomodré pozadie aj vlnitú bielu spodnú hranu zapečenú priamo v PNG,
   takže gradient do bielej (z veľkej karty vo Výhodách) sa tu nesmie kresliť. */
.zn-bt-card--industry .zn-bt-card__media--wide::after { content: none; }

.zn-bt-card__content--industry {
  flex: 0 0 auto;
  padding: var(--space-4) var(--space-6) var(--space-6);  /* pt 16 / px 24 / pb 24 */
}
.zn-bt-card__title--industry {
  font-size: var(--text-4xl);                  /* H4 škála 32 */
  font-weight: var(--weight-medium);           /* Sans Medium 550 */
  line-height: 1.3;
  letter-spacing: -0.32px;
}
/* Figma: text odvetvia je 18px (Size/Medium) */
.zn-bt-card--industry .zn-bt-card__text { font-size: var(--text-lg); }
/* ...okrem dvoch kariet, ktoré majú v dizajne 16px (Výroba, IT) - per-karta prepínač */
.zn-bt-card--industry .zn-bt-card__text--sm { font-size: var(--text-base); }

/* Riešenie karuzel: PC = statická mriežka (.zn-bt__grid vnútri .zn-bt__slider--grid),
   navigácia skrytá. Slider správanie sa zapína až na mobile (viď @media 767.98). */
.zn-bt__slider--grid .zn-bt__nav { display: none; }

/* ══ Tab Funkcie - karuzel ═════════════════════════════════════════════════ */
.zn-bt__slider {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);                        /* track ↔ navigácia 80 */
}

.zn-bt__track {
  display: flex;
  gap: 24px;                                   /* Figma Timeline progress gap 24 */
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Vpravo track vytŕča až k hrane viewportu (ďalšia karta peekuje cez section
     padding), vľavo rezerva na presah timeline línie + dole na drop-shadow.
     Negatívne marginy držia zarovnanie s containerom. */
  padding: 0 calc(50vw - 50%) 32px 24px;
  margin: 0 calc(50% - 50vw) -32px -24px;
  scroll-padding-left: 24px;
}
.zn-bt__track::-webkit-scrollbar { display: none; }
@media (pointer: fine) {
  .zn-bt__track { cursor: grab; }
}

/* ── Prechod na pravej hrane karuzelu ────────────────────────────────────────
   NAŠE riešenie (Maroš 2026-08-03), NIE hodnota z Figmy. Dizajn pravú hranu
   vôbec nemodeluje: v 669:17769 karuzel z frame-u len vytečie a odreže sa
   natvrdo, žiadna gradient vrstva tam nie je (overené SCREENSHOTOM a meraním
   pixelov - biele telo karty 4 drží rgb(255,255,255) až po hranu 1440 - nie
   exportovaným kódom, ten podľa CLAUDE.md overlay vrstvy nezachytáva).
   Bez neho sa posledná viditeľná karta reže ostrou zvislou čiarou.

   Šírka 160 = ten istý pás ako .zn-hero__fade (reuse), farbu netreba zadávať:
   maska obsah sprehľadní a ukáže sa pozadie sekcie (--color-bg-medium), takže
   prechod ostane správny aj keby sa pozadie sekcie zmenilo.

   Maska namiesto prekryvného spanu: nepotrebuje ďalší DOM ani z-index, drží sa
   pravej hrany viditeľného boxu aj počas scrollu a zjemní aj drop-shadow kariet.
   Len desktop - mobilný karuzel je odsúhlasený a nemení sa.
   `.is-at-end` / `.is-at-start` (JS, rovnaké podmienky ako disabled stavy šípok)
   masku na danej strane vypnú: na konci scrollu už niet čo prekrývať a fade by
   len zjedol krajnú kartu. Pri obsahu bez pretečenia sú aktívne obe naraz, takže
   sa nekreslí vôbec.

   Ľavá strana je symetrická k pravej (v1.22.12): v pokojovom stave je vypnutá,
   ale po odscrollovaní by karty inak mizli za ostrú hranu na x=56 rovnako ako
   predtým vpravo. Figma nemá prechod ani na jednej strane - platí pre ňu to isté
   zdôvodnenie ako vyššie. */
@media (min-width: 768px) {
  .zn-bt__track {
    --zn-bt-fade: 160px;
    --zn-bt-fade-l: 160px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--zn-bt-fade-l), #000 calc(100% - var(--zn-bt-fade)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--zn-bt-fade-l), #000 calc(100% - var(--zn-bt-fade)), transparent 100%);
  }
  .zn-bt__track.is-at-end { --zn-bt-fade: 0px; }
  .zn-bt__track.is-at-start { --zn-bt-fade-l: 0px; }
}
.zn-bt__track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}

.zn-bt-fcard {
  flex: 1 0 373px;                             /* Figma: min-width 373, pod ňu karta nejde */
  min-width: 373px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  /* drop-shadow (nie box-shadow) - tieň musí kopírovať vlnitú spodnú hranu */
  filter: drop-shadow(0 12px 8px rgba(19, 91, 108, .15)) drop-shadow(0 4px 3px rgba(19, 91, 108, .05));
}
.zn-bt-fcard__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 480px;                               /* Figma Content 480 */
  background: var(--color-bg);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.zn-bt-fcard__media {
  position: relative;
  width: 100%;
  height: 220px;
  min-height: 180px;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.zn-bt-fcard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.zn-bt-fcard__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 66.389%, var(--color-bg) 100%);
}

/* Timeline riadok: Figma šírka 394 v karte 373 - línia zámerne vytŕča cez hrany
   karty (10.5px na stranu), aby opticky spájala susedné karty cez medzeru. */
.zn-bt-fcard__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);                         /* 8 */
  width: calc(100% + 21px);
  margin-inline: -10.5px;
}
.zn-bt-fcard__line {
  height: 3px;
  border-radius: var(--radius-xs);             /* 4 */
  background: var(--color-primary-light);
}
.zn-bt-fcard__line--start { flex: 0 0 24px; }  /* Figma fix 24 */
.zn-bt-fcard__line--end { flex: 1 1 0; min-width: 0; }
.zn-bt-fcard__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-right: var(--space-2);
  flex-shrink: 0;
}
.zn-bt-fcard__icon {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;                              /* v natesnanom riadku sa ikona inak scvrkne */
}
.zn-bt-fcard__label {
  font-size: var(--text-base);
  font-style: italic;
  font-weight: var(--weight-tagline);
  line-height: 1.5;
  color: var(--color-text);
  white-space: nowrap;
}

.zn-bt-fcard__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                         /* nadpis ↔ text 8 */
  width: 100%;
  height: 220px;
  min-height: 180px;
  padding: var(--space-2) var(--space-6) 0;    /* pt 8 / px 24 */
}
.zn-bt-fcard__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-5xl);                  /* 40 */
  font-weight: var(--weight-regular);
  line-height: 1.1;
  color: var(--color-text);
}
.zn-bt-fcard__text {
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
}
/* Vlnitá spodná hrana karty (Figma Vector 373 x 27.18) */
.zn-bt-fcard__wave {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Navigácia karuzelu ── */
.zn-bt__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;               /* šípky po krajoch, bodky v strede */
  width: 100%;
}
.zn-bt__dots { display: flex; gap: var(--space-2); }
.zn-bt__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-text);
  opacity: .2;
  cursor: pointer;
  transition: opacity var(--transition-base);
}
.zn-bt__dots button.is-active { opacity: 1; }
.zn-bt__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;                                 /* Figma: padding 12 + ikona 24 */
  height: 48px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);             /* 12 */
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), opacity var(--transition-base);
}
.zn-bt__arrow:hover:not(:disabled) {
  background: var(--color-bg-medium);
  border-color: var(--color-text-secondary);
}
.zn-bt__arrow:disabled { opacity: .35; cursor: default; }
.zn-bt__arrow svg { flex-shrink: 0; }

/* ── Responzivita ────────────────────────────────────────────────────────────
   Mobil (≤767.98) = Figma frame 1175:43867 „Vyhody-Bento" (Preco Zenturi - M,
   393px) 1:1: hodnoty overené cez get_variable_defs (mód tokenov). Bento = jeden
   stĺpec, plná šírka, obrázok hore. 768-1279 = plynulý medzistupeň (Figma tablet
   nie je zadaný). */
@media (max-width: 1279.98px) {
  .zn-bt__row { flex-wrap: wrap; }
  .zn-bt__row--bottom > .zn-bt-card--wide { flex: 1 1 100%; max-width: none; }
}
@media (max-width: 991.98px) {
  .zn-bt__row { flex-direction: column; }
  /* mriežka odvetví (Riešenie) stackuje na 1 stĺpec pod rovnakým breakpointom */
  .zn-bt__grid { grid-template-columns: 1fr; }
  /* stĺpcový stack: basis auto (nie 0) - karty s flex:1 1 0 z desktopu by sa
     v zvislom smere zložili na nulovú výšku (týkalo sa kariet 1-3). */
  .zn-bt__row--top > .zn-bt-card--big,
  .zn-bt__col,
  .zn-bt__col > .zn-bt-card,
  .zn-bt__row--bottom > .zn-bt-card--icon { flex: 1 1 auto; min-width: 0; }
  .zn-bt-card--split { flex-direction: column; }
  /* karta 3 (desktop text-vľavo) má na mobile obrázok HORE (Figma 1175:43867) */
  .zn-bt-card--split.zn-bt-card--rev { flex-direction: column-reverse; }
  /* stacknuté split karty: obrázok hore v pomere 624/360 (Figma mobil = landscape) */
  .zn-bt-card__media--fill { flex: 0 0 auto; aspect-ratio: 624 / 360; width: 100%; }
  .zn-bt-card__content--narrow .zn-bt-card__text-wrap { width: auto; }
}
@media (max-width: 767.98px) {
  /* Sekcia: Figma mobil pt 32 / px 16 / pb 48 (zachovaný), BEZ radiusu (rovnako
     ako desktop - variant Výhody 1175:43867 nemá zaoblený vrch). */
  /* Sekcia: Figma mobil pt 32 (section-small) / px 16 / pb 48 (section-medium).
     POZOR: .zn-block mobil (≤767) berie padding ×0.5 (default calc), čo tu dávalo
     pt 20 / pb 24 → obsah natlačený na vlnku. Explicitné --zn-pt-m/--zn-pb-m obídu
     ×0.5 a nastavia hodnoty.
     pb = section-medium 48 + 20px VEDOMÉ navýšenie nad Figma token (klientský vizuálny
     review, Maroš 2026-07-16: 48px pôsobilo tesne na vlnku). NIE je to bug ani odchýlka
     od dizajnu na opravu → NEvracať späť na čistý var(--space-20). */
  .zn-bt { --zn-pt-m: var(--space-8); --zn-pb-m: calc(var(--space-20) + 20px); padding-inline: var(--space-4); }
  .zn-bt__container { gap: 3rem; }               /* Container: hlavička ↔ komponent 48 (fixné vo Figme) */
  .zn-bt__head { gap: var(--space-3); }          /* tagline ↔ nadpis 12 */
  .zn-bt__component { gap: var(--space-6); }      /* taby ↔ karty 24 */
  /* Pill hugne obsah (base inline-flex); max-width + scroll = tab bar sa na úzkom
     telefóne dá doscrollovať (a znesie aj 4. tab). Scrollbar skrytý rovnakým
     spôsobom ako karuzel tracky nižšie - vo Figme žiadny nie je. */
  .zn-bt__tabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    /* Figma Tabs = 361x52, náš pill mal 54: `border` rozširuje box o 2px, kým Figma
       stroke je INSIDE. Ten istý prípad, aký v1.21.7 riešila na `.zn-bt__tab` -
       vtedy sa na obal pilulky zabudlo. Inset tieň kreslí to isté, ale do výšky
       sa nepočíta. */
    border-width: 0;
    box-shadow: inset 0 0 0 1px var(--color-border);
  }
  .zn-bt__tabs::-webkit-scrollbar { display: none; }
  /* Figma mobil (Tabs 361×52, taby 86/86/184 × 44) má stroke INSIDE, kým CSS border
     rozširuje box o 2px na tab - pri 3 taboch +6px navyše. Spolu s ::after rezervou
     to prelialo pill o 19px a zjedlo pravý padding posledného tabu. border-width 0
     + inset tieň drží rovnakú kresbu, ale do šírky sa nepočíta. */
  .zn-bt__tab { padding: 10px 16px; flex-shrink: 0; border-width: 0; }  /* tab px 24 → 16 */
  .zn-bt__tab.is-active { box-shadow: inset 0 0 0 1px var(--color-border); }
  /* Bento: jeden stĺpec, medzera medzi kartami 20 */
  .zn-bt__bento,
  .zn-bt__row,
  .zn-bt__col { gap: var(--space-5); }           /* 20 */
  /* Obsah kariet: padding 24, vnútorná medzera 20 (Figma div-padding mobil) */
  .zn-bt-card__content { padding: var(--space-6); gap: var(--space-5); }
  .zn-bt-card__content--big { padding: var(--space-2) var(--space-6) var(--space-6); }  /* pt8/px24/pb24 */
  .zn-bt-card__content--narrow { padding-top: 0; }  /* karta 2: obsah hneď pod obrázkom */
  /* Funkcie karuzel: karta = Figma min-width 303 (obrázky = tie isté zdroje ako
     desktop, object-fit dorobí užší crop pre 303px kartu - mobilný frame je karuzel
     snapshot, kde sa samostatne exportuje len 1. karta). */
  .zn-bt-fcard { flex-basis: 303px; min-width: 303px; }
  /* Obsah karty: mobilné div-padding-small = 16 (desktop 24). pt 8 ostáva. */
  .zn-bt-fcard__content { padding-inline: var(--space-4); }

  /* ── Riešenie: mriežka → karuzel (rovnaký mechanizmus/JS ako Funkcie) ──────
     .zn-bt__grid sa mení na horizontálny scroll-snap track (initSlider ho nájde
     ako fallback), navigácia sa zobrazí. Full-bleed do pravej hrany + peek ďalšej
     karty, identické s .zn-bt__track. */
  .zn-bt__slider--grid .zn-bt__grid {
    display: flex;
    grid-template-columns: none;
    align-items: stretch;          /* prebíja base .zn-bt__grid align-items:start → karty rovnako vysoké */
    /* Base `.zn-bt__grid` má `width: 100%`, čo je tu chyba: šírku fixuje na
       kontajner (361) a negatívne marginy ju už nerozšíria - track potom končil
       na x=353 a vpravo ostávalo 40px pozadia, kým Figma (1176:64565) má Row od
       x=0 s kartami 265+8, teda karuzel presahuje cez section padding až za hranu.
       `auto` = šírka sa dopočíta z marginov ako pri `.zn-bt__track` (ten `width`
       nemá, preto bleedoval správne už predtým). */
    width: auto;
    /* Figma 1176:64565: karty 265 s krokom 273 → medzera 8 (nie 24 ako v karuzeli
       Funkcií, ktorý mobilný frame nemá a preto si drží desktopových 24). */
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 calc(50vw - 50%) 32px 24px;
    margin: 0 calc(50% - 50vw) -32px -24px;
    scroll-padding-left: 24px;
  }
  .zn-bt__slider--grid .zn-bt__grid::-webkit-scrollbar { display: none; }
  .zn-bt__slider--grid .zn-bt__nav { display: flex; }
  /* Karta odvetvia = slider item: Figma mobil min-width 265, scroll-snap. */
  .zn-bt__slider--grid .zn-bt-card--industry {
    flex: 0 0 265px;
    min-width: 265px;
    scroll-snap-align: start;
  }
  /* Obsah karty odvetvia na mobile: Figma pt 8 / px 16 / pb 16 (prebíja generický 24). */
  .zn-bt__slider--grid .zn-bt-card__content--industry {
    padding: var(--space-2) var(--space-4) var(--space-4);
  }
  /* Figma (node 1176:64576/64577): karty majú fixnú výšku, dlhší text sa OREZÁVA
     (overflow-hidden + ellipsis), karta nerastie podľa obsahu. Text = 3 riadky
     (potvrdené screenshotom - „...ustrážte si mar..."). Spolu s align-items:stretch
     = všetkých 9 kariet rovnako vysokých. */
  .zn-bt__slider--grid .zn-bt-card--industry .zn-bt-card__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}