/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Mriežka Manuálu (Figma 747:21968 desktop / 1201:84970 mobil)

   KARTU TU NEŠTÝLUJEME. `.zn-tool-card*` vrátane variantu `--icon` žije
   v `assets/css/tools.css` - je to zdieľaná karta archívu pomôcok, Widget
   Gridu aj tejto mriežky. Tu je len sekcia a rozloženie mriežky.
   `tools.css` sa na túto stránku pripája cez `zenturi_tool_enqueue()`.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-mgrid {
  position: relative;
  background: var(--color-bg-medium);           /* Scheme A/Background Medium #ecf2f4 */
  padding-inline: var(--space-16);              /* Page Padding/padding-global 64 */
}

/* Odsadenie je NAMERANÉ z rodičovského framu „Section / Bento 1" (747:21967
   desktop, 1201:84966 mobil), nie odhadnuté:
     desktop  „Actions" (pole) na y 48, „Container" (mriežka) na y 144,
              frame 2144 vysoký a mriežka končí na 2064
              → sekcia pt 48 · pole→mriežka 48 · pb 80
     mobil    Actions y 32, Container y 112, frame 4916, mriežka končí 4868
              → pt 32 · pole→mriežka 32 · pb 48
   Horných 48 (resp. 32) nesie pás `.zn-manual-search`; `--zn-pt` tu je odstup
   POLE → MRIEŽKA, aby si blok svoj horný odstup niesol aj keby stál sám.
   Zhodou okolností je to presne dvojica, akú má `.zn-tools` (48 / 80). */
.zn-mgrid.zn-block { --zn-pt: var(--space-12); --zn-pb: var(--space-20); }

.zn-mgrid__container {
  max-width: var(--container-max);              /* Container/container-large 1280 */
  margin-inline: auto;
}

/* Figma „Row" 747:21970: 3 stĺpce, karta 405,333 = (1280 − 2 × 32) / 3,
   krok 437,333 vodorovne a 244 zvisle → gap 32 (div-padding-medium) v oboch osiach.
   `stretch` je default gridu a je tu ZÁMERNE: Figma má prvý riadok 212/206/206,
   ale tých 6 px je len dôsledok toho, že karty 2 a 3 majú text v Size/Regular 16
   namiesto Size/Medium 18 (viď CONTEXT.md) - nie je to výškový zámer. */
.zn-mgrid__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);                          /* div-padding-medium 32 */
}

/* ══ Tablet (≤1199.98px) - Figma preň nemá spec ══ */
@media (max-width: 1199.98px) {
  .zn-mgrid { padding-inline: var(--space-8); }
  .zn-mgrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══ Mobil (≤767.98px) - Figma 1201:84970 ═════════════════════════════════
   Kontajner 361 = 393 − 2 × 16 (page padding 16), 1 stĺpec, krok 199 − 179 = 20
   → gap = div-padding-medium v MOBILNOM móde (20, nie desktopových 32).
   Hodnoty sú z `get_variable_defs` na mobilnom node, NIE z design contextu -
   ten hlási desktopový mód (CLAUDE.md). ══ */
@media (max-width: 767.98px) {
  .zn-mgrid { padding-inline: var(--space-4); }               /* 16 */
  /* pole→mriežka 32, spodok sekcie 48 - namerané z 1201:84966 (viď hore).
     Cez `-m` premenné, nie holé `--zn-pt/--zn-pb`: tie by `.zn-block` na mobile
     ešte raz prepolovil (CLAUDE.md).
     LITERÁLY, nie `--space-*`: spacing tokeny sú clampy, takže pri 393 dá
     `--space-12` štyridsať, nie osemštyridsať (namerané) - Figma tu ale udáva
     pevných 48. Rovnaký dôvod, prečo má literály aj `.zn-hsp`. */
  .zn-mgrid.zn-block { --zn-pt-m: 32px; --zn-pb-m: 48px; }
  .zn-mgrid__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);                        /* div-padding-medium (mobil) 20 */
  }
}