/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Mriežka modulov (Figma "Section / Bento 1" 629:22054 desktop /
   1201:52163 mobil, sekcia "Riesenia")

   KARTU TU NEŠTÝLUJEME - `.zn-tool-card*` žije v `assets/css/tools.css`
   (rovnaký partial ako archív pomôcok / Widget Grid), sem sa len pripája ako
   závislosť (`inc/blocks-register.php`). Tu je len sekcia a mriežka.

   Sekcia má rovnaké pozadie ako hero nad ňou (--color-bg-medium) - medzi
   hero vlnkou a touto sekciou nevzniká švík - a zaoblené SPODNÉ rohy
   (Radius/XLarge 40), presné zrkadlo hero panelu, ktorý má zaoblené horné.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-rm {
  position: relative;
  background: var(--color-bg-medium);           /* Scheme A/Background Medium #ecf2f4 */
  padding-inline: var(--space-16);              /* Page Padding/padding-global 64 */
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);  /* Radius/XLarge 40, len dole */
}
.zn-rm.zn-block {
  --zn-pt: var(--space-12);                     /* Section Padding/section-small 48 */
  --zn-pb: var(--space-20);                     /* Section Padding/section-medium 80 */
}

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

.zn-rm__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);                          /* Div Padding/div-padding-medium 32 */
}

/* Screenshot je zhora orezaný - príčina overená meraním, nie odhadom.
   Rám (Figma I629:22058;19:2326) je 405,333 × 233,846 = 624/360, TEN ISTÝ
   pomer ako pomôcky (`I768:27193;19:2326`, `tools.css`) - nejde teda o iný
   Figma rám pre túto sekciu.
   Placeholder screenshot (592 × 480, pomer 1,233) je oproti rámu (1,733)
   užší/vyšší, takže `object-fit: cover` škáluje na šírku a výška pretečie
   na 405,333/592 × 480 = 328,65 px = presne 140,54 % rámu - zhoduje sa
   na 2 desatinné miesta s Figma `h-[140.54%]` na tom istom uzle.
   Figma orezáva tento presah LEN ZDOLA (`top: -0,01 %` ≈ 0, teda horný
   okraj obrázka = horný okraj rámu), kým predvolené
   `.zn-tool-card__img { object-fit: cover }` (bez `object-position`) centruje
   (50 % 50 %) - odreže ~47 px ZHORA AJ ZDOLA rovnako, čím zmizne hlavička
   aplikácie zo screenshotu.
   `.zn-tool-card*` je zdieľaná komponenta (pomôcky, tool-grid) - fix je preto
   scopnutý LEN do tejto mriežky (2-triedna špecificita), `tools.css` sa
   nemení - iný zdroj obrázka na inom mieste môže mať iný pomer aj iný
   správny `object-position`. */
.zn-rm .zn-tool-card__img { object-position: top; }

/* ══ Tablet (≤1199.98px) - Figma preň nemá spec, generický medzikrok
   (rovnaká konvencia ako `tool-grid`) ══ */
@media (max-width: 1199.98px) {
  .zn-rm { padding-inline: var(--space-8); }    /* 32 */
  .zn-rm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══ Mobil (≤767.98px) - hodnoty z Figma mobil frame 1201:52163 ══ */
@media (max-width: 767.98px) {
  .zn-rm { padding-inline: var(--space-4); }    /* Page Padding (mobil) 16 */
  .zn-rm.zn-block { --zn-pt-m: var(--space-8); --zn-pb-m: 48px; }
  /* pt-m: Section Padding/section-small (mobil) 32 = --space-8, presná zhoda.
     pb-m: Section Padding/section-medium (mobil) je vo Figme PEVNÝCH 48, NIE
     fluid --space-20 (tá by pri 393px dala len ~40) - rovnaká pasca a rovnaká
     hodnota, akú `tools.css` už rieši pre inú inštanciu tej istej Figma
     sekcie ("Section / Bento 1" 1201:103353, Blog). */

  .zn-rm__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);                        /* Div Padding/div-padding-medium (mobil) 20 */
  }

  /* Karta je zdieľaná komponenta (`tools.css` `.btn` = globálnych 48px,
     "zjednotenie 2026-07-10") - Figma mobil (1201:52163) má na všetkých
     9 kartách explicitný `h-[40px]` na tomto tlačidle, iný než DS default.
     Rovnaká per-inštancia odchýlka a rovnaké 2-triedne scopovanie ako
     `.zn-rm .zn-tool-card__img` vyššie (kaskáda: components.css sa načíta
     po blokovom style.css). Len mobil - desktop pre túto sekciu neoverený,
     mimo rozsahu tejto úpravy. */
  .zn-rm .zn-tool-card .btn { height: 40px; }
}