/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Timeline (Figma 783:45538 „Section / Timeline 1")

   Vľavo tagline + nadpis + text + CTA, vpravo zvislá os s bodkami a bielymi
   kartami krokov. Odôvodnenie, prečo samostatný blok (a čo sa v téme hľadalo,
   než sa napísal), je v hlavičke template.php.

   POZADIE NIE JE plné bg-medium: je to FADE z bg-medium do BIELEJ. Zmerané na
   Figma rendere - zvislý profil pri x = 20 (mimo obsahu) ide 236 → 255 a bielu
   dosiahne pri y ≈ 400 z 934, teda 42,8 %; vodorovne je rovnaké (255 na x = 5
   aj 1435), takže 180°, nie diagonála. Sedí to s design contextom
   (`transparent 0% → white 43,222%`), preto berieme jeho presnú zarážku.
   ⚠️ DÔSLEDOK: sekcia KONČÍ BIELA, nie bg-medium. Vlnka pod ňou preto musí byť
   variant `navy-on-light`, nie `navy-on-medium`.

   MOBIL: Figma frame NEDODANÝ - hodnoty pri @media nižšie sú konvencia.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-tl {
  /* Dve vrstvy: biely fade nad plnou bg-medium (rovnaké poradie ako Figma). */
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 43.222%),
    linear-gradient(90deg, var(--color-bg-medium) 0%, var(--color-bg-medium) 100%);
  padding-inline: var(--space-16);              /* Page Padding/padding-global 64 */
}
.zn-tl.zn-block { --zn-pt: var(--space-24); --zn-pb: var(--space-24); }  /* section-large 112 */

.zn-tl__container {
  max-width: var(--container-max);              /* Max Width/max-width-xxlarge 1280 */
  margin-inline: auto;
}

/* Figma „Content" I783:45538;783:45255: flex row, gap 16, items-start.
   Ľavý stĺpec je FIXNÝCH 576, pravý dobehne zvyšok (1280 − 576 − 16 = 688). */
.zn-tl__grid {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);                          /* 16 */
}

/* ── Ľavý stĺpec ─────────────────────────────────────────────────────────── */
.zn-tl__intro {
  flex: none;
  width: 576px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-8);                          /* 32 (Section Title ↔ Actions) */
}
.zn-tl__title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);                          /* 16 (tagline ↔ nadpis) */
  width: 100%;
}
/* Heading/Tagline: Mix Regular Italic 16/1.5, weight 420 - rovnaké ako
   `.zn-hl2__tagline` a `.zn-hsm__tagline`. */
.zn-tl__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);
}
.zn-tl__lede {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);                          /* 24 (nadpis ↔ text) */
  width: 100%;
}
/* Heading/H2: Sans Regular 48/1.1 - POZOR, H2, nie H1 ako vo väčšine sekcií.
   Zalomenie do troch riadkov je vo Figme explicitné (dva <br>), preto ho drží
   admin v poli cez `zenturi_heading_brk()`, nie CSS. */
.zn-tl__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);
}
/* Akcent „v 3 jednoduchých krokoch." je vo Figme Mix Regular Italic v ROVNAKEJ
   veľkosti aj farbe - líši sa len rez, preto tu NIE JE farebný override
   (rovnako ako v `hero-split`). */
.zn-tl__heading-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);
  color: inherit;
}
/* Text/Medium/Normal 18/1.5. Prvá veta je bold - rieši ju `<strong>` v poli,
   nie pravidlo v šablóne, aby si ju admin vedel presunúť. */
.zn-tl__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);
}
/* CTA = globálna `.btn.btn--primary` bez odchýlky (#ffb703, 48, radius 12,
   text 16 w650 čierny). Figma tu ikonu nemá. */
.zn-tl__actions { display: flex; }

/* ── Pravý stĺpec: os + karty ────────────────────────────────────────────── */
.zn-tl__steps {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Figma „Content" riadok: [Timeline progress 128] gap 16 [Timeline date].
   Riadky NEMAJÚ medzi sebou gap - odstup 32 medzi kartami robí padding
   `.zn-tl__step-body` (16 dole + 16 hore ďalšieho). Je to zámer: linka osi tak
   prechádza cez ten odstup NEPRETRŽITE, kým gap by ju prerušil. */
.zn-tl__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);                          /* 16 */
}

.zn-tl__axis {
  flex: none;
  width: 128px;                                 /* Figma „Timeline progress" */
  align-self: stretch;                          /* os ide cez celú výšku riadku */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* „Progress container": flex stĺpec s gapom 8. Vďaka nemu je odstup linka↔bodka
   8px na oboch stranách automaticky a bodka sedí 48px pod vrchom karty
   (40 linka + 8 gap pri prvom kroku, 56 + 8 pri ďalších, ktoré majú nad kartou
   ešte 16px paddingu). NEPOZICUJE sa absolútne - týmto to vyjde pri ľubovoľnom
   počte krokov aj pri ľubovoľne vysokej karte. */
.zn-tl__progress {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);                          /* 8 */
}
.zn-tl__line {
  flex: none;
  width: 3px;                                   /* Figma „Divider" */
  background: var(--color-border);              /* Scheme A/Border rgba(3,3,3,.15) */
  border-radius: var(--radius-lg);              /* 24 */
}
/* Prvý krok má linku nad bodkou 40, ostatné 56 - rozdiel je presne tých 16px
   horného paddingu, ktorý prvý krok nemá. Vo Figme sú to dve rôzne výšky
   (0:28 = 40, 0:41 a 0:54 = 56), nie jedna hodnota. */
