/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Section / Bento 1 (Figma node 566:14340, Relume layout-368)

   SAMOSTATNÝ blok — vlastné `zn-b1__*` triedy. Prvá sekcia pod hero na
   stránke "Zenturi Komplet". JEDEN riadok, žiadny nadpis blok (na rozdiel od
   bento-3): Karta A (obrázok hore, flex:1, CTA) + vnorený stĺpec dvoch 50/50
   split kariet B1 (obrázok vľavo)/B2 (obrázok vpravo).

   Karty: biele pozadie, radius 12 (--radius-md), shadow = --shadow-sm (Figma
   token "small-s", hodnota sedí presne — reuse z bento-3, rovnaký token).
   Karta A preberá 1:1 rozmery/paddingy z bento-3 Karty A (identický Figma
   vzor: obrázok 624×360 s gradientom do bielej + obsah). Karty B1/B2 sú INÝ
   pomer než bento-3 B1/B2 (tam obsah pevných 264px + obrázok flex:1, tu
   50/50 flex split s paddingom 32 na oboch stranách — iný Figma spec).

   Sekcia: pt = section-small (48, asymetrické voči bento-3 ktorý má pt=pb=80),
   pb = section-medium (80).

   GRADIENT: Karta A má fade-do-bielej (::after, stopy 44.663%/97.857% - Figma presne, OPRAVENÉ
   v1.14.7, predtým omylom 25.3%/97.9% prevzaté z bento-3). Karty B1/B2 majú fade VŠADE, len
   smer sa mení podľa layoutu (Maroš 2026-07-23, opravené po pôvodnom mylnom závere "desktop
   split nemá fade" - Figma flattened export ho nezachytil ako samostatný element ani tu, presne
   ako v stackovanom layoute, get_design_context na tento typ overlay jednoducho nespoľahlivý):
     - Desktop 50/50 split (obrázok vľavo/vpravo, na výšku): HORIZONTÁLNY fade smerom k obsahu
       (B1 fade doprava, B2 fade doľava - rovnaké stopy 44.663%/97.857%, len os `to right`/`to left`).
     - Stackovaný layout ≤1199.98px (obrázok hore): VERTIKÁLNY fade (`to bottom`), rovnako ako Karta A.

   RESPONZIVITA: tablet (≤1199.98px) ostáva generický medzikrok (Figma preň
   nemá spec). Mobil (≤767.98px) overený 1:1 proti Figma node 1181:70866 +
   get_variable_defs (Section Padding/section-small=32, section-medium=48,
   Div Padding/div-padding-medium=20, Size/H3=32 — mobilný mód). Karta A aj B1
   majú na mobile pt=0 (obsah prilieha priamo pod obrázok — literálny Figma
   export bez pt- triedy), Karta B2 (rastový graf) má p-24 uniform (jediná
   výnimka, overené priamo v exporte, nie odhadnuté). Pozn.: accent span Karty
   A vo Figme niesol text-[40px] na mobilnom frame — to je desktopový literál
   presiaknutý do mobil frame-u (rovnaká „Auto (Desktop)" pasca ako pri hero
   2026-07-12), get_variable_defs potvrdil Size/H3=32 pre mobil → ignorované,
   ponechané jednotné 32px (accent nededituje font-size, dedí z rodiča).
   Medzitým sa ten 40px override do mobilnej query aj tak dostal a v1.22.16 ho
   zase odstránila — meraním ink šírok proti renderu, viď komentár pri pravidle.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-b1 {
  background: var(--color-bg-medium);           /* Scheme A/Background Medium #ecf2f4 */
  padding-inline: var(--space-16);              /* page-padding 64 */
}
.zn-b1.zn-block {
  --zn-pt: var(--space-12);                     /* section-small 48 */
  --zn-pb: var(--space-20);                     /* section-medium 80 */
  --zn-pt-m: var(--space-8);                    /* section-small mobil 32 (default 0.5 škálovanie by dalo 24) */
  --zn-pb-m: 48px;                              /* section-medium mobil 48 — literál ako bento-3
                                                   (--space-12 je clamp, na mobile by dal len 40px) */
}

.zn-b1__container {
  max-width: var(--container-max);              /* max-width-xxlarge 1280 */
  margin-inline: auto;
}

.zn-b1__row {
  display: flex;
  align-items: stretch;                          /* Karta A a stĺpec B rovnako vysoké (Figma auto-layout hug dáva
                                                     rovnaký vizuálny výsledok, stretch je spoľahlivejší v CSS) */
  gap: var(--space-8);                           /* 32 */
  width: 100%;
}
.zn-b1__col-b {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                           /* 32 */
}

