/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Detail Blogu / hero (Figma 1201:105269 „Hero-Blog-Studia" desktop,
   1201:105291 mobil). Načítava sa LEN na `is_singular('post')`
   (`inc/enqueue.php`) - markup je vo `views/single-post.php`.

   REUSE CHECK (interné poznámky, povinný pred písaním nového CSS): tag = iná
   VEĽKOSŤ tej istej Figma "Tag" komponenty ako `.zn-blog-card__tag`
   (components.css) - hodnoty (h 40 / px 10 / py 4 / Size-Medium 18-16 /
   weight 550) sa NEZHODUJÚ s kartou (h 24 / Size-Small), preto vlastná
   trieda, nie zdieľaná; farba (--color-primary) aj radius (--radius-sm)
   token sú tie isté. Breadcrumb recept je identický s `.zn-hsm__crumb`
   (blocks/hero-simple/assets/style.css) - vlastný scope tu, lebo
   `zenturi_yoast_breadcrumb()` (inc/template-tags.php) vypisuje generickú
   `.zn-crumb` triedu zdieľanú budúcimi šablónami, nie blokovú `zn-hsm__*`.
   Telo článku pod hero REUSE-uje `.zn-doc` (longform.css) - žiadna nová
   prose typografia tu.

   Vlnka pod fotkou = SAMOSTATNÝ vektor (`assets/img/blog-single/wave.svg`,
   fill #8ecae6), NIE maska/klip na obrázku - farba vlnky je zámerne
   identická s farbou, do ktorej CSS gradient na spodku fotky dofarbuje,
   takže oba kusy vizuálne splynú do jednej vlnitej hrany. Gradient zarážky
   sa medzi breakpointmi LÍŠIA (Figma to má vedome inak, viď hlavička
   šablóny) - preberá sa cez custom properties nižšie.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-bloghero {
  position: relative;
  background: var(--color-bg-medium);                /* Scheme A/Background Medium #ecf2f4 */
  padding-inline: var(--space-16);                    /* Page Padding/padding-global 64 */
  padding-block: var(--space-6) var(--space-12);      /* pt div-padding-small 24 / pb section-small 48 */
  border-radius: 0 0 var(--radius-xl) var(--radius-xl); /* Radius/XLarge 40, len spodné rohy */
}

/* Centrovaný kontajner - REUSE rovnaký vzor ako `.zn-hl3__container`
   (blocks/hero-level3/assets/style.css) a `.zn-hsm__container` (hero-simple):
   `max-width: var(--container-max) + margin-inline: auto`. BEZ tohto stĺpec
   588 (pevný) + obrázok 660 (pevný) spolu dajú 1312 a ostanú zarovnané od
   ľavého page-paddingu - na monitore > 1440 + 128 (page-padding) ostáva vpravo
   prázdno (nahlásené, 2026-08-22). `.zn-bloghero__inner` je tu AJ kontajner AJ
   flex riadok naraz (hero-level3 ich má v 2 elementoch, `__container`/`__row`
   - netreba tretí wrapper div, `max-width`+`margin-inline:auto` funguje na tom
   istom elemente, čo je aj `display:flex`). */
.zn-bloghero__inner {
  display: flex;
  align-items: flex-start;                            /* NIE center - viď padding-top nižšie, presná Figma hodnota */
  gap: var(--space-16);                               /* Page Padding/padding-global 64 (Figma gap = rovnaký token) */
  max-width: var(--container-max);                    /* Container/container-large 1280 */
  margin-inline: auto;
}

.zn-bloghero__col {
  /* `get_design_context` na 1201:105269 (OPRAVENÉ 2026-08-22 - predošlá dávka
     mala toto obrátene): Column je `flex-[1_0_0]` (grow 1 / shrink 0 / basis 0 %),
     obrázkový "Container" je `shrink-0` + PEVNÝ `w-[660px]` (ŽIADEN flex-grow).
     Teda STĹPEC rastie, OBRÁZOK je fixný - presne opačne než pôvodná dávka
     (fixný stĺpec 588 + rastúci obrázok max 660), ktorá pri >1440 nechala oba
     na svojich stropoch a riadok sa prestal naťahovať (= bug vyššie). Rovnaký
     vzor ako `.zn-hl3__column { flex: 1 0 0; min-width: 0; }`. */
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;                                          /* Figma "Frame 15958" gap, rovnaké na oboch breakpointoch */
  /* Stĺpec ZAČÍNA NIŽŠIE než horná hrana obrázka - Figma `get_metadata`:
     Column y 65.50017, Container(obrázok) y 24, oba relatívne k tomu istému
     rodičovi (Hero-Blog-Studia) → rozdiel 41.50017 ≈ 41.5px. Explicitný
     `padding-top`, NIE spoliehanie sa na `align-items: center` (ten by dal
     rovnaký výsledok LEN NÁHODOU, keď má stĺpec presne Figma výšku 335 -
     krehké, rozíde sa pri inak dlhom nadpise). */
  padding-top: 41.5px;
}

/* ── Omrvinky (generická trieda z zenturi_yoast_breadcrumb()) ─────────────── */
.zn-crumb {
  display: flex;
  align-items: center;
}
.zn-crumb > span {
  display: flex;
  align-items: center;
  gap: var(--space-2);                                /* Figma 8 */
  font-family: var(--font-display);
  font-size: var(--text-sm);                          /* Size/Small 14 */
  line-height: 1.5;
  color: var(--color-text-secondary);                 /* Scheme A/Text Secondary #75878f */
}
.zn-crumb a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}
.zn-crumb a:hover,
.zn-crumb a:focus-visible { color: var(--color-text); }
/* Aktívna (posledná) položka - Figma ju NEMÁ tučnú (na rozdiel od
   `.zn-hsm__crumb .breadcrumb_last`), len farba Scheme A/Text. */
