/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Icon Cards (Figma 788:55546 „Section / Bento 1")

   ⚠️ Figma názov vrstvy KOLIDUJE s existujúcim `zenturi/bento-1` (iná vec).
   Detail v hlavičke template.php.

   Mriežka 3 v riadku pri 1280 kontajneri: (1280 − 2×32) / 3 = 405,333 na kartu.
   Rieši to `grid` s `1fr` stĺpcami, nie pevná šírka - repeater má zvládnuť
   ľubovoľný počet kariet a zalomiť sa sám.

   Sekcia: pt 48 (Section Padding/section-small), pb 80. Figma: 882 − 48 − 754 = 80,
   čo je „Section Padding/section-medium" - v tomto node ho `get_variable_defs`
   nevypísal (vypisuje len tokeny, ktoré node reálne používa), takže je to
   dopočítaná hodnota potvrdená geometriou.

   POZADIE: bg-medium si sekcia nastavuje SAMA. Do 2026-08-06 tu stálo, že
   „presvitá zo stránky" - nebola to pravda, žiadne globálne bg-medium neexistuje
   a sekcia bola biela. Rovnako to majú všetky ostatné bento bloky (bento-1,
   -2, -3, -duo, -tabs) - každý si pozadie kreslí sám.
   ══════════════════════════════════════════════════════════════════════════ */

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

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

/* Nadpis sekcie (voliteľný, Figma „Section Title" 779:45037). Heading/H1 56/1.1 w400,
   vycentrovaný, šírka „Max Width/max-width-large" 768 v 1280 kontajneri (256 po stranách).
   Medzera k mriežke 80 = „Div Padding/div-padding-xlarge" (Figma: title 0..62,
   Component od 142). Bezpečnosť pole nemá → celý blok sa nevyrenderuje a odsadenie
   mriežky sa nemení. */
.zn-icc__heading {
  margin: 0 auto var(--space-20);               /* 80 */
  max-width: 768px;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-7xl);                   /* Size/H1 56 */
  line-height: 1.1;
  text-align: center;
  color: var(--color-text);                     /* Scheme A/Text #023047 */
}

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

.zn-icc__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                          /* „Content Top" gap 8 (ikona ↔ text) */
  /* Figma má VŠETKÝCH 9 kariet presne 230 vysokých (overené na inštanciách
     788:55554-55561). `min-height`, NIE `height`: obsahový box je 357,333 × 190
     a najdlhší reálny text sa doň vojde presne na 3 riadky (52 ikona + 8 + 41,6
     nadpis + 16 + 72 text = 189,6), takže pri 230 nič nepretečie - ale keby klient
     text predĺžil, karta má radšej narásť než ho odrezať.
     Z toho istého dôvodu tu NIE JE `overflow: hidden` (Figma má na karte
     `overflow-clip`): pri `min-height` nemá čo orezávať a v prípade dlhšieho textu
     by ho len ticho schoval.
     Hodnota ide cez premennú, lebo pri menšom texte je iná - viď `.zn-icc--text-small`. */
  min-height: var(--zn-icc-card-min, 230px);
  background: var(--color-white);               /* Scheme A/Foreground #ffffff */
  /* pt 16 (div-padding-xsmall) / px 24 (div-padding-small) / pb 24 */
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-radius: var(--radius-md);              /* Radius/Medium 12 */
  /* Figma „Scheme A/Border" #03030326 pri „Stroke/Border Width" 1. Kreslené cez
     inset box-shadow, nie `border` - Figma stroke je INSIDE a nezväčšuje box,
     kým `border` by kartu rozšíril o 2px (CLAUDE.md, nález bento-tabs v1.21.7). */
  box-shadow: inset 0 0 0 1px var(--color-border);
}

/* Slot sa rezervuje VŽDY, aj keď ikona/logo chýba - inak nadpis vyskočí hore
   a karty v riadku sa rozídu. Prázdny element, žiadna náhradná grafika. */
.zn-icc__icon,
.zn-icc__icon-slot,
.zn-icc__logo {
  flex-shrink: 0;
  width: 52px;                                  /* Figma token „Icon" 52 */
  height: 52px;
}
/* Logo partnera: Figma vrstva „Aspect ratio=1:1" (I779:45063;19:2421) je 52 široký box
   s `object-contain` - logo si drží vlastný pomer a NEDEFORMUJE sa. Overené na renderi
   779:45062: všetkých šesť log je presne 52 širokých a zvisle vycentrovaných v 52 boxe
   (Woo 52×31, CF7 52×40, WPForms 52×46, Ninja 52×39, POHODA 52×20, OMEGA 52×12). */
.zn-icc__logo {
  display: block;
  object-fit: contain;
  object-position: center;
}

.zn-icc__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                          /* 16 (nadpis ↔ text) */
  color: var(--color-text);                     /* Scheme A/Text #023047 */
}

/* Figma „Heading/H4-A": Mix Medium Italic, Size/H4 32, weight 580, lh 1.3,
   letter-spacing −1. POZOR na dve veci:
   1) italic je CELÝ nadpis, nie len akcentová časť ako inde v téme,
   2) −1 je Figma percento, nie pixely - render dáva `tracking-[-0.32px]`
      pri 32px, teda −0.01em. Zapísané v em, aby sedelo aj po zmene veľkosti. */
