/* Композиция страниц сериала, сезона и серии. */

/* ---------- шапка сериала ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-5);
  margin-bottom: var(--gap-6);
}

@media (min-width: 760px) {
  .hero { grid-template-columns: 240px 1fr; gap: var(--gap-6); }
}

@media (min-width: 1100px) {
  .hero { grid-template-columns: 280px 1fr; }
}

.hero-poster {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 2 / 3;
  max-width: 220px;
}

@media (min-width: 760px) {
  .hero-poster { max-width: none; }
}

/*
 * Фотография человека — ровно 185 пикселей, ни одним больше.
 *
 * Столько отдаёт TMDB, и все 1034 файла в хранилище именно такие. Рамка
 * постера сериала растягивала её вдвое, и наружу лезли артефакты сжатия:
 * увеличивать нечего, крупнее исходника картинки не бывает.
 *
 * Правило стоит здесь, а не рядом с остальными стилями человека: перебить
 * ему нужно `max-width: none` из медиазапроса выше, а `components.css`
 * подключается раньше `pages.css` и проигрывал по порядку.
 */
.hero-poster.person-photo { max-width: 185px; }

.hero-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--image-hover-duration) var(--image-hover-easing);
}

.hero-poster:hover img { transform: scale(var(--image-hover-scale)); }

.hero-body { min-width: 0; }

.hero h1 { margin-bottom: var(--gap-2); }

.hero-orig {
  font-size: var(--text-md);
  color: var(--ink-3);
  margin-bottom: var(--gap-4);
}

.hero-ratings {
  display: flex;
  gap: var(--gap-3);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--gap-4);
}

.hero-tagline {
  font-style: italic;
  color: var(--ink-2);
  margin-bottom: var(--gap-4);
}

/* ---------- таблица фактов ---------- */

.facts {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: var(--gap-2) var(--gap-4);
  margin: var(--gap-4) 0;
  font-size: var(--text-sm);
}

.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- описание ---------- */

.prose {
  max-width: var(--wrap-text);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--ink-2);
}

.prose p { margin-bottom: var(--gap-4); }

/* ---------- сезоны ---------- */

/*
 * Сезоны на своей плашке.
 *
 * За ними на страницу и приходят, а блок шёл таким же рядом, как «В ролях»,
 * и терялся между описанием и актёрами.
 */
.season-panel {
  padding: var(--gap-5) var(--gap-5) var(--gap-6);
  /* Рамка толще общей и золотая: волосяная линия в цвет разделителей
     на тёмном фоне почти не видна, и плашка читалась как обычный ряд.
     Золото здесь тот же акцент, что у заголовков и меток, — плашка
     не выпадает из палитры, а встаёт в один ряд с ними по важности. */
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  /* Заливка сплошная, а не гаснущая книзу: у прежнего градиента нижняя
     половина сливалась со страницей, и рамка висела вокруг пустоты. */
  background: var(--surface);
  /* Мягкое золотое свечение наружу: без него яркая рамка выглядит
     наклейкой поверх страницы, а не её частью. */
  box-shadow: 0 0 0 4px rgb(232 180 74 / 0.07);
}

.season-panel .section-head { margin-bottom: var(--gap-5); }

@media (max-width: 560px) {
  .season-panel { padding: var(--gap-4) var(--gap-4) var(--gap-5); }
}

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

.season-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  color: inherit;
  text-decoration: none;
}

.season-card-art {
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  transition: border-color var(--image-hover-duration) var(--image-hover-easing);
}

.season-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--image-hover-duration) var(--image-hover-easing);
}

.season-card-art .fallback {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink-3);
}

.season-card b { font-size: var(--text-md); font-weight: 700; }
.season-card span { font-size: var(--text-xs); color: var(--ink-3); }
.season-card:hover b { color: var(--accent); }

/* Рамка остаётся неподвижной, масштабируется только изображение внутри неё. */
.season-card:hover .season-card-art,
.season-card:focus-visible .season-card-art {
  border-color: var(--accent-dim);
}

.season-card:hover .season-card-art img,
.season-card:focus-visible .season-card-art img { transform: scale(var(--image-hover-scale)); }

@media (prefers-reduced-motion: reduce) {
  /* Наведение на постер — явный пользовательский эффект, сохраняем его как у серий. */
  .season-card-art,
  .season-card-art img {
    transition-duration: var(--image-hover-duration) !important;
  }
}

/* ---------- список серий ---------- */

.episode-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
}

/* ---------- страница серии ---------- */

.episode-head { margin-bottom: var(--gap-5); }

.episode-head h1 { margin-bottom: var(--gap-2); }

.episode-orig {
  font-size: var(--text-lg);
  color: var(--ink-2);
  margin-bottom: 4px;
}

.episode-original-title {
  margin: 0 0 var(--gap-4);
  color: var(--ink-3);
  font-size: var(--text-sm);
}

.episode-meta {
  display: flex;
  gap: var(--gap-2) var(--gap-4);
  flex-wrap: wrap;
  align-items: center;
  margin: var(--gap-3) 0 var(--gap-2);
  font-size: var(--text-sm);
  color: var(--ink-3);
}

/* Описание и съёмочная группа рядом: текст занимает основную ширину,
   справка о создателях — узкую колонку справа. На узком экране колонки
   складываются в одну, группа уходит под текст. */
.episode-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: var(--gap-5);
  align-items: start;
  margin-top: var(--gap-5);
}

/* Текст описания не должен упираться в переходы сверху и в край справа. */
.episode-text { padding-top: 2px; }

@media (max-width: 900px) {
  .episode-body { grid-template-columns: minmax(0, 1fr); }
}

.episode-crew {
  display: grid;
  gap: var(--gap-3);
  padding: var(--gap-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--text-sm);
}

.episode-crew-label {
  display: block;
  margin-bottom: 2px;
  color: var(--ink-3);
  font-size: var(--text-xs);
}

/* Оценки под заголовком серии: две строки со звёздами, на узком экране
   складываются одна под другую. */
.episode-ratings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2) var(--gap-5);
  margin: 0 0 var(--gap-4);
}

.episode-head .vote { margin: 0; }
.episode-head .vote-scale { margin-top: 0; }

/* Переходы под плеером: прижаты к нему сверху, отделены от текста снизу. */
.pager-top { margin-top: var(--gap-3); margin-bottom: var(--gap-2); }

/* ---------- предупреждение ---------- */

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

.notice strong { color: var(--ink); }
.notice-warn { border-color: var(--warn); }

/* ---------- главная ---------- */

.home-lead {
  margin-bottom: var(--gap-6);
  max-width: var(--wrap-text);
}

.home-lead h1 { margin-bottom: var(--gap-3); }