/* ===========================================================================
   Телепрограмма (/tv)

   Mobile-first и не «та же сетка, но уже»: на телефоне канал — это карточка
   со списком передач, на широком экране карточки выстраиваются в колонки.
   Состав каналов одинаков везде, различается плотность: лишние передачи
   скрыты классом .is-extra, но лежат в разметке — скрытое CSS-ом
   индексируется, отсутствующее нет.
   =========================================================================== */
.tv-wrap { padding-top: 20px; padding-bottom: 56px; }
.tv-wrap h1 { font-size: 28px; line-height: 1.15; margin: 0 0 10px; }
.tv-lead { color: var(--muted); margin: 0 0 20px; max-width: 720px; }
.tv-empty { color: var(--muted); }

/* --- Рекламное место -------------------------------------------------------
   Место резервируется из атрибутов width/height картинки (см. bannerSlot в
   render.mjs), а не фиксированной высотой контейнера: браузер считает из них
   пропорцию и держит место при любой ширине экрана, пока картинка грузится.
   Фиксированная высота так не умеет — на планшете она врала.
   Размеры креативов — IAB: 970×250 на широком экране, 320×100 на телефоне. */
.tv-banner { padding: 14px 0 0; }
.tv-banner > .wrap { display: flex; justify-content: center; }
.tv-banner img { display: block; max-width: 100%; height: auto; border-radius: 12px; }

/* --- Строка меню раздела ---------------------------------------------------
   Липкая: при прокрутке остаётся сверху, а лента дат встаёт вплотную под ней
   (её top задаёт --tv-bar-h, который меряет скрипт — высота строки зависит от
   ширины экрана: на телефоне поиск переносится на вторую строку). */
.tv-bar { position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--line); background: var(--bg-card); margin-top: 14px; }
/* padding-block, а не padding: 10px 0 — сокращённая запись обнуляет боковые
   отступы контейнера .wrap, и на телефоне строка меню прилипала к краям
   экрана: «RAZU TV» уезжало за левый край, «Профиль» за правый. */
.tv-bar-row { display: flex; align-items: center; gap: 10px 14px;
  flex-wrap: wrap; padding-block: 10px; }
.tv-brand { font-weight: 800; letter-spacing: .02em; color: var(--ink);
  text-decoration: none; white-space: nowrap; }
.tv-bar-link { color: var(--muted); text-decoration: none; font-size: 14px; white-space: nowrap; }
.tv-bar-link:hover { color: var(--ink); }
.tv-search { position: relative; display: flex; gap: 6px; flex: 1 1 240px; min-width: 190px; order: 3; }
.tv-search input {
  flex: 1; min-width: 0; padding: 9px 12px; font: inherit; font-size: 14px;
  color: var(--ink); background: var(--bg-card-2);
  border: 1px solid var(--line-strong); border-radius: 10px;
}
.tv-search input::placeholder { color: var(--muted); }
.tv-search button {
  padding: 9px 14px; font: inherit; font-size: 14px; cursor: pointer;
  color: var(--ink); background: transparent;
  border: 1px solid var(--line-strong); border-radius: 10px; white-space: nowrap;
}
.tv-search button:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.tv-sugg {
  position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 40;
  background: var(--bg-card); border: 1px solid var(--line-strong);
  border-radius: 12px; overflow: hidden auto; max-height: 60vh;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.tv-sugg-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 12px; font-size: 14px; color: var(--ink); text-decoration: none;
  border-top: 1px solid var(--line);
}
.tv-sugg-row:first-child { border-top: 0; }
.tv-sugg-row:hover { background: var(--bg-card-2); }
.tv-sugg-row span { color: var(--muted); font-size: 12px; flex: none; }
.tv-bar-login { margin-inline-start: auto; font-size: 14px; color: var(--ink);
  text-decoration: none; white-space: nowrap; }
.tv-bar-login:hover { color: var(--brand-accent); }
@media (min-width: 768px) { .tv-search { order: 0; } }

/* --- Разделы и категории --------------------------------------------------- */
.tv-sections { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.tv-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--ink); text-decoration: none; font-size: 14px;
}
.tv-chip b { color: var(--muted); font-weight: 500; }
.tv-chip:hover { border-color: var(--brand-accent); }
.tv-chip.is-cur { border-color: var(--brand-accent); color: var(--brand-accent); }

.tv-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.tv-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.tv-card-head { display: flex; align-items: center; gap: 10px; }
.tv-card-link { display: flex; align-items: center; gap: 10px; color: var(--ink);
  text-decoration: none; min-width: 0; }
