/* Каркас страницы: шапка, подвал, контейнеры, сетки. */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gap-4);
}

@media (min-width: 768px) {
  .wrap { padding-inline: var(--gap-5); }
}

/* ---------- шапка ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--gap-5);
  width: 100%;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: var(--text-lg);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

/*
 * Логотип — текст с переливом.
 *
 * Градиент кладётся на саму надпись через background-clip, а не рисуется
 * картинкой: текст остаётся текстом — его можно выделить, прочтёт
 * озвучиватель, и он не размывается ни на каком экране.
 *
 * Полоса света шире надписи и медленно проходит по ней. Цвета те же, что
 * и были: светлая «Alloha» перетекает в золотую «Serial», просто теперь
 * переход живой, а не по границе слова.
 */
/*
 * Перелив логотипа. Тот же приём подсвечивает число сериалов на главной,
 * поэтому правило общее: две копии одного градиента разъехались бы,
 * а вместе они читаются как один почерк сайта.
 */
.logo-text,
.sheen {
  background-image: linear-gradient(
    100deg,
    var(--ink) 0%,
    var(--ink) 30%,
    #fff5dd 42%,
    var(--accent) 54%,
    #ffe6a8 64%,
    var(--accent) 78%,
    var(--accent) 100%
  );
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: logo-sheen 7s linear infinite;
}

/* Иначе собственный цвет `b` перебил бы прозрачность и градиент пропал. */
.logo b { color: inherit; font-weight: inherit; }

/*
 * Маскот — ананас — перед надписью. Надпись выравнивается по базовой
 * линии, картинка — по центру строки; поэтому у ссылки align-items: center.
 * При наведении ананас чуть покачивается.
 */
.logo { align-items: center; gap: 8px; }

.logo-mascot {
  display: block;
  width: auto;
  height: 42px;
  flex: none;
  background: none;   /* у img по умолчанию фон-заглушка (base.css), здесь он рисовал подложку */
  transform-origin: 50% 90%;
  transition: transform 0.25s ease;
}

.logo:hover .logo-mascot { transform: rotate(-8deg); }

@media (max-width: 640px) {
  .logo-mascot { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-mascot { transition: none; }
}

@keyframes logo-sheen {
  to { background-position: -130% 0; }
}

/*
 * Число в подписи под заголовком.
 *
 * Крупнее и жирнее окружающего текста: перелива мало, он на мелком шрифте
 * почти не виден, а число здесь и есть главное слово фразы.
 */
.home-count .sheen {
  font-size: 1.35em;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/*
 * Кому анимация мешает — статичный градиент. Полностью отключать перелив
 * не нужно: он и без движения выглядит как задумано, а вот бегущая полоса
 * при вестибулярных расстройствах и правда мешает.
 */
@media (prefers-reduced-motion: reduce) {
  .logo-text,
  .sheen { animation: none; background-position: 50% 0; }
}

.nav {
  display: flex;
  gap: var(--gap-1);
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar { display: none; }

.nav a {
  padding: var(--gap-2) var(--gap-3);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.nav a:hover { background: var(--surface-2); color: var(--ink); }

/*
 * Текущий раздел.
 *
 * Правило для него в стилях было с самого начала, но `aria-current` в меню
 * не выставлялся никогда — подсветка не включалась ни на одной странице.
 * И вид у неё совпадал с наведением: «где я» было не отличить от «под
 * курсором», поэтому теперь активный пункт золотой.
 */
.nav a[aria-current] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 640px) {
  .nav { display: none; }
}

/* ---------- основная область ---------- */

.main {
  padding-block: var(--gap-6) var(--gap-8);
  min-height: 60vh;
}

.section { margin-bottom: var(--gap-7); }

/* Список остальных жанров и стран идёт сразу за сеткой постеров,
   без отступа заголовок липнет к подписям карточек. */
.facet-others { margin-top: var(--gap-7); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-4);
  margin-bottom: var(--gap-4);
  flex-wrap: wrap;
}

/*
 * Ряды главной отделены друг от друга.
 *
 * Класс отдельный, не общий `.section`: тот же класс стоит на страницах
 * сериала, сезона, персоны и в галерее, и линейки там были бы лишними.
 *
 * Разделитель ставится между рядами, а не под каждым: полоса после
 * последнего висела бы в воздухе, отчёркивая пустоту.
 */
.home-section + .home-section {
  border-top: 1px solid var(--rule);
  padding-top: var(--gap-7);
  margin-top: var(--gap-7);
}

/*
 * Ряд после ленты не отчёркивается.
 *
 * Лента и так кончается обрывом карточек, а тонкая линия сразу под ней
 * читалась не как граница разделов, а как часть самой ленты — вроде
 * недорисованной полосы прокрутки. Между прочими рядами линия остаётся:
 * там она и вправду единственная граница.
 */
.home-section:has(.slider-wrap) + .home-section {
  border-top: none;
  padding-top: 0;
}

/*
 * Засечка перед заголовком.
 *
 * Дешёвый приём, но работает: глаз цепляется за начало ряда и понимает,
 * где он кончился. Без неё шесть одинаковых блоков читались как одна
 * длинная лента.
 *
 * Белая, а не золотая: сам заголовок уже золотой, и две золотые полосы
 * подряд сливались в одно пятно. Белая засечка отделяет метку от текста.
 */
.home-section .section-head h2 {
  position: relative;
  padding-left: calc(var(--gap-3) + 4px);
}

.home-section .section-head h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  border-radius: 2px;
  background: var(--ink);
}

/*
 * Заголовок ряда — он же ссылка в раздел.
 *
 * Раньше рядом висела вторая, мелкая и серая («Все темы», «Весь каталог»):
 * два перехода на один ряд, причём заметнее был тот, что ведёт никуда.
 * Теперь переход один и совпадает с тем, на что смотришь.
 */
.section-head h2 { font-size: var(--text-xl); }

.section-head h2 a {
  color: var(--accent);
  text-decoration: none;
}

.section-head h2 a:hover,
.section-head h2 a:focus-visible { text-decoration: underline; }

.section-head a:hover { color: var(--accent); }

/* ---------- сетки ---------- */

.grid-posters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--gap-4);
}

