/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Bento dvojica (mobilná appka + svetová kvalita)
   Svetlé bg-medium pozadie so zaoblením dole, biele karty radius 24.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-bento {
  background:
    linear-gradient(180deg, rgba(27, 128, 152, 0) 60.156%, rgba(27, 128, 152, .4) 100%),
    linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 37.354%),
    var(--color-bg-medium);
  --zn-pt: var(--space-12);              /* Section Padding/section-small 48 */
  --zn-pb: var(--space-20);              /* Section Padding/section-medium 80 */
  padding-inline: var(--space-16);       /* Page Padding/padding-global 64 */
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

/* POZOR: 1312 (nie 1280 ako ostatné sekcie) — Figma kreslí 768 + 24 + 520.
   Pri 1280 by ľavá karta stratila 32px, nadpis by sa zalomil na 5 riadkov
   a CTA by pretiekla kartu. Rozhodnutie 2026-07-13: Bento je o 32px širšie. */
.zn-bento__container {
  display: flex;
  align-items: stretch;
  gap: 24px;
  max-width: 1312px;
  margin-inline: auto;
}

.zn-bento__card {
  background: var(--color-bg);
  border-radius: 24px;                       /* Radius/Large */
  overflow: hidden;
  /* small-s */
  box-shadow: 0 2px 4px -2px rgba(19, 91, 108, .05), 0 4px 8px -2px rgba(19, 91, 108, .15);
}
/* Figma kreslí na 1440 rám (768 + 24 + 520 = 1312 obsahu), náš kontajner má 1280.
   Chýbajúcich 32px berie ľavá karta (fluidný obsah); pravá ostáva presne 520 —
   nesie dekor kalibrovaný na plátno 440×184 a nadpis na 2 riadky. */
.zn-bento__card--app {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 16px 0 0 32px;                    /* top 16, left 32, right/bottom 0 (foto na doraz) */
}
.zn-bento__card--quality {
  flex: 0 0 auto;
  width: 520px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;                                 /* Container gap: Content ↔ dekor 24 */
  padding: 32px 48px 0 32px;                 /* top 32, right 48, bottom 0, left 32 */
}

/* Content (391×345) — vertikálne centrovaný cez items-center karty, bez vlastného paddingu */
.zn-bento__content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;                                 /* Content gap 16 */
}

.zn-bento__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-6xl);            /* H2 48 */
  font-weight: var(--weight-regular);
  line-height: 1.1;
  color: var(--color-text);
}
.zn-bento__heading-accent {
  display: block;
  font-style: italic;
  font-weight: var(--weight-tagline);
  color: var(--color-secondary-dark);
}

.zn-bento__text {
  margin: 0;
  font-size: 20px;                           /* Size/Large */
  line-height: 1.5;
  color: var(--color-text);
}

/* Actions (Button 282×48, ikony 24×24 s gapom 24) — button = globálne .btn triedy */
.zn-bento__actions {
  display: flex;
  align-items: center;
  gap: 24px;                                 /* Actions gap 24 */
  margin-top: 16px;                          /* text ↔ actions 32 (16 gap + 16) */
}
/* Šípka buttonu = theme konvencia .btn--arrow (default 32). */
.zn-bento__stores { display: contents; }             /* desktop: ikony = priame flex položky Actions */
.zn-bento__store { flex-shrink: 0; height: 24px; }
.zn-bento__store--apple { width: 24px; }
.zn-bento__store--gplay { width: 21.72px; }

/* Telefón: h-full + aspect 283/377 (Figma 304.77×406) — POZOR: obrázok je v ňom
   absolútny, takže bez stretch/aspect by mal box nulovú výšku a telefón zmizne. */
.zn-bento__media {
  flex: none;
  align-self: stretch;
  aspect-ratio: 283 / 377;
  position: relative;
  overflow: hidden;
}
/* Theme default (hand-iphone.png) = Figma crop naladený presne na tento obrázok. */
.zn-bento__media img {
  position: absolute;
  width: 264.93%;
  height: 149.41%;
  left: -82.34%;
  top: -22.24%;
  max-width: none;
}
/* Vlastný nahraný obrázok (--custom): crop vyššie platí len pre theme default. Iný upload
   fitni normálne - object-fit bez skreslenia. Obrázok ostáva absolútny (mimo flow), aby
   nezvalil textový stĺpec; inset:0 ho roztiahne na celý kontajner (aspect-ratio 283/377). */
