/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Section / Zľavy (Cenník, posledná sekcia)
   Figma 401:25235 (nadpis, "Section / Header / Basic") + 401:25236 (3 karty,
   "Section / Bento 2" — názov nodu je zdedený z iného komponentu, obsahovo
   ide o riadok ikonových kariet, nie o skutočný bento layout).

   Biela sekcia. Nadpis H1 56 centrovaný, žiadny italic akcent (Figma má len
   jednoduchý text "Zľavy"). Pod ním riadok 3 kariet: biele pozadie, border
   --color-border, radius --radius-md (12), vlastný shadow (Figma hodnota
   0px 12px 11.75px rgba(5,57,69,.1) — nezodpovedá žiadnemu --shadow-* tokenu,
   hardcode). Karta: ikona 48×48 (duotone) + nadpis H5 24 + text 16 + tlačidlo
   (DS .btn--primary .btn--arrow, žiadny vlastný button vzhľad).
   ══════════════════════════════════════════════════════════════════════════ */

.zn-discounts {
  background: var(--color-bg);
  padding-inline: var(--space-16);              /* page-padding 64 */
}
.zn-discounts.zn-block {
  --zn-pt: var(--space-24);                     /* section-large 112 (header pt) */
  --zn-pb: var(--space-24);                     /* section-large 112 (cards pb) */
}

.zn-discounts__container {
  max-width: var(--container-max);              /* 1280 */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 56px;                                     /* header pb 8 + cards pt 48 (dva Figma frame-y) */
}

.zn-discounts__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-7xl);                    /* Size/H1 56 */
  font-weight: var(--weight-regular);            /* Figma: not-italic — "Mix Regular Italic" je len názov fontového rezu, nie skutočný sklon (rovnaká konvencia ako ostatné plain H1/H2 nadpisy v téme) */
  line-height: 1.1;
  text-align: center;
  color: var(--color-text);
}

/* ── Riadok kariet (flex-wrap, min-width 330 — 3 karty vedľa seba, na užšom stacknú) ──
   VEDOMÁ ODCHÝLKA od Figma dev-mode markupu (items-start, karta 3 bez fixnej výšky):
   Maroš 2026-07-22 explicitne chce všetky 3 karty zarovnané rovnako (rovnaká výška,
   tlačidlo v rovnakej úrovni), nie kartu 3 voľne vyššiu pre dlhší text. `align-items:
   stretch` (flex default) naťahuje všetky karty v riadku na výšku najvyššej susedky;
   spolu s `.zn-discounts__card-text { flex: 1 1 auto }` nižšie sa tlačidlo vždy pridrží
   spodku. Rovnaká konvencia zámerných odchýlok ako inde v téme (napr. cards-descending
   mobile akcent, bento-tabs +20 padding). */
.zn-discounts__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-8);                           /* div-padding-medium 32 */
}

.zn-discounts__card {
  flex: 1 1 0;
  min-width: 330px;
  min-height: 286px;                             /* Figma podlaha (karty 1+2); `stretch` vyššie doťahuje všetky 3 na výšku najvyššej */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--space-6);                       /* div-padding-small 24 */
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);               /* 12 */
  box-shadow: 0 12px 11.75px rgba(5, 57, 69, .1); /* Figma hodnota, žiadny --shadow-* token nesedí */
}

.zn-discounts__icon { display: block; width: 48px; height: 48px; flex-shrink: 0; }

.zn-discounts__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);                    /* Size/H5 24 */
  font-weight: var(--weight-medium);              /* Sans Medium 550 */
  line-height: 1.4;
  color: var(--color-text);
}

.zn-discounts__card-text {
  margin: 0;
  flex: 1 1 auto;                                 /* vyplní zvyšok karty, tlačidlo sa pridrží spodku */
  font-size: var(--text-base);                    /* 16 */
  line-height: 1.5;
  color: var(--color-text);
}
.zn-discounts__card-text strong { font-weight: var(--weight-bold, 700); }

.zn-discounts__card-action { margin-top: var(--space-2); } /* Action pt-8 navyše nad gap 12 */

/* ══════════════════════════════════════════════════════════════════════════
   RESPONZIVITA — žiadny mobilný Figma frame pre túto sekciu (otvorená otázka
   pre Jána, rovnako ako pri VypocetCeny-R/Bento 2). Generický fallback:
   karty pod seba ≤991.98px (min-width 330 by inak pretekalo), page-padding
   a section padding sa mobilne polovičia štandardne cez components.css.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .zn-discounts__row { flex-direction: column; }
  /* flex:none — desktopové flex:1 1 0 v column smere kolabuje karty na 0 výšku
     (flex-basis 0 v hlavnej osi; rovnaký fix ako bento-3 tablet stack) */
  .zn-discounts__card { flex: none; width: 100%; min-width: 0; min-height: 0; }
}

@media (max-width: 767.98px) {
  .zn-discounts { padding-inline: var(--space-4); }  /* page-padding mobil 16 */
  .zn-discounts__container { gap: var(--space-8); }   /* 32 — kompaktnejšie na mobile */
  .zn-discounts__heading { font-size: 40px; }         /* Size/H1 mobil (konvencia ako ostatné sekcie) */
}