/* ── Spoločná báza kariet ── */
.zn-b1__card {
  background: var(--color-white);
  border-radius: var(--radius-md);               /* 12 */
  box-shadow: var(--shadow-sm);                  /* small-s token, reuse z bento-3 */
  overflow: hidden;
}
.zn-b1__card-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 40px;                               /* Figma literál (rovnaká konvencia ako bento-3) */
  font-weight: var(--weight-regular);
  line-height: 1.1;
  color: var(--color-text);
}
.zn-b1__card-heading-accent {
  display: block;
  font-style: italic;
  font-weight: var(--weight-tagline);
}
.zn-b1__card-heading-accent--primary-dark   { color: var(--color-primary-dark); }    /* #FB8500 - Karta A */
.zn-b1__card-heading-accent--secondary-dark { color: var(--color-secondary-dark); }  /* #1B8098 - Karta B1 */
.zn-b1__card-heading-accent--secondary      { color: var(--color-secondary); }       /* #219EBC - Karta B2 */
.zn-b1__card-heading-accent--primary        { color: var(--color-primary); }         /* #FFB703 - rezerva */
.zn-b1__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);
}
.zn-b1__card-text strong { font-weight: var(--weight-bold); }

/* ── Karta A: obrázok hore (624×360, gradient do bielej) + obsah + CTA ── */
.zn-b1__card--a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.zn-b1__card-a-img {
  position: relative;
  width: 100%;
  aspect-ratio: 624 / 360;
  overflow: hidden;
}
.zn-b1__card-a-img-el { display: block; width: 100%; height: 100%; object-fit: cover; }
.zn-b1__card-a-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 44.663%, var(--color-white) 97.857%);  /* Figma
    presné stopy (opravené - pôvodne omylom prevzaté z bento-3 Karty A: 25.3%/97.9%) */
}
.zn-b1__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-b1__card-actions { margin-top: var(--space-1); }        /* jemný odstup od textu (4) - btn vzhľad z .btn--primary DS */

/* ── Karty B1/B2: 50/50 split (obrázok/obsah), padding 32, poradie riadi DOM
   (B1 obrázok prvý = vľavo, B2 obsah prvý = vľavo/obrázok vpravo). ── */
.zn-b1__card--split {
  flex: 1 0 auto;                                 /* NIE "1 1 0" (fix): rovnaké 50/50 delenie
                                                      výšky stĺpca `.zn-b1__col-b` by pri chýbajúcom
                                                      obrázku (kratšia karta A) orezalo text karty
                                                      s dlhším obsahom — `overflow:hidden` na
                                                      `.zn-b1__card` ruší prirodzenú min-height
                                                      ochranu flex položky. `shrink:0` = karta sa
                                                      nikdy nezmrští pod výšku vlastného obsahu. */
  min-width: 0;
  display: flex;
  align-items: stretch;
}
.zn-b1__card-split-img {
  flex: 1 1 0;
  min-width: 0;
  position: relative;                              /* nosič pre gradient ::after nižšie (desktop aj stack) */
  overflow: hidden;
}
.zn-b1__card-split-img-el { display: block; width: 100%; height: 100%; object-fit: cover; }  /* v ≤1199.98px box (624:360) sedí presne s -m crop (template.php <picture>), object-fit tam už neorezáva */
/* Desktop 50/50 split - horizontálny fade smerom k obsahu (viď hlavička súboru). */
.zn-b1__card--b1 .zn-b1__card-split-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 44.663%, var(--color-white) 97.857%);
}
.zn-b1__card--b2 .zn-b1__card-split-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, transparent 44.663%, var(--color-white) 97.857%);
}
.zn-b1__card-split-body {
  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 */
}