.tv-card-name { font-weight: 600; }


/* Окантовка логотипа канала.
   Логотипы приходят НЕПРОЗРАЧНЫМИ, со своим фоном, и фон этот бывает любой:
   у «2х2» чёрный квадрат, у большинства белый. Без границы чёрный логотип
   сливается с тёмной страницей, а белый — с белой плашкой в дашборде.
   Поэтому цвет средне-серый, а не белый с прозрачностью: белая рамка видна на
   чёрном логотипе и исчезает на белом, серая читается на обоих. */
:root { --logo-edge: rgba(150, 158, 178, .55); }
.tv-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 10px;
  background: #fff1; flex: none; border: 1px solid var(--logo-edge); }
.tv-logo-sm { width: 32px; height: 32px; }
.tv-logo-lg { width: 72px; height: 72px; }
/* Заглушка вместо битой картинки: логотипы будут не у всех каналов. */
.tv-logo-stub {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: var(--muted);
  background: var(--bg-card-2); border: 1px solid var(--line);
}

/* --- Избранное ------------------------------------------------------------- */
.tv-fav {
  margin-inline-start: auto; flex: none; width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: 1px solid var(--line-strong); border-radius: 10px;
}
.tv-fav svg { fill: none; stroke: var(--muted); stroke-width: 1.7; }
.tv-fav:hover svg { stroke: var(--brand-accent); }
.tv-fav.is-on svg { fill: var(--brand-accent); stroke: var(--brand-accent); }

/* --- Список передач -------------------------------------------------------- */
.tv-progs { list-style: none; margin: 12px 0 0; padding: 0; }
.tv-prog { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.tv-prog:first-child { border-top: 0; }
.tv-prog-time { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; min-width: 44px; }
.tv-prog-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tv-prog-note { color: var(--muted); font-size: 13px; }
.tv-prog.is-live .tv-prog-title { font-weight: 600; }
/* Прошедшее приглушаем, а не выделяем: в сетке дня его больше половины. */
.tv-prog.is-past { opacity: .45; }
.tv-prog.is-past .tv-prog-title { font-weight: 400; }
.tv-prog-live { position: relative; color: var(--brand-accent); font-size: 12px; padding-top: 6px; }
.tv-prog-bar {
  position: absolute; inset-inline-start: 0; top: 0; height: 2px;
  background: var(--brand-accent); border-radius: 2px;
}
/* Граница суток внутри ленты: телевизионный день кончается в 05:00, и без
   этой строки «01:20» после «23:50» читается как ошибка расписания. */
.tv-daysep {
  margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid var(--line-strong);
  font-size: 14px; font-weight: 600; color: var(--muted); list-style: none;
}
/* Свернуто на телефоне, раскрыто на широких экранах — данные одни и те же. */
.tv-card .tv-prog.is-extra { display: none; }
.tv-card.is-open .tv-prog.is-extra { display: flex; }
.tv-more {
  margin-top: 10px; background: none; border: 0; padding: 0;
  color: var(--brand-accent); font: inherit; font-size: 13px; cursor: pointer;
}
.tv-none { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.tv-none a { color: var(--brand-accent); }
.tv-watch { margin-top: 12px; display: inline-flex; }

.tv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tv-list-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line); }
.tv-list-item a { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.tv-badge { font-size: 12px; color: var(--brand-accent); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap; }

/* --- Карточка канала ------------------------------------------------------- */
.tv-crumbs { color: var(--muted); font-size: 13px; padding-top: 14px; }
.tv-crumbs a { color: var(--muted); }
.tv-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.tv-head h1 { font-size: 24px; margin: 0 0 8px; }
.tv-summary { max-width: 760px; margin: 0 0 14px; color: var(--muted); }
.tv-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tv-actions .tv-watch { margin-top: 0; }
.tv-actions .tv-fav { margin-inline-start: 0; }

.tv-nowbox { display: flex; align-items: center; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: 14px;
  padding: 14px; margin-bottom: 18px; }
.tv-nowbox h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 6px; }
.tv-now-title { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.tv-now-time { color: var(--muted); font-size: 14px; margin: 0; }
/* Кнопка запускает ЭФИР, а не эту передачу в записи — поэтому рядом с ней
   в строке времени стоит «смотреть эфир»: голый треугольник у названия
   передачи обещает запись, которой у нас нет. */
.tv-play { flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-accent); color: #fff; text-decoration: none; }
.tv-play svg { fill: currentColor; margin-inline-start: 3px; }
.tv-play:hover { filter: brightness(1.1); }

/* Лента дат: липкая, стопорится о строку меню. Прокрутка внутри себя, страница
   по горизонтали не едет. Стрелки — снаружи ленты, чтобы не уезжали вместе с
   датами и всегда были на своих местах. */
.tv-datebar { position: sticky; top: var(--tv-bar-h, 56px); z-index: 20;
  display: flex; align-items: center; gap: 4px; padding: 10px 0; margin-bottom: 12px;
  background: var(--bg);
  /* Тень снизу — иначе прилипшая лента сливается с уезжающим под неё списком. */
  box-shadow: 0 8px 12px -10px rgba(0, 0, 0, .9); }
.tv-dates { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  scroll-behavior: smooth; flex: 1; }
.tv-dates::-webkit-scrollbar { display: none; }
.tv-date { flex: none; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: 14px; white-space: nowrap; }
.tv-date.is-cur { border-color: var(--brand-accent); color: var(--brand-accent); }
/* «Сейчас» — не дата, а момент: отмечаем точкой, чтобы позиция между «Вчера»
   и «Сегодня» не читалась как ещё один день. */
.tv-date-now::before { content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--brand-accent); margin-inline-end: 7px;
  vertical-align: middle; }

