/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Mriežka odvetví (Figma "Section / Bento 1" 688:52104 desktop /
   1201:67072 mobil, sekcia "Odvetvia")

   KARTU TU NEŠTÝLUJEME - `.zn-tool-card*` žije v `assets/css/tools.css`
   (rovnaký partial ako `riesenia-modules`/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), zrkadlo hero panelu (zaoblené horné). Rovnaké tokeny
   ako `riesenia-modules` (section-small/section-medium/padding-global) -
   overené `get_design_context` na 688:52104, zhoda 1:1.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-og {
  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-og.zn-block {
  --zn-pt: var(--space-12);                     /* Section Padding/section-small 48 */
  --zn-pb: var(--space-20);                     /* Section Padding/section-medium 80 */
}

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

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

/* Figma: tlačidlo karty je na VŠETKÝCH 9 kartách h-[40px] (desktop AJ mobil) -
   `tools.css` má `.zn-tool-card__cta { height: 40px }`, ale `components.css`
   (načíta sa PO blokovom CSS, kaskádová konvencia) nesie generický `.btn` s
   iným defaultom rovnakej špecificity, takže o poradí rozhoduje load-order,
   nie "najpresnejšie pravidlo vyhráva". 2-triedne scopovanie tu vynúti 40px
   spoľahlivo (rovnaký fix ako `.zn-rm .zn-tool-card .btn` v riesenia-modules,
   tam len pre mobil - tu pre OBE šírky, lebo Figma h-40 potvrdzuje na oboch). */
.zn-og .zn-tool-card .btn { height: 40px; }

/* Ikony kariet sú vo Figme MODRÉ, nie oranžová theme-default (`assets/img/icons/*.svg`
   majú fallback #FB8500/#FBD26A). `get_design_context` na 688:52104 vrátil pre ikonu len
   Relume placeholder asset (identická URL pre všetkých 9 kariet, jednofarebná #023047 -
   známy varovný signál "rovnaký asset pre vizuálne odlišné ikony" = placeholder, nie
   skutočná ikona), takže presné odtiene sú z pixel-scanu screenshotu karty 688:52108:
   hlavná zložka (27,128,152) = #1B8098, svetlejšia (142,202,230) = #8ECAE6 - zhoda 1:1
   s existujúcimi theme tokenmi `--color-secondary-dark`/`--color-secondary-light`
   (theme.json), teda rovnaká dvojica, akú `zenturi_the_icon()` už ponúka pod menom
   'secondary-dark'. `zenturi_the_icon()` sa v `tool-card.php` volá s pevným color=''
   (zdieľaný partial, nemeniť) - farba sa preto rieši tu, cez `--zn-ico-main`/`--zn-ico-soft`
   substitúciu, ktorú SVG súbory už majú zapečenú (`var(--zn-ico-main, #FB8500)`), overené
   grepom na všetkých 9 ikonách tejto sekcie - žiadna nemá farbu hardcoded mimo var().
   2-triedna špecificita = scope LEN na túto sekciu (kaskádová konvencia); iné bloky
   (hero-riesenia, riesenia-modules, pomôcky, integrácie) zdieľajú tie isté SVG súbory
   a musia ostať oranžové - nič v tomto pravidle ich nezasahuje. */
.zn-og .zn-tool-card__icon {
  --zn-ico-main: var(--color-secondary-dark);
  --zn-ico-soft: var(--color-secondary-light);
}

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

/* ══ Mobil (≤767.98px) - hodnoty z Figma mobil frame 1201:67072 ══ */
@media (max-width: 767.98px) {
  .zn-og { padding-inline: var(--space-4); }    /* Page Padding (mobil) 16 */
  .zn-og.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, akú
     `riesenia-modules`/`tools.css` už riešia pre iné inštancie tej istej
     Figma sekcie. */

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