.grid-wide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap-4);
}

/*
 * Лента с горизонтальной прокруткой.
 *
 * Прокрутка нативная: колесом, пальцем и стрелками клавиатуры работает
 * без единой строки скриптов. Кнопки добавляет slider.js — если он
 * не выполнится, лента останется рабочей, просто без стрелок.
 *
 * `scroll-snap` выравнивает карточки по левому краю, иначе после броска
 * пальцем лента замирала бы на полукарточке.
 */
.slider-wrap { position: relative; }

.slider {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  /* Плавно едет любая прокрутка, не только по кнопке: колесом с Shift,
     стрелками клавиатуры, переходом по якорю. */
  scroll-behavior: smooth;
  /* Старым сборкам WebKit без этого не достаётся инерция под пальцем. */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-left: 2px;
  /* Полосы прокрутки нет: под лентой она читалась как разделительная
     черта, а не как орган управления. Показать, что лента едет, есть чем —
     стрелки и обрезанная по краю плашка. */
  scrollbar-width: none;
}

.slider::-webkit-scrollbar { display: none; }

/*
 * Пока ленту тащат мышью, плавность мешает: лента догоняла бы курсор
 * с задержкой и казалась вязкой. Заодно снимаем выделение текста —
 * иначе к курсору прилипают подписи.
 */
.slider.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}

.slider.is-dragging,
.slider.is-dragging * { cursor: grabbing; }

/*
 * То же самое на время анимации по кнопке: её рисует скрипт, кадр за кадром.
 * Оставь здесь браузерную плавность — и каждый кадр анимации сам стал бы
 * плавной прокруткой, а лента задрожала бы. Прилипание снимается по той же
 * причине; конечная точка и так приходится на границу плашки.
 */
.slider.is-animating {
  scroll-behavior: auto;
  scroll-snap-type: none;
}

/* Плавность — украшение, и системную настройку она обязана уважать. */
@media (prefers-reduced-motion: reduce) {
  .slider { scroll-behavior: auto; }
}

/*
 * Лента перебивает сетку, на которую её вешают.
 *
 * Одного класса `.slider` для этого мало: `.cast-grid` и `.grid-wide`
 * задают свой `display` с той же силой, а `components.css` подключается
 * после `layout.css` и потому выигрывает. Перечисляем сетки явно —
 * это честнее, чем задирать вес селектора приёмом вроде `.slider.slider`.
 * Появится новая лента — её сетку добавить сюда.
 */
.grid-wide.slider,
.cast-grid.slider,
.grid-posters.slider {
  display: flex;
  grid-template-columns: none;
}

.slider > * { scroll-snap-align: start; }