.zn-crumb .breadcrumb_last { color: var(--color-text); font-weight: var(--weight-regular); }
.zn-crumb__sep {
  display: inline-flex;
  flex-shrink: 0;                                     /* ikona vo flex riadku - interné poznámky */
  align-items: center;
}
.zn-crumb__sep svg { display: block; }

/* ── Tag (Figma "Tag" komponent, väčšia veľkosť než archívna karta) ───────── */
.zn-bloghero__tagwrap {
  display: flex;
  padding-top: 16px;
}
.zn-bloghero__tag {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);                    /* Radius/Small 8 */
  background: var(--color-primary);                   /* Scheme A/Accent/Primary #ffb703 */
  color: var(--color-text);                            /* Scheme A/Text #023047 */
  font-family: var(--font-display);
  font-size: var(--text-lg);                           /* Size/Medium 18 (desktop) */
  font-weight: var(--weight-medium);                    /* 550, Sans Medium */
  line-height: 1.5;
  white-space: nowrap;
}

.zn-bloghero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 3.5rem;                                   /* Size/H1 56 */
  line-height: 1.1;
  color: var(--color-text);
}

.zn-bloghero__meta {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);                          /* Size/Regular 16 */
  line-height: 1.5;
  color: var(--color-text);
}
.zn-bloghero__author { text-decoration: underline; }

/* ── Vizuál (fotka + vlnka) ─────────────────────────────────────────────── */
.zn-bloghero__visual {
  /* PEVNÝ 660px (viď poznámka pri `.zn-bloghero__col` vyššie) - rovnaký vzor
     ako `.zn-hl3__visual { flex-shrink: 0; width: 684px; }` (hero-level3). */
  flex-shrink: 0;
  width: 660px;
  display: flex;
  flex-direction: column;
}

.zn-bloghero__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;                                 /* 660/371.25 = 361/203.06 na oboch frame-och */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* Radius/XLarge 40, len horné rohy */
}
.zn-bloghero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zn-bloghero__fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(142, 202, 230, 0) var(--zn-bh-fade-start, 34%),
    var(--color-secondary-light) var(--zn-bh-fade-end, 99%)
  );
}

.zn-bloghero__wave {
  display: block;
  width: 100%;
  height: auto;                                          /* intrinsic pomer SVG 660:46.75 */
  margin-top: -1px;                                       /* subpixelová medzera pri zaokrúhlení šírky */
}

/* ══ Tablet (≤1199.98px) - Figma preň nemá spec, REUSE rovnaký breakpoint ako
   `.zn-hl3__row` (hero-level3): pevná šírka vizuálu (660) vedľa rastúceho
   textu inak v tomto rozsahu skolabuje (rovnaký dôvod, aký má komentár pri
   hero-level3 - text stĺpec by sa vytlačil takmer na 0). Stackuje sa SKÔR než
   na Figma mobil breakpoint 767.98 - ten nižšie potom dopĺňa len mobilné
   hodnoty veľkostí/farieb, layout (column/stretch) už platí odtiaľto. ══ */
