/* =========================================================
   Страница сериала / фильма.
   Крупное превью с затемнением, под ним информационные блоки.
   ========================================================= */

/* ---------- превью ---------- */
.show{ position:relative; min-height:min(88svh,52rem); display:flex; align-items:flex-end; }
.show__media{ position:absolute; inset:0; overflow:hidden; background:#0a0a0b; }
.show__media img{
  /* поверх градиента-заглушки, который лежит первым в разметке */
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 32%;
  /* исходник узкий: лёгкий зум прячет мягкость краёв при растягивании */
  transform:scale(1.06);
}
/* два затемнения: слева под текст, снизу — переход в страницу */
/* Превью без кадра: тайтлу ещё не завезли картинку — рисуем
   градиентом постера, чтобы верх страницы не выглядел битым. */
.show__grad{
  width:100%; height:100%;
  background:linear-gradient(120deg,var(--c1),var(--c2));
  display:grid; place-items:center;
}
.show__grad span{
  font-size:min(38vw,22rem); font-weight:800; line-height:1;
  color:rgba(255,255,255,.10);
}

/* Фон из вертикального постера. Размытие и увеличение — не украшение:
   так от постера остаётся только цвет и общая форма, и никто не пытается
   разглядеть в шапке обрезанный фрагмент обложки. */
.show__blur{
  transform:scale(1.25);
  filter:blur(2.5rem) saturate(1.1) brightness(.65);
}

/* Сам постер — карточкой справа, в своих пропорциях 2:3. */
.show__poster{
  position:absolute; z-index:3; right:0; bottom:clamp(2.5rem,4vw,4rem);
  width:clamp(11rem,16vw,15rem); aspect-ratio:2/3;
  border-radius:var(--r-sm); overflow:hidden;
  box-shadow:0 1.875rem 3.75rem -1.25rem rgba(0,0,0,.9);
}
.show__poster img{ width:100%; height:100%; object-fit:cover; display:block; }
/* пустой контейнер не должен отбрасывать тень */
.show__poster:empty{ display:none; }

.show__media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(12,12,13,.97) 0%, rgba(12,12,13,.86) 28%, rgba(12,12,13,.35) 58%, rgba(12,12,13,.55) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(12,12,13,.72) 18%, rgba(12,12,13,0) 55%);
}

.show__inner{
  position:relative; z-index:2; width:100%;
  /* только вертикальные: шорткат padding обнулил бы гаттер .container */
  padding-top:calc(var(--header-h) + 3rem); padding-bottom:clamp(2.5rem,4vw,4rem);
}
.show__crumbs{ display:flex; gap:0.5rem; font-size:0.8125rem; font-weight:600; color:var(--text-3); }
.show__crumbs a:hover{ color:#fff; }
.show__crumbs span{ opacity:.5; }

.show__title{
  margin:1.25rem 0 0; max-width:20ch;
  font-family:var(--font-display); font-weight:500; letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(2.5rem,5.2vw,5.5rem);
}
.show__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:0.75rem;
  margin-top:1.25rem; font-size:1rem; font-weight:600; color:var(--text-2);
}
.show__score{ color:var(--green); font-weight:800; font-size:1.125rem; }
.show__meta i{ width:0.25rem; height:0.25rem; border-radius:50%; background:var(--text-3); font-style:normal; }
.show__tags{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1rem; }
.show__tag{
  padding:0.375rem 0.75rem; border-radius:var(--r-xs);
  background:rgba(255,255,255,.1); font-size:0.8125rem; font-weight:700;
}
.show__desc{ margin:1.25rem 0 0; max-width:38rem; font-size:1.0625rem; line-height:1.5; color:var(--text-2); }

.show__actions{ display:flex; align-items:center; gap:0.75rem; margin-top:1.75rem; flex-wrap:wrap; }
.show__play{ height:3.5rem; padding:0 2rem; font-size:1.0625rem; gap:0.625rem; }
.iconbtn{
  width:3.5rem; height:3.5rem; display:grid; place-items:center; flex:none;
  border-radius:var(--r-sm); background:rgba(255,255,255,.1);
  border:1px solid var(--line-strong); color:#fff;
  transition:background .16s var(--e-out), border-color .16s var(--e-out);
}
.iconbtn:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.34); }
.iconbtn svg{ width:1.25rem; height:1.25rem; }
.iconbtn.is-on{ background:var(--brand); border-color:transparent; }

/* полоса «что даст сериал» — наша, не киношная */
.show__learn{
  display:flex; flex-wrap:wrap; gap:0 2.5rem; margin-top:2rem;
  padding-top:1.5rem; border-top:1px solid var(--line);
  max-width:44rem;
}
.learnitem{ padding:0.25rem 0; }
.learnitem b{ display:block; font-size:1.125rem; font-weight:800; letter-spacing:-.01em; }
.learnitem span{ font-size:0.875rem; color:var(--text-3); font-weight:600; }
.learnitem--sub b{ display:flex; align-items:center; gap:0.5rem; }
.learnitem .flag{ width:1.5rem; height:1.125rem; }

