/* ── článok z CMS ─────────────────────────────────────────────
   Vlastné len to, čo v3 nemá; zvyšok berie z /v3/styles.css. */
.art { max-width: 760px; margin: 0 auto; }
.art-back { font: 600 14px/1 var(--font-body, system-ui); color: var(--ink-soft, #6A5560); text-decoration: none; }
.art-back:hover { color: var(--magenta, #E60469); }
.art-hero { margin: 26px 0 32px; border-radius: var(--r-lg, 20px); overflow: hidden; }
.art-hero img { width: 100%; display: block; }
.art-body { font: 400 18px/1.72 var(--font-body, system-ui); color: var(--ink, #1B0E15); }
.art-body p { margin: 0 0 22px; }
.art-body h2, .art-body h3 { margin: 38px 0 14px; font-family: var(--font-display, system-ui); letter-spacing: -.015em; }
.art-body a { color: var(--magenta, #E60469); text-decoration: underline; text-underline-offset: 3px; }
.art-body ul, .art-body ol { margin: 0 0 22px; padding-left: 22px; }
.art-body li { margin: 6px 0; }
.art-body blockquote { margin: 26px 0; padding-left: 20px; border-left: 2px solid var(--line, rgba(27,14,21,.14)); color: var(--ink-soft, #6A5560); }
@media (max-width: 640px) { .art-body { font-size: 16.5px; } }

/* Obrázok, ktorý sa v archíve previedol na odkaz — vykresľuje sa ako obrázok.
   Text odkazu je popis fotky a patrí viditeľne pod ňu, nie iba do alt. */
.art-img { display: block; margin: 26px 0; }
.art-img img { width: 100%; height: auto; display: block; border-radius: 18px; }
.art-img figcaption, .gal-popis {
  font: 400 13.5px/1.5 var(--font-body, system-ui, sans-serif);
  color: var(--ink-soft, #6A5560);
  text-align: left; margin-top: 6px;
}

/* ── epizóda pod článkom ─────────────────────────────────────
   Článok o podcaste má skončiť zvukom, nie textom. Karta drží ten
   istý jazyk ako novinky: pastel, kruhová maska, šípka pri hoveri. */
.ep-karta{margin:52px 0 8px;padding:clamp(16px,2vw,22px);position:relative}
.ep-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
@media (min-width:640px){.ep-grid{grid-template-columns:132px 1fr;gap:24px}}
.ep-art{display:block;width:112px;border-radius:20px;overflow:hidden;background:var(--line)}
@media (min-width:640px){.ep-art{width:132px}}
.ep-art img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  transition:transform .5s var(--ease-out)}
.ep-karta:hover .ep-art img{transform:scale(1.04)}
.reduced .ep-karta:hover .ep-art img{transform:none}

.ep-body{display:flex;flex-direction:column;gap:10px;min-width:0}
.ep-dot{opacity:.62;letter-spacing:0}
.ep-title{margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(19px,2vw,25px);line-height:1.18;letter-spacing:-.012em}

.ep-play{align-self:flex-start;margin-top:4px;display:inline-flex;align-items:center;gap:10px;
  padding:11px 20px 11px 13px;border:0;border-radius:999px;cursor:pointer;
  background:var(--ink);color:var(--paper);
  font:600 14.5px/1 var(--font-body);letter-spacing:.005em;
  transition:transform .3s var(--ease-spring),background .3s ease,box-shadow .3s ease}
.ep-play:hover{background:var(--magenta);color:var(--on-magenta);
  transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.reduced .ep-play:hover{transform:none}
.ep-play-ic{width:26px;height:26px;flex:none;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16)}

.ep-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line)}
.ep-link{display:inline-flex;align-items:center;gap:6px;
  padding:8px 15px;border-radius:999px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  font:500 13px/1 var(--font-body);white-space:nowrap;
  transition:border-color .25s ease,color .25s ease,transform .25s var(--ease-out)}
.ep-link:hover{transform:translateY(-1px);border-color:currentColor}
.ep-all:hover{color:var(--magenta)}
.ep-spotify:hover{color:#1db954}
.ep-apple:hover{color:#a139f2}
.ep-youtube:hover{color:#ff0033}
.reduced .ep-link:hover{transform:none}
@media (max-width:560px){.ep-karta{margin-top:38px}.ep-links{gap:7px}}

/* ── načítavanie obrázkov ─────────────────────────────────────
   Skutočný problém nebolo pomalé vykreslenie stránky, ale obrázky,
   ktoré dobiehajú po nej. Miesto si preto drží pomer strán a kým
   obrázok príde, pulzuje na ňom jemný prechod — nič nepreskakuje.
   Streamovaná kostra celej stránky sa cez našu proxy nedokončila
   a nechávala skutočný obsah skrytý, preto tu nie je. */
@keyframes obr-vlna { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
/* .art-img pulzuje na obrázku, nie na celej figure — pod popisom by
   prechod presvital donekonečna */
.news-media, .art-img img, .ps-art, .ep-art, .news-thumb .masked, .art-hero .masked {
  background: linear-gradient(90deg,
    var(--line, rgba(0,0,0,.07)) 25%,
    rgba(255,255,255,.5) 37%,
    var(--line, rgba(0,0,0,.07)) 63%);
  background-size: 200% 100%;
  animation: obr-vlna 1.5s ease-in-out infinite;
}
.reduced .news-media, .reduced .art-img img, .reduced .ps-art,
.reduced .ep-art, .reduced .news-thumb .masked { animation: none }
/* keď je obrázok načítaný, pulzovanie pod ním netreba */
.news-media img, .art-img img, .ps-art img, .ep-art img { position: relative; z-index: 1 }
/* miesto si drží pomer, aby text pod obrázkom neposkakoval */
.art-img { min-height: 0; aspect-ratio: auto }
.art-img img { aspect-ratio: 16/9; object-fit: cover }

/* video v texte článku (YouTube embed z odkazu) */
.art-video { display: block; margin: 26px 0; }
.art-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 18px; display: block; }
/* vložený obsah zo sociálnych sietí a prehrávačov: každý poskytovateľ má
   vlastný pomer strán, iframe je bez rámika, zaoblený ako fotky */
.art-embed { display: block; margin: 26px auto; max-width: 100%; }
.art-embed iframe { display: block; width: 100%; border: 0; border-radius: 18px; background: rgba(20,16,16,.04); }
.art-embed--instagram { max-width: 540px; container-type: inline-size; }
/* Kým Instagram nenahlási skutočnú výšku, držíme miesto odhadom: štvorcová
   fotka (teda šírka rámu) a k tomu hlavička s pätičkou príspevku, spolu asi
   540 px. Namerané: 540 → 1097 a 1079, 380 → 915, 350 → 896 a 878.
   Prvý riadok je poistka pre prehliadače bez jednotky cqw. */
.art-embed--instagram iframe { aspect-ratio: 540 / 880; min-height: 640px; }
@supports (height: 1cqw) {
  .art-embed--instagram iframe { height: calc(100cqw + 540px); aspect-ratio: auto; min-height: 0; }
}
/* Skutočnú výšku nastaví skript z hlavičky, keď príde správa MEASURE. */
.art-embed--instagram iframe[data-vyska] { aspect-ratio: auto; min-height: 0; }
.art-embed--spotify iframe { height: 352px; }
.art-embed--spotify-nizky iframe { height: 152px; }
.art-embed--tiktok { max-width: 340px; }
/* TikTok má výšku prehrávača pevnú, so šírkou rámu sa nemení: namerané 738 px
   obsahu pri šírkach rámu 280, 325, 340 aj 500 px. Pomer strán preto výšku
   určoval zle. Pri úzkom stĺpci (okno 360 px dá rám 320 px) vyšlo 729 px a
   spodný riadok s hudbou sa orezal, pri 1280 px zasa 774 px, teda zbytočný pás
   dole. Namerané na 16 verejných videách: 721, 739, 743 a 757 px, preto odhad
   760 px. Presnú výšku dorovná skript z hlavičky, keď TikTok pošle správu. */
.art-embed--tiktok iframe { height: 760px; }
.art-embed--facebook { max-width: 500px; container-type: inline-size; }
/* Facebook na rozdiel od Instagramu skutočnú výšku nikdy nepošle (namerané:
   z pôvodu facebook.com neprišla ani jedna správa window.message, oEmbed vracia
   len šírku), preto tu ostáva odhad natrvalo. Médium sa škáluje so šírkou rámu
   a plugin ho zastropuje asi na 500 px, k tomu hlavička, skrátený text a lišta
   reakcií, teda asi 290 px. Namerané (príspevok s fotkou na výšku):
   500 → 698, 460 → 718, 420 → 718, 350 → 655, 300 → 612, 280 → 626.
   Rám je priehľadný, takže rezerva pod kartou splynie s papierom článku.
   Prvý riadok je poistka pre prehliadače bez jednotky cqw. */
.art-embed--facebook iframe { aspect-ratio: 500 / 790; min-height: 680px; background: transparent; }
@supports (height: 1cqw) {
  .art-embed--facebook iframe { height: calc(min(125cqw, 500px) + 290px); aspect-ratio: auto; min-height: 0; }
}
/* Video a reel majú výšku presnú: v adrese pluginu je parameter height, plugin
   ten pomer dodrží, škáluje si ho na skutočnú šírku rámu a video doň vloží celé
   (ak má iný pomer, pribudnú pruhy, ale nič sa neoreže). Pomery tu musia sedieť
   s parametrami width a height v ClanokText.tsx. */
.art-embed--facebook-video iframe { aspect-ratio: 500 / 281; height: auto; min-height: 0;
  background: rgba(20,16,16,.04); }
.art-embed--facebook-reel { max-width: 340px; }
.art-embed--facebook-reel iframe { aspect-ratio: 340 / 604; height: auto; min-height: 0;
  background: rgba(20,16,16,.04); }
.art-embed--iframe iframe { aspect-ratio: 16 / 9; }


/* ── Fotogaléria (modul Galeria) ─────────────────────────────── */
.gal { margin-top: 10px; }
.gal-mriezka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gal-fotka {
  display: block; padding: 0; margin: 0; border: 1px solid rgba(20,16,16,.08);
  border-radius: 14px; overflow: hidden; background: rgba(20,16,16,.04);
  cursor: zoom-in; aspect-ratio: 4 / 3;
}
.gal-fotka:hover, .gal-fotka:focus-visible { border-color: rgba(20,16,16,.34); }
.gal-fotka:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.gal-fotka img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* bunkou mriežky je figure (fotka + viditeľný popis pod ňou) */
.gal-bunka { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.gal-bunka .gal-fotka { width: 100%; }
.gal-zdroj { display: block; font-size: 12px; opacity: .85; }
/* prvá fotka väčšia, keď ich je dosť */
.gal-vyrazna .gal-bunka:first-child { grid-column: span 2; grid-row: span 2; }
/* rozloženie zvolené redaktorom pri galérii v texte článku */
.gal-mriezka--mriezka4 { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gal-mriezka--stlpec { grid-template-columns: 1fr; gap: 18px; }
.gal-mriezka--stlpec .gal-fotka { aspect-ratio: auto; }
.gal-mriezka--stlpec .gal-fotka img { height: auto; }
/* galéria vložená do textu: nadpis nad mriežkou, odsadenie ako ostatné figúry */
.art-galeria { margin: 26px 0; }
.art-galeria-nazov {
  font: 600 15px/1.4 var(--font-body, system-ui, sans-serif);
  color: var(--ink, #1B0E15); margin-bottom: 10px;
}
@media (max-width: 860px) {
  .gal-mriezka { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gal-mriezka--mriezka4 { grid-template-columns: repeat(2, 1fr); }
  .gal-mriezka--stlpec { grid-template-columns: 1fr; }
  .gal-vyrazna .gal-bunka:first-child { grid-column: span 2; grid-row: auto; }
  .gal-vyrazna .gal-bunka:first-child .gal-fotka { aspect-ratio: 16 / 10; }
}

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center;
  justify-content: center; background: rgba(16, 13, 13, .93);
  animation: lb-zjav .18s ease-out;
}
@keyframes lb-zjav { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .lb { animation: none } }
.lb-telo { margin: 0; max-width: min(1200px, 94vw); text-align: center; }
.lb-telo img {
  max-width: min(1200px, 94vw); max-height: 82vh; width: auto; height: auto;
  border-radius: 12px; display: block; margin: 0 auto;
}
.lb-popis {
  display: flex; justify-content: center; gap: 14px; margin-top: 12px;
  font: 500 14px/1.5 var(--font-body, system-ui, sans-serif); color: rgba(255,255,255,.82);
}
.lb-pocet { color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }
.lb-zavri, .lb-sipka {
  position: fixed; display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
  font-size: 26px; line-height: 1; padding: 0;
}
.lb-zavri:hover, .lb-sipka:hover { background: rgba(255,255,255,.2); }
.lb-zavri { top: 18px; right: 18px; }
.lb-sipka { top: 50%; transform: translateY(-50%); }
.lb-vlavo { left: 16px; }
.lb-vpravo { right: 16px; }
@media (max-width: 640px) {
  .lb-sipka { top: auto; bottom: 16px; transform: none; }
  .lb-vlavo { left: 24vw; } .lb-vpravo { right: 24vw; }
  .lb-telo { padding-bottom: 78px; }   /* miesto pre šípky pod popisom */
  .lb-telo img { max-height: 66vh; }
}

/* stránka galérie: mriežka smie byť širšia než stĺpec textu */
.art--galeria { max-width: 1080px; }
.art--galeria .section-head { max-width: none; }

/* ── Obrázok v texte článku (vkladá redaktor) ─────────────── */
.art-foto { margin: 26px 0; }
.art-foto img { display: block; width: 100%; height: auto; border-radius: 12px; }
.art-foto figcaption {
  font: 400 14px/1.5 var(--font-body, system-ui, sans-serif);
  color: #6b6b6b; margin-top: 8px;
}
.art-foto-zdroj { display: block; font-size: 12.5px; opacity: .8; margin-top: 2px; }
.art-foto--vlavo, .art-foto--vpravo { max-width: 46%; }
.art-foto--vlavo  { float: left;  margin: 6px 26px 18px 0; }
.art-foto--vpravo { float: right; margin: 6px 0 18px 26px; }
/* redaktorom zvolená veľkosť — platí len pre fotku cez celú šírku,
   menšia sa drží v strede stĺpca */
.art-foto--v-stredna { max-width: 800px; margin-inline: auto; }
.art-foto--v-mala { max-width: 480px; margin-inline: auto; }
/* nadpis ani ďalší blok sa nesmie zaseknúť vedľa obtekanej fotky */
.art-body h2, .art-body h3 { clear: both; }
.art-body::after { content: ""; display: block; clear: both; }
@media (max-width: 640px) {
  /* na mobile je na obtekanie primálo miesta — fotka ide cez celú šírku */
  .art-foto--vlavo, .art-foto--vpravo { float: none; max-width: 100%; margin: 22px 0; }
}
/* Fotka na výšku sa nezastriháva na 16:9: celá, v rozumnej výške, v strede
   stĺpca. Triedu dáva ClanokText (rozmery z knižnice, pri archívnom obrázku
   až po načítaní v prehliadači). */
.art-img--vyska img {
  aspect-ratio: auto; object-fit: contain;
  width: auto; max-width: 100%; max-height: min(82vh, 860px);
  margin: 0 auto; display: block;
  background: var(--line, rgba(0,0,0,.06));
}
.lb-zdroj { color: rgba(255,255,255,.6); }

/* PDF priložené v texte článku — decentný odkaz s rámikom v jazyku
   webu: pri hoveri sa mení len farba a rámik, nič nenadskakuje */
.art-subor { margin: 26px 0; }
.art-subor a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border: 1px solid var(--line, rgba(27,14,21,.14));
  border-radius: 14px; background: var(--surface, rgba(255,255,255,.55));
  color: var(--ink, #1B0E15); text-decoration: none;
  font: 600 15px/1.4 var(--font-body, system-ui, sans-serif);
  transition: border-color .25s ease, color .25s ease;
}
.art-subor a:hover, .art-subor a:focus-visible {
  border-color: currentColor; color: var(--magenta, #E60469);
}

/* pás nad náhľadom nezverejneného článku */
.nahlad-pas {
  background: #FFF3D6; border: 1px solid #E8D08A; color: #5A4408;
  border-radius: 8px; padding: 12px 16px; margin-bottom: 8px;
  font: 400 14.5px/1.5 var(--font-body, system-ui, sans-serif);
}

/* ── Pás kategórií (stránka kategórie) ───────────────────────
   Rovnaké chipy ako na statickom webe: zalamovaný rad, aktívna
   kategória plná ink, hover len mení rámik a farbu. */
.cat-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.cat-nav a {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line, rgba(0,0,0,.12));
  font: 600 14px/1 var(--font-body, system-ui, sans-serif);
  text-decoration: none; color: inherit; background: transparent;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.cat-nav a:hover { border-color: currentColor; color: var(--magenta, #E60469); }
.cat-nav a[aria-current="page"], .cat-nav a[aria-current="page"]:hover {
  background: var(--ink, #111); color: var(--paper, #fff); border-color: transparent;
}

/* ── Reklamné bannery (formáty z cenníka) ────────────────────── */
.bnr-slot { display: flex; justify-content: center; margin: 26px 0; }
.bnr { display: inline-block; width: 100%; }
.bnr-stitok {
  display: block; text-align: center;
  font: 600 10px/1 var(--font-body, system-ui, sans-serif);
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(20,16,16,.38); margin-bottom: 6px;
}
.bnr img { display: block; width: 100%; height: auto; border-radius: 8px; }
.bnr a { display: block; }
/* desktopový formát na mobile zmizne a naopak */
@media (max-width: 767px) { .bnr--desktop { display: none; } }
@media (min-width: 768px) { .bnr--mobil { display: none; } }