/* Плашки в ленте мельче, чем карточки в сетке: лента берёт числом,
   и на экране должно помещаться четыре-пять, а не две с половиной. */
.grid-wide.slider > * { flex: 0 0 min(238px, 62vw); }

/* Постеры похожих сериалов: как в сетке каталога, но лентой. */
.grid-posters.slider > * { flex: 0 0 min(176px, 42vw); }

/* Состав уже: карточка актёра — это портрет 2:3 с двумя строками подписи. */
.cast-grid.slider > * { flex: 0 0 min(132px, 34vw); }

/*
 * Кнопки прокрутки стоят в строке заголовка ряда, справа.
 *
 * Поверх ленты им места нет: плашка теперь во весь кадр, подписи прижаты
 * к её низу, и круглая кнопка любой высоты садится на название сериала —
 * её диаметр больше свободной полосы над подписью. В поля страницы тоже
 * не вынести: там двадцать четыре пикселя.
 *
 * Запасное положение — поверх ленты — остаётся для лент без заголовка;
 * его включает сам скрипт классом на обёртке.
 */
.slider-nav-group {
  display: flex;
  gap: var(--gap-2);
  align-self: center;
}

.slider-nav-group.is-static { display: none; }

.slider-wrap-nav .slider-nav-group {
  position: absolute;
  top: calc(34% - 22px);
  left: -20px;
  right: -20px;
  justify-content: space-between;
  pointer-events: none;
}

.slider-wrap-nav .slider-nav { pointer-events: auto; }

.slider-nav {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink);
  /* Заливка почти сплошная, а не полупрозрачная: в запасном положении
     кнопка лежит на кадре, и на светлом кадре прозрачная подложка
     растворялась вместе со стрелкой. */
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  border: 1px solid var(--surface-3);
  border-radius: 50%;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.45);
  cursor: pointer;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s, color 0.15s;
}

.slider-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slider-nav:hover:not(:disabled),
.slider-nav:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-2);
}

/* У края кнопка гаснет, а при коротком списке группы нет вовсе. */
.slider-nav:disabled { opacity: 0.3; cursor: default; }

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

@media (min-width: 480px) {
  .grid-posters { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

@media (min-width: 1400px) {
  .grid-posters { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* ---------- подвал ---------- */

.footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--gap-6);
  color: var(--ink-3);
  font-size: var(--text-sm);
}

.footer-inner {
  display: flex;
  gap: var(--gap-4) var(--gap-6);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.footer nav { display: flex; gap: var(--gap-3); align-items: center; }

/* Разделитель рисуем чертой на всех ссылках, кроме первой: так он не зависит
   от их числа и не попадает внутрь кликабельной области. */
.footer nav a + a { border-left: 1px solid var(--rule); padding-left: var(--gap-3); }

.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--accent); }

/* ---------- поиск в шапке ---------- */

.search {
  position: relative;
  flex: 0 1 320px;
  min-width: 0;
}

.search input {
  width: 100%;
  padding: var(--gap-2) var(--gap-4);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 100px;
}

.search input::placeholder { color: var(--ink-3); }
.search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.search-results {
  position: absolute;
  top: calc(100% + var(--gap-2));
  right: 0;
  width: min(420px, 92vw);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 40;
  padding: var(--gap-1);
}

.sg-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--gap-3);
  align-items: center;
  padding: var(--gap-2);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}

.sg-item:hover,
.sg-item.is-active { background: var(--surface-2); }

.sg-thumb {
  aspect-ratio: 2 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2);
}

.sg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sg-body { display: flex; flex-direction: column; min-width: 0; }
.sg-body b { font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-body span { font-size: var(--text-xs); color: var(--ink-3); }

.sg-rating {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--imdb);
  font-variant-numeric: tabular-nums;
}

/* ---------- страница поиска ---------- */

.search-page { max-width: var(--wrap); }
.search-page h1 { margin-bottom: var(--gap-4); }

.search-form {
  display: flex;
  gap: var(--gap-3);
  margin-bottom: var(--gap-5);
  max-width: 560px;
}

.search-form input {
  flex: 1;
  min-width: 0;
  padding: var(--gap-3) var(--gap-4);
  font-size: var(--text-md);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}

.search-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 900px) {
  .search { flex: 1 1 auto; }
}

@media (max-width: 640px) {
  /* На узком экране поиск занимает место скрытого меню. */
  .search { flex: 1; }
}