/* Стрелки прокрутки ленты. На тачскрине лента листается пальцем — там они
   лишние и спрятаны (см. медиазапрос ниже). */
.tv-arrow { flex: none; width: 32px; height: 40px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); }
.tv-arrow svg { fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.tv-arrow:hover:not(:disabled) { border-color: var(--brand-accent); color: var(--brand-accent); }
.tv-arrow:disabled { opacity: .25; cursor: default; }

/* Вся строка передачи в плитке — ссылка на канал: страницы самой передачи
   пока нет, а по названию хочется куда-то нажать. */
.tv-prog-link { display: flex; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.tv-prog-link:hover .tv-prog-title { color: var(--brand-accent); }

/* Название в плитке — не длиннее двух строк.
   Фид кладёт в название и подзаголовок, и номер серии, и пересказ: «Губка Боб
   Квадратные Штаны. Сезон 5-й 8-я серия. Говорящие деньги/Спанч Боб против…».
   Без ограничения одна такая строка вытягивает плитку на пол-экрана, и соседние
   колонки разъезжаются. Текст при этом остаётся в разметке целиком — обрезает
   его показ, а не разметка, и поисковик видит полное название. */
.tv-card .tv-prog-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tv-day { font-size: 16px; margin: 18px 0 8px; }
.tv-progs-full .tv-prog { padding: 10px 0; }
.tv-pages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.tv-page { padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); text-decoration: none; font-size: 14px; }
.tv-page.is-cur { border-color: var(--brand-accent); color: var(--brand-accent); }
.tv-back { margin-top: 24px; }

/* Тап-цель не меньше 44px там, где по ссылкам попадают пальцем. */
@media (max-width: 767px) {
  /* Пальцем лента листается сама — кнопки только отнимают ширину. */
  .tv-arrow { display: none; }
  .tv-date, .tv-chip { min-height: 44px; display: inline-flex; align-items: center; }
  .tv-list-item a { min-height: 44px; }
  .tv-head { gap: 10px; }
  .tv-head h1 { font-size: 21px; }
}

@media (min-width: 768px) {
  .tv-grid { grid-template-columns: repeat(2, 1fr); }
  .tv-card .tv-prog.is-extra { display: flex; }
  .tv-more { display: none; }
  .tv-wrap h1 { font-size: 34px; }
  .tv-list { grid-template-columns: repeat(2, 1fr); gap: 0 28px; }
}
@media (min-width: 1100px) {
  .tv-grid { grid-template-columns: repeat(4, 1fr); }
  .tv-list { grid-template-columns: repeat(3, 1fr); }
}

/* --- Предыдущие сеансы -----------------------------------------------------
   Прошедшие передачи лежат в разметке всегда и только скрыты стилями: скрытое
   CSS-ом поисковик индексирует, отсутствующее — нет, а сетка суток должна быть
   на странице целиком. Без этой кнопки из вида «Сейчас» выпадал весь отрезок
   от начала телесуток (05:00) до идущей передачи. */
.tv-progs-full.has-past .tv-prog.is-past { display: none; }
.tv-progs-full.has-past.is-open-past .tv-prog.is-past { display: flex; }
.tv-past-toggle { list-style: none; padding: 0 0 8px; }
.tv-past-btn {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--muted);
}
.tv-past-btn b { font-weight: 500; opacity: .7; }
.tv-past-btn:hover { color: var(--brand-accent); }