/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Resource Cards (Relume layout-458)
   Figma desktop 764:23076, mobil 1201:110049 (stránka „Školenia").

   Dvojstĺpcová hlavička + 3 schodovito posunuté karty s tlačidlom. Odôvodnenie,
   prečo samostatný blok a nie variant `cards-descending`, je v template.php.

   Tlačidlo = globálna `.btn.btn--primary` bez odchýlky: Figma inštancia
   I764:23076;20:3942;20:2937 je h 48, px 16 / py 10, radius 12, bg #ffb703,
   text 16/650 čierny - presne to, čo `.btn` a `.btn--primary` v components.css
   už majú. Vzhľad tlačidla sa tu NEDEFINUJE nanovo (CLAUDE.md).
   ══════════════════════════════════════════════════════════════════════════ */

/* Pozadie: Figma stohuje DVA fully - plný #ecf2f4 a nad ním biely zvislý gradient
   `rgba(255,255,255,0) 0% → #fff 43,222%`. Overené meraním na renderi sekcie:
   y = 0 dáva (236,242,244), od y ≈ 419 z 970 (= 43,2 %) je to čisté (255,255,255).
   Preto sa spodok sekcie napája na vlnku `navy-on-light` (biele jamky), NIE na
   `navy-on-medium` - tá by nad vlnkou nechala viditeľný švík (rovnaký prípad ako
   Cenník/discounts, viď komentár pri `.zn-wavesep--navy-on-light`). */
.zn-rsc {
  background-color: var(--color-bg-medium);          /* Scheme A/Background Medium #ecf2f4 */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-bg) 43.222%);
  padding-inline: var(--space-16);                   /* Page Padding/padding-global 64 */
}
.zn-rsc.zn-block {
  --zn-pt: var(--space-12);                          /* Section Padding/section-small 48 */
  --zn-pb: var(--space-24);                          /* Section Padding/section-large 112 */
}

.zn-rsc__container {
  max-width: var(--container-max);                   /* Container/container-large 1280 */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);                              /* div-padding-xlarge 80 */
}

/* ── Hlavička: dva stĺpce 600 + 600, gap 80 ─────────────────────────────────
   Figma „Content" 20:1804. Oba stĺpce sú `flex-[1_0_0]`, takže pri kontajneri
   1280 a gape 80 vyjde 600 + 600 samo - šírky sa NEzapisujú natvrdo. */
.zn-rsc__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);                              /* 80 */
}
.zn-rsc__head-col {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);                               /* „Section Title" gap 16 */
}
/* Pravý stĺpec: Figma „Column" 20:1810 má pt 48 (div-padding-large) - text tak
   začína pod úrovňou taglinu, zhruba na prvom riadku nadpisu. */
.zn-rsc__head-col--text {
  padding-top: var(--space-12);                      /* div-padding-large 48 */
  gap: var(--space-8);                               /* „Content" gap 32 */
}

/* Heading/Tagline: Mix Regular Italic 16/1.5, weight 420 - tá istá škála ako
   `.zn-hsm__tagline` / `.zn-hl2__tagline`, preto rovnaké tokeny. */
.zn-rsc__tagline {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-tagline);                /* 420 */
  font-size: var(--text-base);                       /* Size/Regular 16 */
  line-height: 1.5;
  color: var(--color-text);                          /* Scheme A/Text #023047 */
}
/* Heading/H2 48/1.1 w400. ŽIADNY italic akcent - na rozdiel od `cards-descending`
   je nadpis vo Figme JEDEN textový uzol s jedným štýlom (overené v design
   contexte, nie odhad), preto blok ani nemá pole pre akcent. */
.zn-rsc__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-6xl);                        /* Size/H2 48 */
  line-height: 1.1;
  color: var(--color-text);
}
.zn-rsc__text {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--text-lg);                         /* Size/Medium 18 */
  line-height: 1.5;
  color: var(--color-text);
}

/* ── Schodovité stĺpce (Figma: pt 0 / 100 / 200, gap 48) ────────────────────
   Rovnaká geometria ako `cards-descending` - jediné, čo majú tie dva bloky
   spoločné, a je to zámerne skopírované, nie zdieľané: 100/200 sú literály
   z Figmy, nie token. */
.zn-rsc__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);                              /* div-padding-large 48 */
}
.zn-rsc__col {
  flex: 1 1 0%;
  min-width: 0;
}
.zn-rsc__col:nth-child(2) { padding-top: 100px; }
.zn-rsc__col:nth-child(3) { padding-top: 200px; }

/* ── Karta: obrázok + obsah, gap 24 (bez boxu, tieňa a paddingu) ── */
.zn-rsc__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                               /* div-padding-small 24 */
}

/* Figma „Image" 20:2926 je aspect 624/360 (pri stĺpci 394,667 = 227,7 vysoký).
   Zaoblenie Radius/Base 16 na všetkých rohoch. */