@media (max-width: 1199.98px) {
  .zn-bloghero__inner {
    flex-direction: column;
    align-items: stretch;
  }
  /* Stackovaný layout = žiadny "začína nižšie" vzťah medzi stĺpcom a obrázkom
     (ten platí len pri riadku vedľa seba na desktope) a obrázok už nesmie byť
     pevných 660px - inak by pretiekol užší tablet/mobil viewport. */
  .zn-bloghero__col { padding-top: 0; }
  .zn-bloghero__visual { width: 100%; }
}

/* ══ Mobil (≤767.98px) - Figma mobil frame 1201:105291 ═════════════════════ */
@media (max-width: 767.98px) {
  .zn-bloghero {
    padding-inline: var(--space-4);                       /* Page Padding/padding-global 16 */
    padding-block: var(--space-4) var(--space-8);          /* pt div-padding-small 16 / pb section-small 32 */
  }
  .zn-bloghero__inner { gap: var(--space-4); }              /* 16 */

  .zn-bloghero__tag { font-size: var(--text-base); }       /* Size/Medium (mobil) 16 */
  .zn-bloghero__title { font-size: 2.5rem; }                /* Size/H1 (mobil) 40 */

  .zn-bloghero__frame { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } /* Radius/Large 24 */
  .zn-bloghero__fade { --zn-bh-fade-start: 52%; --zn-bh-fade-end: 97%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Telo článku (Figma 1201:105270 „Section / Longform / Left" desktop,
   1201:105292 mobil). `.zn-article__content` REUSE-uje `.zn-doc`
   (longform.css) pre typografiu `the_content()` - tu je LEN layout okolo
   (dvojstĺpec, sidebar, autorský box, zdieľanie, CTA karta).

   `.zn-doc`-ovo vlastné `padding-block-end: var(--space-24)` (longform.css)
   sa tu NULUJE - `.zn-article` je teraz vlastníkom CELÉHO section-paddingu
   (Figma `py: 112` je symetrický, na rozdiel od textovej podstránky, kde
   `.zn-doc` je sám osebe celá sekcia).
   ══════════════════════════════════════════════════════════════════════════ */

.zn-article {
  background: var(--color-bg);                     /* Scheme A/Background Light #ffffff */
  padding-inline: var(--space-16);                  /* Page Padding/padding-global 64 */
  padding-block: var(--space-24);                   /* Section Padding/padding-section-large 112 */
}
.zn-article .zn-doc { padding-block-end: 0; }

/* ⚠️ FIX (2026-08-22, Maroš): ľavý stĺpec bol príliš úzky. Zmerané, nie
   odhadnuté - príčina je `longform.css` `.zn-doc > :not([class*="wp-block-
   zenturi-"])` (base pravidlo, mimo media query): `width: min(768px, 100% -
   280px)`. `.zn-article__content` je flex stĺpec presne 584px (1024 −
   80 gap − 360 sidebar = 584, potvrdené `get_metadata` na 1201:105270 -
   Figma "Rich Text" má TIEŽ 584px, teda pomer stĺpcov v gride/flexe je
   SPRÁVNY, kandidát č. 2 z bugreportu odpadá). Vnútri toho 584px stĺpca ale
   KAŽDÉ dieťa `.zn-doc` dostane `min(768, 584 − 280) = 304px` - o 280px užšie,
   než má byť (Figma chce celú šírku stĺpca, 584px = 100 %).
   NEMENÍ SA `.zn-doc` základ ani `--card`/`--manual` (zdieľané s textovými
   podstránkami/API/manuálom) - override je scoped na `.zn-doc--article`,
   navyše LEN pri ≥1200px (kde je `.zn-article__inner` riadok vedľa sidebaru -
   pod touto šírkou sa stĺpce stackujú, viď @media nižšie, a base/tablet/mobil
   pravidlá z longform.css sa vôbec nedotknú - mobil (393) teda ostáva
   nezmenený, presne ako predtým). Špecificita `.zn-doc.zn-doc--article`
   (0,3,0) zámerne prebíja base pravidlo (0,2,0) bez závislosti na poradí
   v súbore - rovnaký vzor ako `.zn-doc.zn-doc--card h2` v longform.css. */
@media (min-width: 1200px) {
  .zn-doc.zn-doc--article > :not([class*="wp-block-zenturi-"]) {
    width: 100%;
    margin-inline: 0;
  }
}

.zn-article__inner {
  display: flex;
  align-items: flex-start;
  gap: 80px;                                        /* Figma "Content" gap, literál (žiaden token na 80) */
  max-width: 1024px;                                /* Container/max-width-xxlarge (tento node) 1024 */
  margin-inline: auto;
}

.zn-article__content {
  flex: 1 0 0;
  min-width: 0;
}

.zn-article__sidebar {
  flex-shrink: 0;
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);                             /* Div Padding/div-padding-large 48 */
}

/* ── "Obsah článku" (TOC, generovaný z h2/h3 - `zenturi_article_toc()`) ───── */
.zn-toc {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                              /* Figma Column gap 24 */
  width: 100%;
}
.zn-toc__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 580;
  font-size: var(--text-3xl);                       /* Size/H5 24 */
  line-height: 1.4;
  color: var(--color-text);                         /* Scheme A/Text #023047 */
}
.zn-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.zn-toc__item { margin: 0; }
.zn-toc__item a {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-display);
  line-height: 1.5;
}
.zn-toc__item a:hover,
.zn-toc__item a:focus-visible { text-decoration: underline; }
/* Nadpis 2. úrovne (core/heading level 2) - biele pozadie + spodný rám.
   ⚠️ AUDIT 2026-08-22: `border-bottom: 1px solid` pridávalo 1px NAD box
   (padding 12+12 + line-height 24 = Figma výška 48 presne, s bežným
   `border-bottom` vyjde 49) - Figma stroke je INSIDE, CSS border box
   rozširuje (viď interné poznámky). Fix: `box-shadow: inset` kreslí čiaru DNU,
   výška ostáva presne 48px ako vo Figme (overené `get_metadata`
   na 1201:105270 - Button height 48). */
