/* ── č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. */
.art-img { display: block; margin: 26px 0; }
.art-img img { width: 100%; height: auto; display: block; border-radius: 18px; }

/* ── 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 } }
.news-media, .art-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, .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; }


/* ── 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; }
/* prvá fotka väčšia, keď ich je dosť */
.gal-vyrazna .gal-fotka:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 860px) {
  .gal-mriezka { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gal-vyrazna .gal-fotka:first-child { grid-column: span 2; grid-row: auto; 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; }
/* 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; }
}
.lb-zdroj { color: rgba(255,255,255,.6); }

/* 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);
}

/* ── 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; } }