/*
 * Radio Online — TV mode 1.1
 * Консервативный TV-режим: не ломает базовую desktop-сетку.
 * Включается классом html.radio-tv-mode.
 */

html.radio-tv-mode {
  scroll-behavior: auto !important;
}

/*
 * Не меняем глобальный font-size, ширину wrapper, sidebar,
 * число колонок и базовую геометрию сайта.
 */
html.radio-tv-mode .wrapper__main {
  padding-bottom: 82px;
}

/* Чуть больше воздуха между смысловыми блоками, без перестройки сетки. */
html.radio-tv-mode .sect {
  margin-bottom: 44px;
}

html.radio-tv-mode .sect__header {
  margin-bottom: 34px;
}

html.radio-tv-mode .sect__title {
  font-size: 26px;
  line-height: 1.25;
}

html.radio-tv-mode .sect__link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

/*
 * Карточки сохраняют штатные размеры и штатное число колонок.
 * Увеличиваем только hit-area управляющих кнопок совсем немного.
 */
html.radio-tv-mode .sect__content--tracks .trc,
html.radio-tv-mode .allradio-list.sect__content--tracks .trc {
  min-height: 82px;
}

html.radio-tv-mode .trc__img,
html.radio-tv-mode .radio-card-home-cover {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
}

html.radio-tv-mode .trc__title {
  font-size: 16px;
  line-height: 1.25;
}

html.radio-tv-mode .trc__subtitle {
  font-size: 14px;
}

html.radio-tv-mode .trc__fav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}

html.radio-tv-mode .trc__play {
  width: 44px;
  height: 44px;
  min-width: 44px;
  font-size: 11px;
  border-width: 2px;
}

/* Верхняя навигация остаётся в штатной геометрии. */
html.radio-tv-mode .nav__list > li > a {
  position: relative;
}

/* Настройки — слегка увеличиваем только переключатели/строки. */
html.radio-tv-mode .site-settings-row {
  min-height: 74px;
}

html.radio-tv-mode .site-settings-row__text strong {
  font-size: 17px;
}

html.radio-tv-mode .site-settings-row__text small {
  font-size: 14px;
  line-height: 1.45;
}

/* Пагинация / Load more. */
html.radio-tv-mode .pagination-more__button {
  min-height: 48px;
}

html.radio-tv-mode .pagination-more__auto {
  margin-top: 48px;
}

/*
 * Нижний плеер: умеренное увеличение вместо 92px,
 * чтобы не съедать значительную часть экрана.
 */
html.radio-tv-mode .wplayer {
  min-height: 72px;
}

html.radio-tv-mode .audioplayer {
  height: 72px;
  min-height: 72px;
  max-width: var(--max-width);
  width: calc(100% - 40px);
  gap: 10px;
}

html.radio-tv-mode .ap-img {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
}

html.radio-tv-mode .ap-title {
  font-size: 16px;
}

html.radio-tv-mode .ap-artist {
  font-size: 13px;
}

html.radio-tv-mode .audioplayer-playpause a {
  width: 48px;
  height: 48px;
  line-height: 48px;
  margin-left: 14px;
  margin-right: 14px;
}

html.radio-tv-mode .ap-prev,
html.radio-tv-mode .ap-next,
html.radio-tv-mode .ap-fav,
html.radio-tv-mode .audioplayer-volume-button a,
html.radio-tv-mode .ap-settings {
  min-width: 38px;
  min-height: 38px;
}

/* На телевизоре мобильная нижняя навигация не нужна. */
html.radio-tv-mode .mobile-bottom-nav {
  display: none !important;
}

/*
 * Главное отличие TV-режима — очень заметный фокус пульта.
 * Не используем color-mix: поддержка в старых WebView бывает неполной.
 */
html.radio-tv-mode :where(
  a[href],
  button,
  input,
  select,
  textarea,
  [tabindex]:not([tabindex="-1"]),
  [role="button"]
):focus,
html.radio-tv-mode :where(
  a[href],
  button,
  input,
  select,
  textarea,
  [tabindex]:not([tabindex="-1"]),
  [role="button"]
):focus-visible {
  outline: 4px solid var(--accent-primary) !important;
  outline-offset: 4px !important;
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(0, 160, 255, .18) !important;
}

/* Если фокус внутри карточки, выделяем карточку, не меняя её размеров. */
html.radio-tv-mode .trc:focus-within {
  position: relative;
  z-index: 6;
  box-shadow: inset 0 0 0 3px var(--accent-primary);
}

html.radio-tv-mode .trc__play:focus,
html.radio-tv-mode .trc__play:focus-visible,
html.radio-tv-mode .audioplayer-playpause a:focus,
html.radio-tv-mode .audioplayer-playpause a:focus-visible,
html.radio-tv-mode .ap-prev:focus,
html.radio-tv-mode .ap-next:focus {
  color: #fff !important;
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
}

/* Dropdown также должен открываться/читаться по focus-within. */
html.radio-tv-mode .nav__menu-has-submenu:focus-within > .nav__menu-submenu,
html.radio-tv-mode .side-genres:focus-within .side__menu-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/*
 * Для небольших TV/WebView ничего не форсируем: штатные media-query
 * основного шаблона сами переключают desktop/tablet/mobile геометрию.
 */