.zn-toc__item--h2 a {
  background: var(--color-white);
  box-shadow: inset 0 -1px 0 var(--color-border);   /* Scheme A/Border rgba(3,3,3,.15) */
  padding: 12px 16px;
  font-weight: var(--weight-semibold);              /* 650, Sans SemiBold */
  font-size: var(--text-base);                      /* Size/Regular 16 */
}
/* Nadpis 3. úrovne (level 3) - odsadený, bez rámu/pozadia, menší text. */
.zn-toc__item--h3 a {
  padding: 12px 32px;
  font-weight: var(--weight-medium);                /* 550, Sans Medium */
  font-size: var(--text-sm);                         /* Size/Small 14 */
}

/* ── Navy CTA karta (Figma 1201:105270;746:21989 "Form") ──────────────────── */
.zn-artcta { width: 100%; }
.zn-artcta__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--color-text);                    /* #023047 - Figma "Scheme A/Foreground" je na
                                                          tejto inštancii lokálne prebindovaný na navy,
                                                          zdieľaný token témy je --color-text */
  padding: 32px 32px 16px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;  /* Radius/Medium 12, len horné rohy */
}
.zn-artcta__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);                /* 550, Sans Medium */
  font-size: 2rem;                                  /* Size/H4 32 (desktop) */
  line-height: 1.3;
  letter-spacing: -0.01em;                          /* Figma H4 letterSpacing -1% - v em skáluje
                                                          s font-size (desktop 32 → -0.32px, mobil
                                                          24 → -0.24px), pevné -0.32px nechávalo
                                                          na mobile desktopovú hodnotu */
  color: var(--color-white);
}
.zn-artcta__heading-accent {
  font-style: italic;
  font-weight: 580;
  color: var(--color-secondary-light);              /* #8ecae6 */
}
.zn-artcta__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);                      /* Size/Regular 16 */
  line-height: 1.5;
  color: var(--color-white);
}
.zn-artcta__text strong { font-weight: var(--weight-semibold); }  /* 650, Sans SemiBold */
.zn-artcta__btn { width: 100%; }
.zn-artcta__wave {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 659.5 / 46.7146;                    /* intrinsic pomer wave-navy.svg */
  margin-top: -1px;                                 /* subpixelová medzera pri zaokrúhlení šírky */
}