.zn-tl__line--top { height: 40px; }
.zn-tl__step:not(:first-child) .zn-tl__line--top { height: 56px; }
/* Linka pod bodkou dorastie do konca riadku. Pri POSLEDNOM kroku sa
   nevykresľuje vôbec - nie je len skrytá, template ju nevypíše (Figma 0:56 je
   hidden). Os teda končí pri poslednej bodke. */
.zn-tl__line--bottom { flex: 1 1 0%; min-height: 0; }
.zn-tl__dot {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-primary);             /* Scheme A/Accent/Primary #ffb703 */
}

/* „Timeline date": pb 16 pri prvom kroku, py 16 pri ostatných → medzi kartami
   32. Je to blok, nie flex - karta si šírku vezme sama. (Keby to bol flex
   s `flex-basis: 0`, padding by sa pripočítal k šírke.) */
.zn-tl__step-body {
  flex: 1 1 0%;
  min-width: 0;
  padding-bottom: var(--space-4);               /* 16 */
}
.zn-tl__step:not(:first-child) .zn-tl__step-body { padding-top: var(--space-4); }

.zn-tl__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);                          /* 32 (nadpis ↔ popis) */
  background: var(--color-white);               /* Color Scheme 1/Foreground #ffffff */
  padding: var(--space-8);                      /* 32 */
  border-radius: var(--radius-md);              /* Radius/Medium 12 */
  /* Efekt „xsmall-s": dva drop shadowy #135B6C0D r2 a #135B6C26 r3, oba offset
     (0,1). Karta NEMÁ border - overené meraním na Figma rendere: ľavá hrana je
     (232,238,239) a pravá (231,238,239) s mäkkým dobehom cez ~3px, kým 1px
     border `#03030326` by dal ostrých ~209. Je to teda tieň, nie obrys. */
  box-shadow:
    0 1px 2px rgba(19, 91, 108, 0.05),
    0 1px 3px rgba(19, 91, 108, 0.15);
}
/* Heading/H4-A: Mix Medium Italic 32/1.3, weight 580, tracking −1 (Figma
   percento = −0,32px pri 32 → −0.01em, zapísané v em nech drží pri inej
   veľkosti). Farba je TEAL `Scheme A/Accent/Secondary Dark`, ktorá má V TOMTO
   node-u hodnotu #1b8098 - POZOR, v `cta-list` má ten istý token #219ebc (iný
   mód). Overené meraním na rendere: (27,128,152). Preto literál, nie token témy
   (`--color-secondary` je #219ebc). */
.zn-tl__card-title {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 580;
  font-size: var(--text-4xl);                   /* Size/H4 32 */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #1b8098;                               /* Scheme A/Accent/Secondary Dark */
}
/* Text/Medium/Normal 18/1.5.
   ⚠️ ODCHÝLKA OD FIGMY (vedomá, nahlásená): Figma tu má rodinu **Roboto** a farbu
   **#000000** (`Color Scheme 1/Text`) - obe overené: v rendere je v ťahoch písma
   naozaj (0,0,0) a tvary písmen sa od Season líšia. Sú to pozostatky
   nepretokenizovaného Relume komponentu (zdroj je relume.io/components/timeline-2):
   téma Roboto vôbec nenačítava a zvyšok webu má text v `#023047`. Renderujeme
   preto témovým písmom a `--color-text`. Návrat na Figmu = `font-family: Roboto`
   (musela by sa doplniť) a `color: #000`. */
.zn-tl__card-text {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--text-lg);                    /* Text Sizes/Text Medium 18 */
  line-height: 1.5;
  color: var(--color-text);
}

/* ══ Tablet (≤1199.98px) - Figma preň nemá spec ══ */
@media (max-width: 1199.98px) {
  .zn-tl { padding-inline: var(--space-8); }
  .zn-tl__grid { gap: var(--space-8); }
  .zn-tl__intro { width: 40%; }
  .zn-tl__axis { width: 64px; }                 /* 128 by pri užšom stĺpci zjedlo kartu */
}

/* ══ Mobil (≤767.98px) - Figma frame NEDODANÝ ═════════════════════════════
   Konvencia príbuzných sekcií: page-padding 16, stĺpce stackujú.
   OS OSTÁVA (je to vizuálny podpis sekcie), len sa zúži zo 128 na 32 - bodka 15
   aj linka 3 sú stále vycentrované, takže sa nič neprekresľuje. Pri 393px tak
   karte ostane 361 − 32 − 16 = 313.
   Section padding cez `-m` premenné, nie holé `--zn-pt` (CLAUDE.md).
   Veľkosti písma sú LITERÁLY: `--text-6xl`/`--text-4xl` sú clampy a pri 393px
   vracajú spodnú hranicu (34 resp. 26), nie mobilnú hodnotu z dizajnu. ══ */
@media (max-width: 767.98px) {
  .zn-tl { padding-inline: var(--space-4); }                    /* Page Padding 16 */
  .zn-tl.zn-block { --zn-pt-m: 56px; --zn-pb-m: 56px; }         /* section-large (mobil) 56 */

  .zn-tl__grid { flex-direction: column; gap: var(--space-8); } /* 32 */
  .zn-tl__intro { width: 100%; gap: var(--space-6); }           /* 24 */
  .zn-tl__heading { font-size: 2.5rem; }                        /* Size/H2 (mobil) 40 */

  .zn-tl__steps { width: 100%; }
  .zn-tl__step  { gap: var(--space-4); }
  .zn-tl__axis  { width: 32px; }
  .zn-tl__card  { padding: var(--space-6); gap: var(--space-6); }   /* 24 / 24 */
  .zn-tl__card-title { font-size: 1.5rem; }                     /* Size/H4 (mobil) 24 */
}