.zn-rsc__media {
  position: relative;
  aspect-ratio: 624 / 360;
  width: 100%;
  border-radius: var(--radius-base);                 /* Radius/Base 16 */
  overflow: hidden;
}
.zn-rsc__media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Vlasový rám (Figma „Placeholder Image" 20:2927, Scheme A/Border rgba(3,3,3,.15)).
   Má ho karta 2 a 3 (svetlé UI screenshoty, ktoré by inak splynuli s bielym
   pozadím sekcie), karta 1 s fotkou NIE - overené per-node, nie odhadnuté.

   `box-shadow: inset` na ::after, nie `border`: Figma stroke je INSIDE, kým CSS
   `border` by rám pripočítal k obsahu (CLAUDE.md). Pri troch stĺpcoch v rade by
   to spravilo obrázky kariet 2 a 3 o 2 px iné než kartu 1 a rozhodilo zarovnanie.
   ::after (a nie inset shadow priamo na `.zn-rsc__media`) preto, že inset tieň
   rodiča sa kreslí POD deťmi - nepriehľadná fotka by ho prekryla. */
.zn-rsc__media--border::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--color-border);   /* Stroke/Border Width 1 */
  pointer-events: none;
}

/* Figma medzi nadpisom a tlačidlom: „Content" 20:2928 gap 32 (div-padding-medium).
   Vnorené „Content Top" (gap 8) a „Content" (gap 16) sú jednodeťové wrappery bez
   vizuálneho efektu - preto sa neprepisujú do markupu (rovnako ako v
   `cards-descending`). */
.zn-rsc__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                               /* div-padding-medium 32 */
}
/* Heading/H4 32/1.3, Sans Medium 550, letterSpacing −1 % (= −0.01em, na 32 px
   presne −0,32 px ako udáva Figma). V em, aby to držalo aj pri mobilných 24. */
.zn-rsc__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-4xl);                        /* Size/H4 32 */
  font-weight: var(--weight-medium);                 /* Sans Medium 550 */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.zn-rsc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);                               /* „Actions" gap 24 */
}

/* ══ Tablet (≤1199.98px) - Figma preň nemá spec ══ */
@media (max-width: 1199.98px) {
  .zn-rsc { padding-inline: var(--space-8); }
}

/* Pod 992 sa schody aj dvojstĺpcová hlavička rozpadajú: pri troch stĺpcoch by
   karta bola užšia než jej tlačidlo a posun 200 px by spodnú kartu vytlačil
   hlboko pod sekciu. Rovnaký medzikrok ako `cards-descending`. */
@media (max-width: 991.98px) {
  .zn-rsc__head { flex-direction: column; gap: var(--space-6); }
  .zn-rsc__head-col--text { padding-top: 0; }
  .zn-rsc__row  { flex-direction: column; gap: var(--space-12); }
  .zn-rsc__col:nth-child(2),
  .zn-rsc__col:nth-child(3) { padding-top: 0; }
}

/* ══ Mobil (≤767.98px) = 1:1 podľa Figma 1201:110049 (mobile-mode tokeny) ══
   page-padding 16, section-small 32 / section-large 64, div-padding-xlarge 48,
   div-padding-medium 20, div-padding-small 16, H2 38, Medium 16, H4 24.
   Section padding cez `-m` premenné, NIE holé `--zn-pt` (CLAUDE.md: `.zn-block`
   by holú desktopovú hodnotu na mobile ešte raz prepolvil). */
@media (max-width: 767.98px) {
  .zn-rsc { padding-inline: var(--space-4); }                  /* Page Padding 16 */
  .zn-rsc.zn-block { --zn-pt-m: 32px; --zn-pb-m: 64px; }       /* 32 / 64 */

  /* div-padding-xlarge (mobil) 48. POZOR: `--space-12` sa tu NEDÁ použiť - je to
     clamp(2.5rem, 3.4vw, 3rem), takže pri 393 px spadne na 40, nie 48 (namerané).
     `--space-20` = clamp(3rem, 5.5vw, 5rem) drží 48 až do 873 px, teda v celej
     mobilnej query - rovnaká voľba ako v `cards-descending`. */
  .zn-rsc__container { gap: var(--space-20); }                 /* 48 */

  /* Hlavička: „Content" gap 20, „Section Title" gap 12, pravý stĺpec bez pt. */
  .zn-rsc__head     { gap: 20px; }                             /* div-padding-medium (mobil) 20 */
  .zn-rsc__head-col { gap: 12px; }
  .zn-rsc__head-col--text { padding-top: 0; gap: var(--space-8); }

  .zn-rsc__heading { font-size: 2.375rem; }                    /* Size/H2 (mobil) 38 */
  .zn-rsc__text    { font-size: var(--text-base); }            /* Size/Medium (mobil) 16 */

  .zn-rsc__row     { gap: var(--space-20); }                   /* div-padding-xlarge (mobil) 48 */
  .zn-rsc__card    { gap: var(--space-4); }                    /* div-padding-small (mobil) 16 */
  .zn-rsc__content { gap: 20px; }                              /* div-padding-medium (mobil) 20 */

  /* Size/H4 (mobil) 24; tracking ostáva −0.01em = −0,24 px, presne ako Figma. */
  .zn-rsc__card-title { font-size: 1.5rem; }
}