/* ── Autorský box (Figma 746:22100 "Avatar") ───────────────────────────────── */
/* ⚠️ AUDIT 2026-08-22 (Ján/Maroš - "holá biela karta"): box-shadow bol ručne
   prepísaný z Figma effect "small-s" (get_design_context: `shadow-[0px_4px_8px_
   0px_rgba(19,91,108,0.15),0px_2px_4px_0px_rgba(19,91,108,0.05)]`) BEZ `spread`
   zložky (Figma effect má `spread: -2` na oboch vrstvách - get_design_context
   ho do Tailwind `shadow-[...]` skratky nedal, len offset/blur/farbu). Výsledný
   box-shadow bol tak plošší/menej výrazný, než má byť - presne preto na bielej
   `.zn-doc` ploche (background: var(--color-bg), tiež biela) pôsobil ako
   "holá karta" bez ohraničenia. Token `--shadow-sm` (style.css) UŽ JE týmto
   Figma "small-s" efektom - `0 2px 4px -2px rgba(19,91,108,.05), 0 4px 8px
   -2px rgba(19,91,108,.15)`, overené proti `manual.css`/`tools.css` komentárom,
   ktoré ho rovnako dokumentujú - žiadny nový hex, reuse existujúceho tokenu. */
.zn-authorbox {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-block-start: 40px;
  padding: 16px 16px 24px;
  background: var(--color-white);
  border-radius: var(--radius-base);                /* Radius/base 16 */
  box-shadow: var(--shadow-sm);                      /* Figma effect "small-s" */
}
.zn-authorbox__avatar {
  display: block;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.zn-authorbox__body {
  flex: 1 0 0;
  min-width: 0;
}
.zn-authorbox__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);              /* 650, Sans SemiBold */
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
}
.zn-authorbox__bio {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
}
.zn-authorbox__social {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 4px;
  border-radius: 64px;
  background: var(--color-white);
}

/* ── Zdieľanie (Figma 746:21990 "Share") ───────────────────────────────────── */
.zn-share {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-block-start: 24px;
}
.zn-share__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);                  /* 750, Sans Bold */
  font-size: var(--text-lg);                         /* Size/Medium 18 */
  line-height: 1.5;
  color: var(--color-text);
}
.zn-share__list {
  display: flex;
  align-items: center;
  gap: 8px;
}
.zn-share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 4px;
  border: 0;
  border-radius: 64px;
  background: var(--color-white);
  cursor: pointer;
  transition: background var(--transition-base);
}
/* Figma nemá pre tento stav vlastný podklad (statický návrh) - vlastné
   riešenie, rovnaký `--color-bg-medium` hover ako `.zn-blog-related__arrow`
   nižšie (konzistentné s ostatnými okrúhlymi ikonovými tlačidlami v tomto
   súbore). `:focus-visible` netreba dopĺňať - globálne pravidlo v
   components.css (outline `--color-primary`) platí na KAŽDÝ fokusovateľný
   prvok, `.zn-share__btn` naň nemá vlastný override, dedí ho. Špecifickosť
   `[data-zn-copy-link].is-copied` (2 selektory) je vyššia než `:hover`
   (1) - stav "skopírované" pri hoveri neprebije. */
.zn-share__btn:hover { background: var(--color-bg-medium); }
/* Vizuálna spätná väzba "kopírovať link" (assets/js/blog-single.js). Figma
   pre tento stav nemá vlastný podklad (statický návrh, žiadna interakcia) -
   vlastné riešenie: krátke prefarbenie NA PLNÚ `--color-primary` (nie
   `-light`, tá bola pri meraní príliš blízko bielej na spoľahlivé
   všimnutie na 32px kruhu) + jemný scale pulz, aby zmena upútala aj
   periférnym videním. Bez layout shiftu (žiadny text/tooltip), ikona/tvar
   tlačidla sa nemení. */
.zn-share__btn[data-zn-copy-link] {
  transition: background var(--transition-base), transform var(--transition-base);
}
.zn-share__btn[data-zn-copy-link].is-copied {
  background: var(--color-primary);
  transform: scale(1.12);
}

