/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Section / Cards descending (Relume layout-458)
   Nadpis + 3 schodovito posunuté stĺpce. Karta = obrázok (vlnitá hrana + zaoblené
   rohy sú v alfa kanáli PNG) + nadpis + text. Hodnoty 1:1 z Figmy (desktop 629:24537,
   mobil 1175:43871).
   Typografia karty (nadpis 32 Medium / text 16) = rovnaká škála ako karty v ostatných
   sekciách (design system H4-card), tu bez bieleho boxu/tieňa/paddingu.
   ══════════════════════════════════════════════════════════════════════════ */

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

.zn-cards-desc__container {
  max-width: 1280px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);                     /* nadpis ↔ karty 80 (div-padding-xlarge) */
}

/* ── Nadpis (H2 48, akcent italic teal) ── */
.zn-cards-desc__heading {
  margin: 0;
  max-width: 1280px;
  font-family: var(--font-display);
  font-size: var(--text-6xl);               /* H2 48 */
  font-weight: var(--weight-regular);
  line-height: 1.1;
  color: var(--color-text);
}
.zn-cards-desc__accent {
  font-style: italic;
  font-weight: var(--weight-tagline);
  color: var(--color-secondary-dark);       /* #1b8098 */
}

/* ── Schodovité stĺpce (Figma: pt 0 / 100 / 200) ── */
.zn-cards-desc__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);                      /* 48 (div-padding-large) */
}
.zn-cards-desc__col {
  flex: 1 1 0;
  min-width: 0;
}
.zn-cards-desc__col:nth-child(2) { padding-top: 100px; }
.zn-cards-desc__col:nth-child(3) { padding-top: 200px; }

/* ── Karta: obrázok + obsah, gap 24 (bez boxu/tieňa/paddingu) ── */
.zn-cards-desc__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                       /* obrázok ↔ obsah 24 */
}
.zn-cards-desc__media {
  aspect-ratio: 624 / 360;
  width: 100%;
}
.zn-cards-desc__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                          /* vlnitá hrana + rohy sú v alfa kanáli PNG */
}
.zn-cards-desc__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                       /* nadpis ↔ text 16 */
}
.zn-cards-desc__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-4xl);                /* H4 32 */
  font-weight: var(--weight-medium);         /* Sans Medium 550 */
  line-height: 1.3;
  letter-spacing: -0.32px;
  color: var(--color-text);
}
.zn-cards-desc__text {
  margin: 0;
  font-size: var(--text-base);               /* 16 */
  line-height: 1.5;
  color: var(--color-text);
}

/* ── Responzivita ─────────────────────────────────────────────────────────────
   Tablet (medzikrok): stĺpce pod seba, bez schodovitého posunu.
   Mobil (≤767.98) = 1:1 podľa Figma node 1175:43871 (mobile-mode tokeny). ── */
@media (max-width: 991.98px) {
  .zn-cards-desc__row { flex-direction: column; gap: var(--space-8); }
  .zn-cards-desc__col:nth-child(2),
  .zn-cards-desc__col:nth-child(3) { padding-top: 0; }
}

@media (max-width: 767.98px) {
  /* Sekcia: section-large 64 + page-padding 16 (mobile mode). --zn-*-m prebije
     mobilné polovičenie paddingu v components.css (konvencia ako section-base). */
  .zn-cards-desc.zn-block { --zn-pt: 64px; --zn-pb: 64px; --zn-pt-m: 64px; --zn-pb-m: 64px; }
  .zn-cards-desc { padding-inline: var(--space-4); }        /* page-padding 16 */

  /* Nadpis: základ AJ italic akcent 38 (2.375rem). display:block = akcent na vlastnom
     riadku (konzistencia s ostatnými sekciami, napr. section-base Zen AI). Len mobil —
     desktop ostáva inline 1:1 s Figmou 629:24537.
     VEDOMÁ ODCHÝLKA od Figma 1175:43871 (tam je akcent 48 vs základ 38): Maroš 2026-07-17
     explicitne chce akcent na mobile rovnako veľký ako základ, nie väčší — nie chyba/odhad
     (rovnaká konvencia zámerných odchýlok ako napr. bento-tabs +20px padding). */
  .zn-cards-desc__heading { font-size: 2.375rem; }          /* 38 */
  .zn-cards-desc__accent  { font-size: 2.375rem; display: block; }  /* 38 = ako základ (klient) */

  /* Karty pod seba: row gap div-padding-xlarge mobil 48 (--space-20 = 48 na mobile;
     na desktope 80). Gap nadpis↔karty (--space-20 na containeri) je tiež 48 na mobile
     automaticky (clamp). Obrázok↔obsah = div-padding-small mobil 16. */
  .zn-cards-desc__row  { gap: var(--space-20); }
  .zn-cards-desc__card { gap: var(--space-4); }

  /* Titul karty Size/H4 mobil 24, tracking -1 % (= -0.24). Text ostáva 16.
     Gap titul↔text ostáva 16 (innermost Content gap; „div-padding-medium 20" je
     jednodeťový wrapper bez vizuálneho efektu — overené v design contexte). */
  .zn-cards-desc__title { font-size: 1.5rem; letter-spacing: -0.24px; }
}