/* Телевизоры и очень широкие экраны.

   Смотрят с трёх метров и управляют пультом, поэтому здесь крупнее кегль,
   больше цели и обязательно заметный фокус. Наведения мышью нет вовсе —
   ни одно состояние не должно зависеть только от :hover. */

/* Одной ширины мало: мониторы на 2560 и ультраширокие тоже больше 1800,
   а сидят за ними в полуметре с мышью. Растянутая раскладка и крупный кегль
   там только мешают — строка становится длиннее удобной для чтения.
   Поэтому обязателен и признак «нет точного указателя»: у телевизора
   управление пультом, у монитора мышь. */
@media (min-width: 1800px) and (pointer: coarse) {
  :root {
    --wrap: 1680px;
    --header-h: 76px;

    --text-sm:  1.05rem;
    --text-md:  1.22rem;
    --text-lg:  1.5rem;
    --text-xl:  2rem;
    --text-2xl: 3.2rem;
  }

  .grid-posters { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .grid-wide    { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
  .season-grid  { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .gallery      { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

  .ecard { grid-template-columns: 260px 1fr; }

  .btn { padding: var(--gap-4) var(--gap-6); }
}

/* Устройства без точного указателя: телевизоры и приставки.
   Цели крупнее, фокус ярче, «подсветка при наведении» не используется. */
@media (pointer: coarse), (hover: none) {
  .nav a,
  .btn,
  .chip,
  .lightbox-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .card:hover .card-poster img { transform: none; }
  .gallery-item:hover img { transform: none; }
  .season-card:hover .season-card-art img { transform: none; }
}

/* Подсветка элемента, на котором стоит фокус при управлении пультом.
   Класс проставляет tv-nav.js, поэтому в обычном браузере ничего не меняется. */
.tv-focus {
  outline: 4px solid var(--accent) !important;
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  scroll-margin: 25vh;
}

body.tv-mode .card-poster,
body.tv-mode .ecard,
body.tv-mode .rcard-art,
body.tv-mode .season-card-art,
body.tv-mode .season-card-art img { transition: none; }

body.tv-mode .season-card:hover .season-card-art img { transform: none; }