/* ══ Newsletter panel na konci detailu (Figma 1201:105273) ══════════════════
   REUSE views/parts/blog-newsletter.php + blog.css beze zmeny (patria
   archívu /blog/, paralelné okno). Vlnka OSTÁVA (Maroš 2026-08-22 - predošlé
   zadanie ju na základe Figma nodu 1201:105273 skrylo, zrušené) - reálny
   rozdiel oproti archívnej verzii (701:32596) je len farebný token v
   exportnom kóde, ktorý get_screenshot vyvrátil ako zastaraný (viď CONTEXT.md
   changelog) - žiadny iný rozdiel, žiadna úprava tu netreba. ══ */

/* ══ Tablet (≤1199.98px) - Figma preň nemá spec, REUSE rovnaký breakpoint ako
   hero vyššie (a hero-level3): pevná 360px šírka sidebaru vedľa rastúceho
   textu inak v tomto rozsahu skolabuje. ══ */
@media (max-width: 1199.98px) {
  .zn-article__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .zn-article__sidebar { width: 100%; }
}

/* ══ Mobil (≤767.98px) - Figma mobil frame 1201:105292 ═════════════════════
   Sidebar (TOC), autorský box AJ blok Zdieľanie na mobilnom frame-i CHÝBAJÚ -
   over `get_metadata`/`get_screenshot` (views/single-post.php), nie odhad.
   CTA karta OSTÁVA (jediné, čo mobil z pravého stĺpca prevzal, priamo pod
   telom textu, bez sidebar obalu). ══ */
@media (max-width: 767.98px) {
  .zn-article {
    padding-block: var(--space-12);                 /* Div Padding/div-padding-xlarge (mobil) 48 */
    padding-inline: var(--space-4);                 /* Page Padding/padding-global (mobil) 16 -
                                                       rovnako ako .zn-bloghero vyššie; bez tohto
                                                       ostávalo desktopové var(--space-16), ktorého
                                                       clamp minimum je 40px → karta aj telo textu
                                                       boli o 48px užšie než Figma (CTA odstavec
                                                       potom lámal 6 riadkov namiesto 5) */
  }
  .zn-article__inner { gap: 48px; }

  .zn-toc,
  .zn-authorbox,
  .zn-share { display: none; }

  .zn-artcta__card { padding: 24px 24px 16px; gap: 12px; }
  .zn-artcta__heading { font-size: 1.5rem; }        /* Size/H4 (mobil) 24 - get_variable_defs, nie JSX fallback 32 */
}

/* ══ Podobné články (Figma 1201:105287 desktop / 1201:105309 mobil) ════════
   Karta = REUSE `views/parts/blog-card.php` (archív /blog/, NEMENENÝ) - tento
   variant nemá štítok kategórie ani čas čítania (len dátum); partial to
   podmienkou neriadi, preto skryté len v tomto namespace (návrh voliteľných
   argumentov pre partial je v reporte, na potvrdenie druhým oknom).
   Slider = rovnaký mechanizmus ako `blocks/compare-bento` (natívny
   scroll-snap + drag myšou + bodky/šípky z JS, vlastná kópia v
   blog-single.js - konvencia "1 script.js per blok/šablóna" v tejto téme,
   nie zdieľaný modul). ══ */

.zn-blog-related {
  background: var(--color-bg-medium);
  padding-inline: var(--space-16);                 /* Page Padding 64 */
  padding-block: var(--space-24) var(--space-12);   /* Section Padding L 112 / S 48 */
}
.zn-blog-related__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "heading actions" "slider slider";
  column-gap: var(--space-6);                       /* 24 */
  row-gap: var(--space-16);                          /* Container gap 64 */
  align-items: end;                                  /* Figma "Title" row items-end */
}

.zn-blog-related__heading {
  grid-area: heading;
  margin: 0;
  max-width: 768px;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 3rem;                                   /* Size/H2 48 */
  line-height: 1.1;
  color: var(--color-text);
}
.zn-blog-related__heading-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);                /* Mix Regular Italic - rovnaká farba ako
                                                          nadpis (Figma), nie farebný akcent */
}
.zn-blog-related__all { grid-area: actions; justify-self: end; }

/* Tag + čas čítania karta v tomto variante NEMÁ (Figma get_design_context) -
   partial ich vždy vykresľuje, skryté len tu. Oba sú holé <span> bez
   rozlišujúcej triedy vnútri `.zn-blog-card__meta` (stredná bodka aj čas). */