.zn-bento__media--custom img {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Kvalita: textový blok (Content, gap 16) ── */
.zn-bento__qcontent {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* ── Kvalita: dekoračné plátno (440×184) ──
   Vlajky, stat aj oblúky sú v ňom osadené absolútne podľa dizajnu.
   Stat je kotvený VPRAVO (right: -65px) — tak ako v dizajne prebieha cez
   pravý padding karty a orezáva sa o jej hranu bez ohľadu na šírku karty. */
.zn-bento__decor {
  position: relative;
  width: 100%;
  height: 184px;
  flex-shrink: 0;
}

.zn-bento__arc {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.zn-bento__arc--big   { left: 16px;     top: -202.14px; width: 821.062px; height: 821.062px; }
.zn-bento__arc--small { left: 187.05px; top: -31.09px;  width: 604.393px; height: 604.393px; }
.zn-bento__arc > span {
  display: block;
  position: relative;
  flex: none;
  transform: rotate(-45deg);
}
.zn-bento__arc--big > span   { width: 774.105px; height: 387.053px; }
.zn-bento__arc--small > span { width: 569.827px; height: 284.914px; }
.zn-bento__arc img {
  display: block;
  position: absolute;
  max-width: none;
}
.zn-bento__arc--big img   { left: -3.66%; top: -9.65%; width: 107.32%; height: 116.92%; }
.zn-bento__arc--small img { left: -4.98%; top: -13.1%; width: 109.96%; height: 122.98%; }

/* 220×116 @ 13/23.43; vnútro = mriežka 2×2 */
.zn-bento__flags {
  position: absolute;
  left: 13px;
  top: 23.429px;
  z-index: 1;
  width: 220px;
  height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.zn-bento__flags-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 32px;
  justify-items: center;
  width: 100%;
  padding-inline: 8px;
}
.zn-bento__flags-grid img {
  display: block;
  width: 45px;
  height: 32px;
  object-fit: cover;                     /* nahrané vlajky môžu mať iný pomer */
  border-radius: 5px;                    /* zaoblenie zapečené v assete */
}
.zn-bento__flags-grid img:nth-child(2) { width: 44px; }   /* flag-EN */

/* Stat @ 238/-23.57 → 97% (26/1), spokojnosť (33/127) */
.zn-bento__stat {
  position: absolute;
  top: -22.571px;                        /* -23.571 (frame) + 1 (text) */
  right: -65px;                          /* pravá hrana textu = 505 − 440 (plátno) */
  z-index: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.zn-bento__stat-value {
  display: block;
  font-family: var(--font-display);
  font-style: italic;                    /* Mix Medium Italic */
  font-weight: var(--weight-medium);     /* 550 */
  font-size: 119.864px;
  line-height: 1.4;
  color: var(--color-secondary-dark);    /* #1b8098 */
  white-space: nowrap;
}
.zn-bento__stat-label {
  display: block;
  margin-left: 7px;                      /* 33 − 26 */
  margin-top: -42px;                     /* 127 − (1 + 168) */
  font-family: var(--font-display);
  font-style: normal;                    /* Sans Medium — NIE italic */
  font-weight: var(--weight-medium);     /* 550 */
  font-size: 31.837px;
  line-height: 1.5;
  color: var(--color-secondary);         /* #219ebc */
  white-space: nowrap;
}

/* Spacing defaulty cez zn-block var systém (vyššia špecificita než components.css) */
.zn-bento.zn-block { --zn-pt: var(--space-12); --zn-pb: var(--space-20); }

/* ── Responzivita ── */
@media (max-width: 1199.98px) {
  .zn-bento__container { flex-direction: column; }
  /* V stĺpci by desktopové flex hodnoty riadili VÝŠKU (basis 0 = karta skolabuje). */
  .zn-bento__card--app { flex: none; }
  .zn-bento__card--quality { flex: none; width: 100%; }
  .zn-bento__decor { max-width: 440px; }

  /* ── Telefón musí dostať EXPLICITNÚ šírku (bug do v1.21.11: box mal 0×N, telefón
     na tablete a úzkom notebooku úplne zmizol) ──
     Prečo to na desktope funguje a tu nie: nad 1200 je karta `flex: 1 1 0`, takže má
     obmedzenú šírku a médium so `align-self: stretch` dostane definitívnu výšku, z ktorej
     `aspect-ratio` dopočíta šírku. Tu je karta `flex: none` na celú šírku stĺpca,
     `.zn-bento__content` (`flex: 1 0 0`) pohltí celý priestor a médiu ostane
     `flex-basis: auto` → obsahová šírka 0 (obrázok je `position: absolute`, žiadny
     in-flow obsah). Výška zo `stretch` nie je v čase výpočtu šírky definitívna, takže
     `aspect-ratio` ju neprepočíta.
     `align-self: center` je nutné: pri `stretch` by bola definitívna aj výška aj šírka
     a `aspect-ratio` by sa ignoroval → theme crop (percentá kalibrované na pomer 283/377)
     by sa deformoval.
     MEDZIKROK, NIE FIGMA HODNOTA: Figma pre túto sekciu tablet frame nemá (rovnako ako
     zenai-feature/hero-level3). Šírka 304.77 je desktopová veľkosť telefónu z Figmy —
     tablet ju len preberá, aby vizuál medzi 768 a 1200 nemenil veľkosť. */
  .zn-bento__media {
    align-self: center;
    width: 304.77px;
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIL (rám 393)
   POZOR: get_design_context ukazuje na mobilnom frame DESKTOPOVÉ px (Typography
   mód = Auto/Desktop). Typografiu a spacing preberáme z get_variable_defs:
   H2 = 38 (nie 48), Size/Large = 18 (nie 20), page-padding = 16 (nie 64),
   section-small = 32, div-padding-small = 16, div-padding-medium = 20,
   Radius/Base = 16 (karty), Radius/Large = 24 (spodok sekcie, nie 40).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* POZOR: components.css na mobile polovičí padding sekcie
     (`--zn-pt-m` fallback `calc(var(--zn-pt) * 0.5)`) — preto sa nastavujú
     mobilné premenné, nie --zn-pt. Editor overrides (inline) stále vyhrávajú. */
  .zn-bento.zn-block {
    --zn-pt: 32px;                           /* section-small (mobil) */
    --zn-pb: 16px;                           /* div-padding-small (mobil) */
    --zn-pt-m: 32px;
    --zn-pb-m: 16px;
  }
  .zn-bento {
    padding-inline: 16px;                    /* page-padding */
    border-bottom-left-radius: 24px;         /* Radius/Large (mobil) */
    border-bottom-right-radius: 24px;
  }
  .zn-bento__container { gap: 24px; }

  .zn-bento__card { border-radius: 16px; }   /* Radius/Base */
  .zn-bento__card--app {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;                               /* Container gap */
    padding: 20px 20px 0;                    /* div-padding-medium, bez spodku */
  }
  .zn-bento__card--quality {
    gap: 24px;
    padding: 20px 20px 0;
  }

  .zn-bento__content { flex: none; width: 100%; }
  .zn-bento__heading { font-size: 38px; }    /* Size/H2 (mobil) */
  .zn-bento__text { font-size: 18px; }       /* Size/Large (mobil) */

  /* Actions: button na plnú šírku, pod ním riadok store ikon */
  .zn-bento__actions {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
  }
  .zn-bento__cta { width: 100%; }
  .zn-bento__stores {
    display: flex;
    justify-content: center;
    gap: 24px;
  }

  /* Telefón = iný vizuál (screenshot appky 281×313, radius hore 8, vlastný tieň) */
  .zn-bento__media {
    align-self: auto;
    width: 281px;
    max-width: 100%;
    aspect-ratio: 281 / 313;
    border-radius: 8px 8px 0 0;              /* Radius/Small */
    background: var(--color-bg);
    box-shadow: 0 25.664px 51.328px 0 rgba(5, 57, 69, .24);
  }
  .zn-bento__media img {
    width: 100.05%;
    height: 165.69%;
    left: -0.03%;
    top: 0.1%;
  }
  /* Mobilný crop vyššie je naladený na theme app-screen.png. Vlastný obrázok — či už
     desktopový (--custom, keď mobilný nie je nahraný a <picture> nevznikne), alebo
     mobilný (--custom-m) — sa fitne object-fitom. --custom-m je zámerne LEN tu:
     na desktope má vlastný mobilný obrázok ostať bez vplyvu. */
  .zn-bento__media--custom img,
  .zn-bento__media--custom-m img {
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* Mobilný upload sa kotví HORE, nie na stred.
     Figma node 523:35207 (361×339) ukazuje VRCH obrazovky — stavový riadok, nadpis
     „Nástenka" a prvé tri karty. Theme default ten istý asset kotví tiež hore
     (`top: 0.1%` v pravidle vyššie), takže `top` je pôvodné správanie, nie nový nápad.
     `center` sa sem zavliekol vo v1.21.13 ako generický default pre --custom-m a bola to
     odchýlka, nie zámer: screenshot je 360×664 (pomer 0.542) v boxe 281×313 (0.898), takže
     centrovaný cover odrezal ~131 px hore aj dole — zmizol stavový riadok, „Nástenka"
     aj spodná navigácia a prvá karta „Moje úlohy" ostala preseknutá v polovici.
     Poradie je podstatné: rovnaká špecificita ako pravidlo vyššie, takže musí byť ZA ním. */
  .zn-bento__media--custom-m img { object-position: top; }

  /* Dekor: plátno 321×145 */
  .zn-bento__decor { max-width: none; height: 145px; }

  .zn-bento__arc--big   { left: 101px;    top: -117.14px; width: 477.446px; height: 477.446px; }
  .zn-bento__arc--big > span   { width: 450.141px; height: 225.07px; }
  .zn-bento__arc--small { left: 200.47px; top: -17.68px;  width: 351.454px; height: 351.454px; }
  .zn-bento__arc--small > span { width: 331.354px; height: 165.677px; }

  /* Vlajky: mriežka priamo na plátne (172×96 @ 0/10), stĺpcový gap 12 (desktop 8) */
  .zn-bento__flags {
    left: 0;
    top: 10px;
    width: 172px;
    height: auto;
    display: block;
  }
  .zn-bento__flags-grid { column-gap: 12px; }

  /* Stat (Group 40): 97% @ 174/-17.94, spokojnosť @ 179.2/75.64; presah vpravo 32 */
  .zn-bento__stat { top: -17.94px; right: -32px; }
  .zn-bento__stat-value { font-size: 89.028px; }
  .zn-bento__stat-label {
    font-size: 23.646px;
    margin-left: 5.2px;                      /* 179.2 − 174 */
    margin-top: -31.06px;                    /* 93.58 − (89.028 × 1.4) */
  }
}