.zn-icc__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 580;                             /* Figma literál (medzi medium 550 a semibold 650) */
  font-size: var(--text-4xl);                   /* Size/H4 32 */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: inherit;
}
.zn-icc__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);                  /* Size/Regular 16 */
  line-height: 1.5;
  color: inherit;
}

/* ── Variant `icc_text_style = small` (Partnerská spolupráca 779:45035) ──────────
   Ten istý komponent karty, ale iný textový štýl: „Text/Small/Normal" 14 / 1.5 na
   „Scheme A/Text Secondary" #75878f namiesto „Text/Regular/Normal" 16 / Scheme A/Text.
   Zámerne modifier, NIE globálna zmena - Bezpečnosť (788:58432) ostáva na 16/#023047.
   Špecificita 2 triedy, aby to prebilo `.zn-icc__text` vyššie aj prípadné globálne
   pravidlo z components.css (ten sa načítava PO blokových CSS).

   MIN-HEIGHT sa tu PÚŠŤA (0), nefixuje: vo Figme sú karty 221 (riadok 1) a 200
   (riadok 2) - overené, že to nie je variant komponentu, ale iba dĺžka textu:
     16 pt + 52 slot + 8 + 41,6 nadpis + 16 + text + 24 pb
     = 157,6 + 3×21 = 220,6 ≈ 221   |   157,6 + 2×21 = 199,6 ≈ 200
   Grid stretch vyrovná karty v rámci riadku sám, takže výsledok je presne 221/200.
   Pevných 230 (= 3 riadky pri 16px) by tu oba riadky zbytočne natiahlo. */
.zn-icc--text-small { --zn-icc-card-min: 0; }
.zn-icc--text-small .zn-icc__text {
  font-size: var(--text-sm);                    /* Size/Small 14 */
  color: var(--color-text-secondary);           /* Scheme A/Text Secondary #75878f */
}

/* Tlačidlo pod mriežkou (voliteľné, Figma 779:45189). Vycentrované, medzera od mriežky
   32 („Div Padding/div-padding-medium" - Figma: mriežka končí 453, tlačidlo od 485).
   Vzhľad = globálna `.btn.btn--outline` (DS Tertiary: transparent, border
   „Scheme A/Border" rgba(3,3,3,.15), text „Scheme A/Text" 16 w650, radius 12) - v bloku
   sa NEDEFINUJE nanovo, mení sa len VÝŠKA: token „Button" má v tomto móde 40, kým
   globálna `.btn` je 48 (téma ich zjednotila 2026-07-10). Šírka 123 vyjde z obsahu
   („Zobraziť viac" + 2×16 padding + border).
   Špecificita 2 triedy je nutná - components.css sa načítava PO blokových CSS. */
.zn-icc__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);                   /* 32 */
}
.zn-icc .zn-icc__more { height: 40px; }

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

/* ══ Mobil (≤767.98px) ════════════════════════════════════════════════════
   Mobilný frame KARTY dodaný (1202:131373 + 131375/131381/131382), hodnoty nižšie
   sú z neho 1:1. Frame pre samotnú SEKCIU (section padding, gap mriežky) dodaný
   NEBOL - tie dve hodnoty ostávajú konvenciou a sú označené. Section padding cez
   `-m` premenné (inak by ho components.css prepolvil). ══ */
@media (max-width: 767.98px) {
  .zn-icc { padding-inline: var(--space-4); }      /* Page Padding (mobil) 16 */
  /* Section padding mobilný frame pre TÚTO sekciu nedodaný - konvencia, nie Figma. */
  .zn-icc.zn-block { --zn-pt-m: 32px; --zn-pb-m: 48px; }
  .zn-icc__grid { grid-template-columns: 1fr; gap: var(--space-4); }

  /* Figma mobil 1202:131373: karta 361 × 203, padding pt 8 (div-padding-xsmall)
     / px 16 / pb 16 (div-padding-small). Obsah: ikona 52 + 8 + nadpis 31,2 + 16
     + text 72 = 179,2 do dostupných 179 - preto opäť `min-height`, nie `height`. */
  .zn-icc__card {
    min-height: var(--zn-icc-card-min-m, 203px);
    padding: var(--space-2) var(--space-4) var(--space-4);
  }
  /* Variant s menším textom púšťa min-height aj na mobile - z rovnakého dôvodu ako
     na desktope (karta má rásť podľa textu, nie na výšku 3 riadkov pri 16px). */
  .zn-icc--text-small { --zn-icc-card-min-m: 0; }
  /* Size/H1 má v mobilnom móde 40. `--text-7xl` je clamp a pri 393px vracia ~38,
     preto literál - rovnako ako `hero-simple`. Mobilný frame TEJTO sekcie nedodaný. */
  .zn-icc__heading { font-size: 2.5rem; }
  /* „Size/H4" má v mobilnom móde 24. `--text-3xl` sa použiť NEDÁ: je to
     clamp(20 → 24) a pri 393px vracia 20 (spodnú hranicu). Preto literál. */
  .zn-icc__title { font-size: 1.5rem; }            /* 24 */
}