/* Pravidlá, ktoré potrebuje statická stránka aj stránka z CMS:
   hľadanie, pätička a dni programu. Zvyšok (podcasty, relácie) je
   v podcasty.css a načítava sa LEN v CMS — na statickej homepage
   prepisoval triedy .pod-ep/.pe-*, ktoré si tam kreslí sama. */

/* ── tlačidlo hľadania v hlavičke ─────────────────────────────
   Nemalo žiadne pravidlá, takže to bolo holé <button> s SVG, ktoré
   sedelo na účiarí textu a pôsobilo posunuté. Teraz je to kruh
   zarovnaný na stred vedľa tlačidla Naživo. */
.nav-right .fs-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  padding: 0; border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  cursor: pointer; line-height: 0;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s var(--ease-spring);
}
.nav-right .fs-trigger:hover {
  border-color: var(--magenta); color: var(--magenta); transform: translateY(-1px);
}
.nav-right .fs-trigger:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
.reduced .nav-right .fs-trigger:hover { transform: none; }
.nav-right .fs-trigger svg { display: block; }
/* text "Hľadať" vedľa ikony v hlavičke miesto nemá — ikona stačí */
.nav-right .fs-trigger .fs-trigger-t { display: none; }
@media (max-width: 560px) { .nav-right .fs-trigger { width: 36px; height: 36px; } }

/* ── riadok s poľom ── */
.fs-bar {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 10px 34px rgba(0,0,0,.07);
}
.fs-ic { display: inline-flex; flex: none; color: var(--ink-soft); line-height: 0; }
.fs-input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none;
  color: var(--ink);
  font: 500 clamp(16px, 2.2vw, 19px)/1.3 var(--font-body);
}
.fs-input::placeholder { color: var(--ink-soft); opacity: .75; }
.fs-close {
  flex: none; width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; line-height: 0;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  transition: border-color .2s ease, color .2s ease;
}
.fs-close:hover { border-color: var(--magenta); color: var(--magenta); }

/* ── obsah pod poľom ── */
.fs-body, .fs-results {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: clamp(16px, 3vw, 26px) 2px clamp(24px, 6vw, 48px);
}
/* skript prepína obsah atribútom hidden, nie triedou */
.fs-body[hidden], .fs-results[hidden] { display: none; }

