/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Widget Grid (Figma „Section / Bento 3" 768:31434, kontajner
   768:31435, karta 768:31651)

   Obsahová sekcia detailu praktickej pomôcky: vycentrovaný nadpis + mriežka
   kariet 3 × N.

   KARTU TU NEŠTÝLUJEME. `.zn-tool-card*` žije v `assets/css/tools.css` (píše
   ju ten istý partial ako archív) - tu je len mriežka, nadpis a to, čo Widget
   Grid robí s kartou inak: riadok DVOCH tlačidiel.

   Sekcia: Figma 768:31434 je 1440 × 1007,69, kontajner na (80, 48) vysoký
   879,69 → pt 48, pb 80. Pozadie #ecf2f4 (odmerané z renderu: 236,242,244),
   teda tá istá plocha ako archív aj ako hero nad ňou - medzi hero vlnkou
   a touto sekciou preto nevzniká švík.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-tgrid {
  background: var(--color-bg-medium);          /* Scheme A/Background Medium #ecf2f4 */
  padding-inline: var(--space-16);             /* Page Padding/padding-global 64 */
}
.zn-tgrid.zn-block {
  --zn-pt: var(--space-12);                    /* Section Padding/section-small 48 */
  --zn-pb: var(--space-20);                    /* Section Padding/section-medium 80 */
}

.zn-tgrid__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);                        /* Figma Container gap 80 (nadpis → grid) */
  max-width: var(--container-max);             /* Container/container-large 1280 */
  margin-inline: auto;
}

/* ── Nadpis sekcie ──────────────────────────────────────────────────────────
   Figma „Section Title" 768:31436 = 768 široký, vycentrovaný v 1280 (x 256).

   Hodnoty sú tie isté, aké má `.zn-sbase--centered` v `section-base`
   (max-width 768 + `margin-inline: auto` + `text-align: center`, nadpis
   `--text-7xl` / 1.1 / `--color-text`) - vedome sa NEKOPÍRUJE nič navyše.
   Prečo nie priamo tá trieda: jej pravidlá sú viazané na štruktúru
   `.zn-sbase__container > __column > __headline > __heading` a bývajú
   v `blocks/section-base/assets/style.css`, ktoré sa na stránke bez toho
   bloku vôbec nenačíta. Zdieľať by sa dala len tak, že by tento blok
   vypisoval interné triedy cudzieho bloku - tým by sa jeho refactor prejavil
   tu ako tichá regresia. Zdieľané ostáva to, čo sa zdieľať má: tokeny.

   ÚROVEŇ NADPISU JE h2, hoci Figma dáva štýl Heading/H1: H1 na tejto stránke
   už drží hero. Figma udáva veľkosť, nie úroveň. */
.zn-tgrid__head {
  width: 100%;
  max-width: 768px;
  margin-inline: auto;
}
.zn-tgrid__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-7xl);                  /* Size/H1 56 */
  line-height: 1.1;
  color: var(--color-text);                    /* Scheme A/Text #023047 */
  text-align: center;
}

/* ── Mriežka ────────────────────────────────────────────────────────────────
   Figma „Row" 768:31461: 3 × 405,33 s gapom 32 v oboch osiach
   (437,33 − 405,33 = 32; druhý riadok na y 353,85 − 321,85 = 32). */
.zn-tgrid__grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);                         /* div-padding-medium 32 */
}