/* ══ Tablet (≤1199.98px) - generický medzikrok, rovnaká konvencia ako bento-3 ══ */
@media (max-width: 1199.98px) {
  .zn-b1__row { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .zn-b1__card--a,
  .zn-b1__col-b { flex: none; width: 100%; }
  .zn-b1__col-b { gap: var(--space-5); }

  .zn-b1__card--split { flex-direction: column; align-items: stretch; }
  .zn-b1__card--b2 .zn-b1__card-split-img { order: -1; }
  .zn-b1__card-split-img {
    flex: none;
    width: 100%;
    aspect-ratio: 624 / 360;
  }
  /* Stack layout (obrázok hore) - smer fade sa mení z horizontálneho (desktop) na vertikálny,
     rovnako ako Karta A. Selektor musí mať rovnakú špecificitu ako desktop pravidlo vyššie
     (2 triedy), inak by ho neprebil - media query samo o sebe špecificitu nerieši. */
  .zn-b1__card--b1 .zn-b1__card-split-img::after,
  .zn-b1__card--b2 .zn-b1__card-split-img::after {
    background: linear-gradient(to bottom, transparent 44.663%, var(--color-white) 97.857%);
  }
  /* ⚠️ DOČASNÉ (v1.21.20) — ZMAZAŤ po dodaní čistých -m assetov.
     Cieľový stav (rozhodnutie Maroša 2026-07-31): CSS fade sa aplikuje na KAŽDÝ obrázok
     vrátane klientskych uploadov, do rastra sa nezapeká nikdy.
     Lenže theme defaulty `card-reports-m.png` a `card-growth-m.png` fade zapečený MAJÚ
     (overené: spodná hrana 255/255 po celej šírke; kontrast v assete padá 203.6 → 44.9),
     takže CSS fade je na nich druhý v poradí a obsah zmizne (44.9 → 10.7).
     Spätne sa vyčistiť nedajú — biela tú obrazovú informáciu zmazala.
     Preto len tieto dva konkrétne súbory dostávajú z template.php triedu, ktorá fade vypne.
     Klientom nahraný obrázok ju NEDOSTANE a fade má už teraz — to je cieľový stav.
     Po dodaní čistých exportov: zmazať toto pravidlo aj `$zn_b1_baked`/`$zn_b2_baked`
     v template.php. Detail v CONTEXT.md (v1.21.20).
     POZOR na špecificitu: pravidlo, ktoré fade zapína, má DVE triedy
     (`.zn-b1__card--b1 .zn-b1__card-split-img::after`), takže jednotriedny override
     by prehral — preto sa aj tu uvádza s rodičovskou triedou karty. */
  .zn-b1__card--b1 .zn-b1__card-split-img--baked-fade::after,
  .zn-b1__card--b2 .zn-b1__card-split-img--baked-fade::after { content: none; }
  .zn-b1__card-split-body { flex: none; width: 100%; }
}

/* ══ Mobil (≤767.98px) - overené proti Figma node 1181:70866 (viď hlavička) ══ */
@media (max-width: 767.98px) {
  .zn-b1 { padding-inline: var(--space-4); }     /* page-padding mobil 16 */

  .zn-b1__card-heading { font-size: 32px; }      /* Size/H3 mobil (get_variable_defs potvrdil) */
  /* Akcent dedí 32 z nadpisu — ŽIADNY 40px override. Ten tu do v1.22.16 bol na
     základe JSX literálu `text-[40px]` z mobilného frame-u, čo je ale desktopová
     hodnota presiaknutá cez „Auto (Desktop)" mód (tá istá pasca ako pri hero
     2026-07-12; `get_variable_defs` dáva pre mobil Size/H3 = 32).
     Zmerané na renderi 1181:70866 (ink šírky akcentov vs naše pri 40px):
       Karta A  „myslí s vami."      Figma 167 | naše 212 → 212 x 32/40 = 169.6
       Karta B1 „čo ostatní nevidia." Figma 242 | naše 308 → 308 x 32/40 = 246.4
     Základ nadpisu pritom sedel presne (A 176/178, B1 116/117), takže rozdiel
     bol výhradne vo veľkosti akcentu. */

  /* Karta B2: akcent tečie V RIADKU za základom, nie na vlastnom riadku ako u A/B1.
     Figma 1181:70866 riadok 1 = „Systém, ktorý rastie" (263), riadok 2 = „s vami." (90);
     s `display: block` z desktopu nám vychádzalo „Systém," (108) / „ktorý rastie
     s vami." (313). Desktop sa nemení. */
  .zn-b1__card--b2 .zn-b1__card-heading-accent { display: inline; }

  .zn-b1__card-a-body {
    gap: var(--space-5);                          /* 20 - div-padding-medium mobil (32→20) */
    padding: 0 var(--space-6) var(--space-6);     /* pt 0, px 24, pb 24 - obsah prilieha pod obrázok */
  }
  .zn-b1__card--b1 .zn-b1__card-split-body {
    gap: var(--space-5);                          /* 20 */
    padding: 0 var(--space-6) var(--space-6);     /* pt 0, px 24, pb 24 - rovnako ako Karta A */
  }
  .zn-b1__card--b2 .zn-b1__card-split-body {
    gap: var(--space-5);                          /* 20 */
    padding: var(--space-6);                      /* 24 uniform - jediná karta s pt (Figma literál p-24) */
  }
}