/* ---------- секции ---------- */
.show__body{
  position:relative; z-index:2;
  padding-top:clamp(2.5rem,5vw,4.5rem); padding-bottom:5rem;
}
.block{ margin-top:clamp(2.5rem,4.5vw,4rem); }
.block:first-child{ margin-top:0; }
.block__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.block__title{ font-size:clamp(1.25rem,1.9vw,1.625rem); font-weight:800; letter-spacing:-.02em; }
.block__more{ font-size:0.875rem; font-weight:700; color:var(--text-3); }
.block__more:hover{ color:#fff; }

/* сезоны */
.seasons{ display:flex; align-items:center; gap:0.5rem; }
.season{
  min-width:2.25rem; height:2.25rem; padding:0 0.625rem; border-radius:var(--r-xs);
  font-size:0.9375rem; font-weight:700; color:var(--text-2);
  transition:background .16s var(--e-out), color .16s var(--e-out);
}
.season:hover{ background:rgba(255,255,255,.08); color:#fff; }
.season.is-active{ background:var(--violet); color:#fff; }

.eps{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(17rem,1fr);
  gap:1.25rem; overflow-x:auto; padding-bottom:0.5rem;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.eps::-webkit-scrollbar{ display:none; }
.ep{ display:block; scroll-snap-align:start; cursor:pointer; }
.ep__art{ position:relative; aspect-ratio:16/9; border-radius:var(--r-sm); overflow:hidden; background:var(--surface-2); }
/* поверх градиента с буквой: та же подстраховка, что у постеров */
.ep__art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ep__art::after{ content:''; position:absolute; inset:0; background:var(--tint,transparent); mix-blend-mode:color; }
/* то же самое для кадров серий */
.ep__art--grad{ background:linear-gradient(140deg,var(--c1),var(--c2)); }
.ep__glyph{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:3.5rem; font-weight:800; line-height:1; color:rgba(255,255,255,.12);
}

/* серия, которой ещё нет в API: карточка на месте, но никуда не ведёт */
.ep--soon{ cursor:default; }
.ep--soon .ep__art{ opacity:.55; }

.ep__play{
  position:absolute; z-index:2; inset:0; display:grid; place-items:center;
  opacity:0; transition:opacity .22s var(--e-out);
}
.ep:hover .ep__play{ opacity:1; }
.ep__time{
  position:absolute; z-index:2; right:0.5rem; bottom:0.5rem;
  padding:0.1875rem 0.4375rem; border-radius:0.375rem;
  background:rgba(0,0,0,.72); font-size:0.75rem; font-weight:700;
}
.ep__title{ margin-top:0.75rem; font-size:0.9375rem; font-weight:800; }
.ep__desc{ margin-top:0.25rem; font-size:0.8125rem; line-height:1.45; color:var(--text-3); }
.ep__words{ margin-top:0.5rem; font-size:0.75rem; font-weight:700; color:var(--violet); }

/* актёры */
.cast{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(7rem,1fr);
  gap:1rem; overflow-x:auto; padding-bottom:0.5rem; scrollbar-width:none;
}
.cast::-webkit-scrollbar{ display:none; }
.person{ text-align:center; }
.person__ava{
  position:relative; overflow:hidden;
  width:5.5rem; height:5.5rem; margin:0 auto; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(160deg,var(--c1),var(--c2));
  font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:rgba(255,255,255,.92);
}
.person__name{ margin-top:0.625rem; font-size:0.8125rem; font-weight:700; line-height:1.3; }
.person__role{ margin-top:0.125rem; font-size:0.75rem; color:var(--text-3); font-weight:600; }

/* о сериале + оценка */
.about{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,22rem); gap:clamp(1.5rem,3vw,3rem); align-items:start; }
.about__text{ font-size:1rem; line-height:1.6; color:var(--text-2); max-width:46rem; }
.about__text p{ margin:0 0 0.875rem; }
.about__more{ font-size:0.875rem; font-weight:700; color:var(--text-3); display:inline-flex; align-items:center; gap:0.375rem; }
.about__more:hover{ color:#fff; }
.about__more svg{ width:0.875rem; height:0.875rem; transition:transform .2s var(--e-out); }
.about.is-open .about__more svg{ transform:rotate(180deg); }
.about__hidden[hidden]{ display:none; }

.rate{ padding:1.5rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); }
.rate__top{ display:flex; align-items:center; gap:1rem; }
.rate__score{ font-size:3rem; font-weight:800; color:var(--green); line-height:1; letter-spacing:-.03em; }
.rate__word{ font-size:1.0625rem; font-weight:800; }
.rate__count{ font-size:0.8125rem; color:var(--text-3); font-weight:600; margin-top:0.125rem; }
.rate__btn{ width:100%; margin-top:1.25rem; }

/* подборки */
.sets{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(15rem,1fr);
  gap:1.25rem; overflow-x:auto; padding-bottom:0.5rem; scrollbar-width:none;
}
.sets::-webkit-scrollbar{ display:none; }
.set{
  position:relative; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden;
  display:flex; align-items:flex-end; padding:1.25rem;
  background:linear-gradient(160deg,var(--c1),var(--c2));
  border:1px solid var(--line);
  transition:border-color .18s var(--e-out);
}
.set:hover{ border-color:var(--line-strong); }
.set span{ position:relative; z-index:2; font-size:1.0625rem; font-weight:800; line-height:1.25; }
.set::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 60%); }

@media (max-width:860px){
  .about{ grid-template-columns:1fr; }
  .show__media img{ object-position:60% 30%; }
  /* сбоку места нет: текст занимает всю ширину, постер убираем */
  .show__poster{ display:none; }
  .show__learn{ gap:0 1.5rem; }
}