/* ── Riadok dvoch tlačidiel (Figma „Actions" I768:31651;19:2335, gap 24) ─────
   V archíve má karta jediné tlačidlo a žiadny obal; tu sú dve, preto obal.
   `align-items: center` = Figma: tlačidlá majú rôznu výšku (40 a 48) a sedia
   na spoločnej osi. Výšku riadku - a tým aj karty - určuje to VYŠŠIE, 48px
   odkazové tlačidlo; gap 32 z `.zn-tool-card__body` sa neuplatní, lebo obsah
   má v tomto variante jediné dieťa.
   Kontrola skladby karty: 233,85 (obrázok 405,33 × 360/624) + 16 (pt) + 48
   (Actions) + 24 (pb) = 321,85. ✓ presne Figma výška.

   ⚠️ `nowrap` PREBÍJA GLOBÁLNU POISTKU - vedome a scopnuto.
   `components.css` má `[class*="__actions"] { flex-wrap: wrap }` (0,1,0,
   načítané PO blokových CSS), zavedené proti pretekaniu vo `final-cta`.
   Tu ho prebíja dvojtriedny selektor `.zn-tgrid .zn-tool-card__actions`
   (0,2,0), takže poistka ďalej platí všade inde - vrátane archívnej karty,
   ktorá je z toho istého partialu.

   Prečo to treba: Figma dáva kartu 405,33 × 321,85 a to vychádza LEN s oboma
   tlačidlami v jednom riadku (233,85 obrázok + 16 pt + 48 Actions + 24 pb).
   So zalomením karta narastie na 385,84, teda o 64 px.

   A prečo sa vôbec zalamuje - PRETEKÁ DIZAJN, nie implementácia.
   Odmerané na 768:31651:
     Actions   357,33 široký (405,33 − 2 × 24)
     Button 1  200 na x 0
     Button 2  141 na x 224     → 224 + 141 = 365
   Tlačidlá teda vytekajú z vlastného rámu o 7,67 px a pravé odsadenie karty
   klesne z 24 na 16,33; Figma frame neoreže, takže v rendri to vyzerá dobre.
   Naše šírky sú pritom takmer presne tie Figma (201,44 a 140,97; rozdiel 1,44
   je 2px CSS border outline tlačidla - Figma stroke je INSIDE), takže to NIE JE
   chyba fontu ani prevzatia hodnôt. U nás vyjde pravé odsadenie ~14,9 - stále
   VNÚTRI karty, takže `overflow: hidden` nič neoreže.

   ⚠️ Rezerva je tenká: pri dlhšom popiske už orezanie hrozí. Dnešné texty sú
   NEPOTVRDENÉ (vo Figme má všetkých 6 kariet ten istý) - pri finálnych to treba
   prekontrolovať. Na mobile sa `nowrap` ruší (viď @media nižšie). */
.zn-tool-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);                         /* Figma „Actions" gap 24 */
  width: 100%;
}
.zn-tgrid .zn-tool-card__actions { flex-wrap: nowrap; }

/* Odkazové tlačidlo = DS „Link" (`.btn--link`: bez pozadia aj rámu, výška 48,
   ikona 32, hover spodný teal border). Vzhľad sa tu NEDEFINUJE nanovo.

   Vracia sa len VÝŠKA: `.zn-tool-card__cta` z `tools.css` tlačí 40 (archívny
   Button token) a načíta sa PO tomto súbore, takže by prebil `.btn--link`.
   Dvojtriedny selektor to rieši bez ohľadu na poradie súborov (CLAUDE.md,
   kaskáda). */
.zn-tool-card__cta.zn-tool-card__cta--link {
  height: 48px;
}
/* Ikona vo flex riadku sa nesmie scvrknúť (CLAUDE.md). Rozmer 32 dáva
   `.btn--link svg` v components.css. */
.zn-tool-card__cta-icon { flex-shrink: 0; }

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

/* ══ Mobil (≤767.98px) - Figma frame NEDODANÝ ═════════════════════════════
   Hodnoty podľa konvencie témy a mobilných frame-ov príbuzných sekcií, presne
   ako mobilná časť `assets/css/tools.css`: page-padding 16, Size/H1 (mobil) 40,
   div-padding 20/24. Section padding cez `-m` premenné, NIE holé `--zn-pt`
   (inak by ich `components.css` ešte raz prepolvil - CLAUDE.md). ══ */
@media (max-width: 767.98px) {
  .zn-tgrid { padding-inline: var(--space-4); }               /* Page Padding (mobil) 16 */
  .zn-tgrid.zn-block { --zn-pt-m: var(--space-8); --zn-pb-m: var(--space-12); }  /* 32 / 48 */

  .zn-tgrid__container { gap: var(--space-10); }              /* 80 → 40 */
  .zn-tgrid__heading { font-size: 2.5rem; }                   /* Size/H1 (mobil) 40 */
  .zn-tgrid__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);                                      /* 20 */
  }
  /* Desktopový `nowrap` sa RUŠÍ: riadok potrebuje 365 px, mobilná karta má
     vnútri ~280-313, takže by ho `overflow: hidden` karty orezalo. Zvislý
     odstup zalomených riadkov je menší než vodorovný gap 24. */
  .zn-tgrid .zn-tool-card__actions { flex-wrap: wrap; }
  .zn-tool-card__actions { gap: var(--space-4) var(--space-6); }
}