/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Logo Cards (Figma 767:23999 „Section / Bento 1", stránka
   „Podporované banky")

   ⚠️ Figma názov vrstvy KOLIDUJE s `zenturi/bento-1` aj so zdrojom
   `zenturi/icon-cards` (788:55546 sa volá rovnako). Audit reuse - prečo je to
   samostatný blok a nie variant `icon-cards` - je v hlavičke template.php.

   Karta = LEN logo + tlačidlo. Geometria z Figmy (node 767:24003 a spol.):
     karta          405,333 × 192, radius 12, biela, BEZ orámovania
     Content        pt 16 / px 24 / pb 24, gap 32
     logo box       220 × 80 (pomer 143/52), vycentrovaný
     Actions        gap 24, tlačidlo h 40 na celú šírku obsahu (357,333)
   Kontrola výšky: 16 + 80 + 32 + 40 + 24 = 192 ✓

   Mriežka 3 v riadku pri 1280 kontajneri: (1280 − 2×32) / 3 = 405,333 na kartu.
   Rovnaká technika ako `icon-cards` - `grid` s 1fr stĺpcami, nie pevná šírka
   (Figma to má ako flex-wrap s min-width 391; pri šiestich kartách vyjde to isté
   a repeater má zvládnuť ľubovoľný počet).

   Sekcia: pt 48 („Section Padding/section-small"), pb 80 („section-medium").
   Kontrola geometriou: 48 + 192 + 32 + 192 + 80 = 544 = výška node ✓
   POZADIE: bg-medium si sekcia nastavuje SAMA (žiadne globálne bg-medium
   neexistuje - rovnako ako všetky bento bloky).
   ══════════════════════════════════════════════════════════════════════════ */

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

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

.zn-lgc__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;
}

/* Karta je vo Figme `overflow-clip` - tu sa NEPREBERÁ. Logo drží `contain`,
   takže nemá čo pretiecť, a pri dlhšom texte tlačidla by orezanie chybu len
   ticho schovalo (rovnaké rozhodnutie ako v `icon-cards`).
   `min-height`, nie `height`: obsah je fixný (80 + 40 + paddingy = 192), ale keby
   klient dal dlhší text tlačidla a ten sa zalomil, karta má radšej narásť. */
.zn-lgc__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 192px;
  background: var(--color-white);               /* Scheme A/Foreground #ffffff */
  border-radius: var(--radius-md);              /* Radius/Medium 12 */
}

/* Figma „Content" I767:24003;19:2328 - gap 32, pt 16 (div-padding-xsmall),
   px 24 / pb 24 (div-padding-small). */
.zn-lgc__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                          /* 32 */
  padding: var(--space-4) var(--space-6) var(--space-6);
}

/* Figma „BankLogo-N" I767:24003;19:2421: `aspect-ratio` 143/52, max 220 × 80,
   width 100 % - v 357,333 širokom obsahu teda vždy 220 × 80 (max-width je
   viazané pravidlo, z neho pomer dopočíta výšku 80). Vycentrované, lebo
   „Content Top" má `items-center`.
   Slot sa drží aj bez loga, nech sa karty v riadku nerozídu; prázdny div,
   ŽIADNA náhradná grafika (CLAUDE.md). */
.zn-lgc__logo-box {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 143 / 52;                       /* 220 / 80 */
  margin-inline: auto;
}

/* `contain` = Figma „Aspect ratio" box, logo si drží vlastný pomer a nedeformuje sa.
   OPTICKÉ DOLADENIE JE V ASSETE, NIE TU. Dizajnér každému logu nastavil vo Figme
   vlastnú mierku vnútri toho istého 220 × 80 boxu (odčítané z design contextu
   767:23999 a premerané proti renderu):
     Fio banka        vyplnené na šírku, zvislé priesvitné okraje ORezané
     Tatra banka      čistý `contain` (85 × 80)
     ČSOB             čistý `contain` (102,6 × 80)
     VÚB banka        čistý `contain` (220 × 36,7)
     Raiffeisen       zmenšené na 87,66 % šírky boxu (192,85 × 51,43)
     Slov. sporiteľňa zmenšené na 86,97 % šírky boxu (191,33 × 66,14)
   Tie mierky sú zapečené do samotných PNG - Fio je orezané o priesvitnú rezervu,
   Raiffeisen a Sporiteľňa majú priesvitné plátno dopočítané tak, aby `contain`
   trafil presne dizajnérovu veľkosť (šírka plátna = šírka loga / podiel, výška
   = šírka / 2,75). Preto tu NIE JE per-kartové pole na mierku: veľkosť je
   vlastnosť loga, nie bloku, a klientom nahrané logo sa takto normalizuje samo.
   Overené pixel diffom proti renderu 767:23999 - optimum umiestnenia vyšlo pri
   posune (0, 0) pre päť log a (1, 0) px pre ČSOB (zaokrúhlenie nepárnej šírky). */
.zn-lgc__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Figma „Actions" I767:24003;19:2335 - gap 24 (jedno tlačidlo ho nevyužije, ostáva
   kvôli vernosti komponentu), tlačidlo `flex: 1` na celú šírku obsahu.
   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,
   px 16 / py 10) - v bloku sa NEDEFINUJE nanovo. Mení sa len VÝŠKA: token „Button"
   má v tomto node 40, kým globálna `.btn` je 48 (téma ich zjednotila 2026-07-10).
   Špecificita 2 triedy je nutná - components.css sa načítava PO blokových CSS. */
.zn-lgc__actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);                          /* 24 */
}
.zn-lgc .zn-lgc__btn {
  flex: 1 1 0%;
  min-width: 0;
  height: 40px;
}

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

/* ══ Mobil (≤767.98px) - Figma frame NEDODANÝ ═════════════════════════════
   Hodnoty konvenciou podľa `icon-cards` (page-padding 16, jeden stĺpec, gap 16).
   Section padding cez `-m` premenné, NIE holé `--zn-pt`/`--zn-pb` - components.css
   inak desktopovú hodnotu automaticky prepolví (CLAUDE.md).
   Vnútorné paddingy karty sa NEZMENŠUJÚ: logo box je 220 široký a pri 360 px
   viewporte ostáva v obsahu (360 − 32 page − 48 karta = 280) miesto, takže niet
   dôvodu odhadovať iné čísla, kým Ján nedodá mobilný frame. ══ */
@media (max-width: 767.98px) {
  .zn-lgc { padding-inline: var(--space-4); }                   /* Page Padding (mobil) 16 */
  .zn-lgc.zn-block { --zn-pt-m: 32px; --zn-pb-m: 48px; }
  .zn-lgc__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}