/* Fun Rádio v3 — safety nets for REAL content.
   The design was authored with short demo strings; archived episodes and articles carry
   much longer titles. These rules keep the original look but stop long text from clipping. */

/* dock + fullscreen player titles: wrap to 2 lines instead of nowrap-clipping.
   The meta column is a flex child, so it needs min-width:0 or it collapses to 0px. */
.player-top .pt-meta,
.pt-meta {
  min-width: 0;
  flex: 1 1 auto;
}
/* Label and title are two inline spans in a row; space them in CSS rather than relying
   on incidental whitespace in the markup (contest rows are generated without it). */
.news-row .microlabel { margin-right: 10px; }

/* the site sets nowrap via `.player-top .pt-meta strong` — match that specificity */
.player-top .pt-meta strong.player-title,
.player .player-title,
.player-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  max-width: min(62vw, 620px);
}
.dock-meta strong {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

/* the art tile inside the fullscreen player: keep the image covering, never letterboxed */
.player-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* podcast episode cards: long guest names shouldn't blow up the meta row */
.pe-meta { flex-wrap: wrap; row-gap: 6px; }

/* nav dropdown: make the section itself reachable, not just the individual shows */
/* The divider used to sit on the link itself, so its hover fill ran straight into the
   rule. Draw it in the gap below instead — equal breathing room above and below. */
.nav-drop .nav-drop-all {
  position: relative;
  font-weight: 700;
  color: var(--magenta, #e6047e);
  margin-bottom: 15px;
}
.nav-drop .nav-drop-all::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -8px;
  height: 1px;
  background: var(--line, #ece3e7);
}

/* ── prehrávač: posúvanie epizódy + návrat k živému vysielaniu ──────────
   3px lišta sa nedá trafiť prstom, preto neviditeľná plocha okolo nej
   (padding + background-clip), plus úchyt na konci prehratej časti. */
.player-progress:not(.live) {
  cursor: pointer;
  padding: 9px 0;
  height: 3px;
  box-sizing: content-box;
  background: transparent;
  overflow: visible;
  touch-action: none;
}
.player-progress:not(.live)::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 9px;
  height: 3px;
  border-radius: 3px;
  background: var(--line, rgba(27,14,21,.14));
}
.player-progress:not(.live) .bar {
  inset: 9px auto 9px 0;
  height: 3px;
}
.player-progress:not(.live) .bar::after {
  content: '';
  position: absolute;
  right: -7px; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--magenta, #E60469);
  box-shadow: 0 0 0 4px var(--paper, #FBF7F2);
  opacity: 0;
  transition: opacity .16s ease;
}
.player-progress:not(.live):hover .bar::after,
.player-progress:not(.live):focus-visible .bar::after,
.player-progress.scrubbing .bar::after { opacity: 1; }
.player-progress.scrubbing .bar { transition: none; }
.player-progress:focus-visible { outline: 2px solid var(--magenta, #E60469); outline-offset: 6px; }

/* návrat na živé vysielanie — v prehrávači aj v doku */
.back-live {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px;
  border: 1px solid var(--line, rgba(27,14,21,.16));
  background: transparent; cursor: pointer;
  font: 600 14.5px/1 var(--font-body, system-ui);
  color: var(--ink, #1B0E15);
  transition: border-color .16s ease, color .16s ease;
}
.back-live:hover { border-color: var(--magenta, #E60469); color: var(--magenta, #E60469); }
.dock-live {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px 0 11px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.07); cursor: pointer;
  color: #fff;
  font: 600 12.5px/1 var(--font-body, system-ui);
  letter-spacing: .01em; white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.dock-live:hover {
  background: var(--magenta, #E60469);
  border-color: transparent;
  transform: translateY(-1px);
}
.dock-live svg { flex: none; opacity: .95 }
/* vysielacia vlna jemne pulzuje — signalizuje "beží to teraz" */
@keyframes dock-live-pulz { 0%,100% { opacity: .55 } 50% { opacity: 1 } }
.dock-live svg path { animation: dock-live-pulz 2.4s ease-in-out infinite }
.dock-live:hover svg path { animation: none; opacity: 1 }
.reduced .dock-live svg path { animation: none }

/* dok je pevne široký pruh — podnadpis sa bez tohto zalomí do stĺpca a dok "nafúkne" */
.dock-meta { min-width: 0; }
.dock-meta span {
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bl-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--magenta, #E60469);
  box-shadow: 0 0 0 3px rgba(230,4,105,.22);
}
.back-live[hidden], .dock-live[hidden] { display: none; }
/* na úzkom doku ustúpi ekvalizér, nie zrozumiteľnosť tlačidla */
@media (max-width: 720px) { .dock:has(.dock-live:not([hidden])) .dock-eq { display: none } }
@media (max-width: 430px) { .dock-live .bl-t { display: none } .dock-live { padding: 0 9px; gap: 0 } }