.zn-blog-related .zn-blog-card__tag { display: none; }
.zn-blog-related .zn-blog-card__meta span { display: none; }

.zn-blog-related__slider {
  grid-area: slider;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);                              /* 48 */
  min-width: 0;                                       /* grid item inak nesmrští track pod obsah */
}

.zn-blog-related__track {
  position: relative;      /* `blog-single.js` číta `card.offsetLeft` na zistenie
                               šírky jednej sady kariet (klony pre nekonečný
                               karusel) - BEZ vlastného `position` by track nebol
                               "offsetParent" a `offsetLeft` by liezol až k
                               najbližšiemu POZICOVANÉMU predkovi vyššie v strome
                               (typicky mimo tejto sekcie), takže by vracal
                               absolútnu pozíciu na stránke namiesto pozície
                               vnútri trakcu - namerané: rovnaká karta vrátila
                               INÚ hodnotu na 1440 než na 1920 (posun celej
                               stránky), hoci vnútorná geometria trakcu bola
                               identická (`clientWidth`/`scrollWidth` sedeli).
                               `overflow-anchor:none` NEBOL skutočnou príčinou,
                               len opatrnostné opatrenie navyše (ponechané). */
  display: flex;
  gap: var(--space-8);                               /* 32 */
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-anchor: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.zn-blog-related__track::-webkit-scrollbar { display: none; }
@media (pointer: fine) { .zn-blog-related__track { cursor: grab; } }
.zn-blog-related__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }

.zn-blog-related__slide {
  flex: 0 0 394px;                                   /* Figma karta 394, min 320 */
  min-width: 320px;
  scroll-snap-align: start;
}
.zn-blog-related__slide .zn-blog-card { height: 100%; }

.zn-blog-related__nav { display: flex; align-items: center; justify-content: space-between; }
.zn-blog-related__dots { display: flex; gap: 8px; }
.zn-blog-related__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--color-text); opacity: .2; cursor: pointer; }
.zn-blog-related__dots button.is-active { opacity: 1; }
.zn-blog-related__arrows { display: flex; gap: var(--space-4); }  /* 16 */
.zn-blog-related__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
}
.zn-blog-related__arrow:hover { background: var(--color-bg-medium); }
/* Šípky NEmajú disabled stav (Maroš 2026-08-22 - listovanie dokola,
   viď blog-single.js) - žiadne :disabled pravidlo, na rozdiel od
   `compare-bento`/`customers`, ktoré ostávajú pri hranových šípkach. */

/* ══ Tablet (≤1199.98px) - Figma preň nemá spec, REUSE konvenciu ostatných
   blokov (napr. compare-bento) ══ */
@media (max-width: 1199.98px) {
  .zn-blog-related { padding-inline: var(--space-8); }  /* 32 */
}

/* ══ Mobil (≤767.98px) - Figma "Section / Blog 1" 1201:105309 ══════════════
   Nadpis 38 (get_variable_defs na 1201:105309 - JSX fallback nekonzistentne
   ukazoval 38 na prvom span-e a 48 na druhom, klasická "Variable mode"
   pasca z interných poznámok). Button "Všetky články" je vo Figme AŽ POD sliderom,
   zarovnaný k pravému okraju (x=231, w=130, kontajner 361 → presne na
   hranu) - rieši `grid-template-areas` prerátanie nižšie, nie duplicitný
   markup. pt = 64 (Figma mobil-mode literál, nie fluid clamp - `--space-16`
   by pri 393px klesol na svoje minimum ~40px). ══ */
@media (max-width: 767.98px) {
  .zn-blog-related {
    padding-inline: var(--space-4);                  /* 16 */
    padding-block: 64px var(--space-8);              /* pt 64 literál / pb 32 = --space-8 (fixný, sedí presne) */
  }
  .zn-blog-related__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "heading" "slider" "actions";
    row-gap: var(--space-12);                        /* Container gap mobil 48 */
  }
  .zn-blog-related__heading { font-size: 2.375rem; }  /* Size/H2 mobil 38 */
  .zn-blog-related__all { justify-self: end; }
  .zn-blog-related__slide { flex-basis: 320px; min-width: 320px; }
}