.fs-block { margin-bottom: 26px; }
.fs-blockhead {
  display: block; margin-bottom: 10px;
  font: 600 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.fs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-chip {
  display: inline-flex; align-items: center;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  text-decoration: none; cursor: pointer;
  font: 500 13.5px/1 var(--font-body);
  transition: border-color .2s ease, color .2s ease, transform .2s var(--ease-out);
}
.fs-chip:hover { border-color: var(--magenta); color: var(--magenta); transform: translateY(-1px); }
.reduced .fs-chip:hover { transform: none; }

/* ── výsledok ──
   Poradie v HTML je kind → titulok → dátum. Bez presného umiestnenia si
   ich mriežka rozhádže: štítok raz vľavo, raz vpravo. Preto natvrdo. */
.fs-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "titulok stitok" "datum datum";
  gap: 4px 14px; align-items: baseline;
  padding: 14px 4px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background .18s ease;
}
.fs-row:hover, .fs-row.is-sel { background: var(--magenta-soft); }
.fs-title { grid-area: titulok; font: 600 clamp(15px, 1.8vw, 17px)/1.34 var(--font-display); }
.fs-row:hover .fs-title {
  text-decoration: underline; text-decoration-color: var(--magenta);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.fs-title mark { background: var(--magenta-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.fs-kind {
  grid-area: stitok; justify-self: end;
  font: 600 10.5px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--magenta); white-space: nowrap;
}
.fs-date { grid-area: datum; font: 500 12.5px/1 var(--font-body); color: var(--ink-soft); }
.fs-rmeta {
  margin: 0 0 6px; padding: 0 4px;
  font: 500 12.5px/1.4 var(--font-body); color: var(--ink-soft);
}
.fs-none { padding: 26px 4px; color: var(--ink-soft); font: 400 15px/1.55 var(--font-body); }

@media (max-width: 560px) {
  .fs-bar { padding: 10px 12px; gap: 9px; }
  .fs-row { padding: 12px 2px; }
}

/* ── náhľad pred zadaním dopytu ──
   Skupiny článkov, relácií a epizód. Bez pravidiel sa zlievali do jedného
   odseku aj s dátumami nalepenými na titulky. */
.fs-group { margin-bottom: 26px; }
.fs-group h4 {
  margin: 0 0 8px;
  font: 600 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.fs-item {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: baseline;
  padding: 11px 4px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background .18s ease;
}
.fs-item:last-child { border-bottom: 0; }
.fs-item:hover, .fs-item.is-sel { background: var(--magenta-soft); }
.fs-item-t { font: 500 15px/1.34 var(--font-body); }
.fs-item:hover .fs-item-t {
  text-decoration: underline; text-decoration-color: var(--magenta);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.fs-item-m { font: 500 12.5px/1 var(--font-body); color: var(--ink-soft); white-space: nowrap; }

/* ── kostra, kým sa načíta ponuka ──
   Panel bol prázdny a obsah doňho naskočil naraz. */
.fs-kostra { display: block; }
.fs-kostra .fs-group h4 {
  width: 120px; height: 11px; border-radius: 4px;
  background: var(--line); color: transparent;
}
.fs-kostra .fs-item { pointer-events: none; }
.fs-kostra .fs-item-t {
  display: block; height: 1.05em; border-radius: 5px;
  background: linear-gradient(90deg, var(--line) 25%, color-mix(in srgb, var(--line) 45%, transparent) 37%, var(--line) 63%);
  background-size: 320% 100%;
  animation: fs-plyn 1.25s ease-in-out infinite;
}
.fs-kostra .fs-item:nth-child(2) .fs-item-t { width: 88%; }
.fs-kostra .fs-item:nth-child(3) .fs-item-t { width: 72%; }
.fs-kostra .fs-item:nth-child(4) .fs-item-t { width: 80%; }
.fs-kostra .fs-item-m { width: 42px; height: .9em; border-radius: 4px; background: var(--line); color: transparent; }
@keyframes fs-plyn { from { background-position: 100% 0 } to { background-position: 0 0 } }
.reduced .fs-kostra .fs-item-t { animation: none; }

/* ── dni programu na mobile ──
   Sedem dní má na 375 px šírku 644 px, ale lišta končila presne na hrane
   karty, takže štvrtok–nedeľa boli neviditeľné bez akéhokoľvek náznaku,
   že sa dá posúvať. Lišta preto presahuje cez okraj karty a posledný
   viditeľný deň sa orezáva — to je ten náznak. Doplnené tieňovanie vpravo. */
@media (max-width: 720px) {
  .pr-tabs {
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  }
  .pr-tab { scroll-snap-align: start; }
  /* aktívny deň sa po načítaní posunie do zorného poľa (rieši app.js) */
}


/* ── Hľadanie cez celú obrazovku: UKOTVENIE panela. Vzhľad lišty, čipov
   a výsledkov je vyššie v tomto súbore; tu je len to, čo mu chýbalo:
   fixná pozícia s kruhovým otváraním a zámok skrolovania. Bez tohto
   panel ležal ako obyčajný blok na konci stránky a klik na lupu
   čitateľa doskroloval dole. ───────────────────────────────────── */
.fs{position:fixed;inset:0;z-index:120;background:var(--paper,#FBF7F2);
    clip-path:circle(0px at var(--fx,90%) var(--fy,40px));
    transition:clip-path .62s cubic-bezier(.16,1,.3,1);overflow-y:auto;overscroll-behavior:contain}
.fs.is-open{clip-path:circle(150% at var(--fx,90%) var(--fy,40px))}
.fs-inner{max-width:var(--wrap,1160px);margin:0 auto;padding:34px 20px 90px}
body.fs-lock{overflow:hidden}
@media(prefers-reduced-motion:reduce){
    .fs{transition:none}
    .fs-block,.fs-results{transition:none;opacity:1;transform:none}
  }