/* ==========================================================================
   VelveFlix v2 — DETAIL (title) + Where to Watch — scoped html.vf-2026
   Источник: VelveFlix.dc.html (DETAIL, WHERE TO WATCH, Top Cast, More Like This).
   Переопределяет прод .vf-title / .vf-scores / .vf-wtw / .vf-cast.
   WtW: только визуал; ссылки/rel/data НЕ трогаются (CSS-only).
   ========================================================================== */

/* ---------- лейаут ---------- */
html.vf-2026 .vf-title {
  display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-end;
  animation: vfUp .7s ease both;
}
@media (prefers-reduced-motion: reduce) { html.vf-2026 .vf-title { animation: none; } }

html.vf-2026 .vf-title__poster {
  flex: 0 0 auto; width: 236px; margin: 0;
}
html.vf-2026 .vf-title__poster img {
  width: 236px; aspect-ratio: 2/3; object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(0,0,0,.6);
  background: #15151a;
}
html.vf-2026 .vf-hd-badge {
  border-radius: 6px;
  background: rgba(255,255,255,.12);
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
}

html.vf-2026 .vf-title__info { flex: 1; min-width: 320px; }

/* display-заголовок */
html.vf-2026 .vf-title__h1 {
  font-family: var(--vf-font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 1; letter-spacing: -.02em;
  margin: 0 0 12px;
}

/* ---------- скор-чипы (TMDB / IMDb / RT / Metacritic) ---------- */
html.vf-2026 .vf-scores {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px;
  margin-bottom: 6px;
  font-size: 14.5px; font-weight: 600;
}
html.vf-2026 .vf-score {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; background: transparent; border: none;
}
/* TMDB-чип: жёлтая звезда + значение белым + серая метка "TMDB" справа */
html.vf-2026 .vf-score--tmdb { color: #ffd34d; }
html.vf-2026 .vf-score--tmdb::before {
  content: "★"; font-size: 16px; line-height: 1; color: #ffd34d;
}
html.vf-2026 .vf-score--tmdb .vf-score__val { color: #fff; font-weight: 700; }
html.vf-2026 .vf-score--tmdb .vf-score__val small { color: rgba(245,245,247,.45); font-weight: 500; }
html.vf-2026 .vf-score--tmdb .vf-score__src {
  color: rgba(245,245,247,.45); font-weight: 500; order: 3;
}
html.vf-2026 .vf-score__votes { color: rgba(245,245,247,.4); font-weight: 500; order: 4; }

/* IMDb-чип (жёлтая плашка на метке) — если данные появятся в разметке */
html.vf-2026 .vf-score--imdb { color: #f5f5f7; font-weight: 700; }
html.vf-2026 .vf-score--imdb .vf-score__src {
  background: #f5c518; color: #0a0a0c;
  padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 900;
}
/* RT-чип (томат) */
html.vf-2026 .vf-score--rt { color: #ff6347; }
html.vf-2026 .vf-score--rt::before { content: "🍅"; font-size: 14px; }
/* Metacritic */
html.vf-2026 .vf-score--meta .vf-score__src {
  background: #66cc33; color: #0a0a0c;
  padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 900;
}

html.vf-2026 .vf-title__metarow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px;
  font-size: 14.5px; font-weight: 600; margin: 14px 0 22px;
}
html.vf-2026 .vf-title__metarow > span { opacity: .55; }

/* жанр-пилюли */
html.vf-2026 .vf-title__genres { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 26px; }
html.vf-2026 .vf-title__genres a {
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  font-size: 13px; font-weight: 600; color: #f5f5f7;
  transition: background .2s;
}
html.vf-2026 .vf-title__genres a:hover { background: rgba(255,255,255,.16); }

html.vf-2026 .vf-title__overview p,
html.vf-2026 .vf-title__synopsis {
  font-size: 16.5px; line-height: 1.75; color: rgba(245,245,247,.82);
  max-width: 760px;
}

/* ---------- actions: главный CTA с glow ---------- */
html.vf-2026 .vf-title__actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
html.vf-2026 .vf-title__actions .vf-btn--accent {
  padding: 14px 28px; border-radius: 12px;
  background: var(--vf-accent); color: #fff; border: none;
  font-family: var(--vf-font-sans); font-size: 16px; font-weight: 800;
  box-shadow: 0 12px 32px var(--vf-accent-glow);
  transition: transform .25s, box-shadow .25s;
}
html.vf-2026 .vf-title__actions .vf-btn--accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px var(--vf-accent-glow);
}
html.vf-2026 .vf-title__actions .vf-cta-prov img {
  border-radius: 5px; width: 20px; height: 20px;
}
html.vf-2026 .vf-title__actions .vf-btn--ghost {
  padding: 14px 24px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.07);
  color: #fff; font-family: var(--vf-font-sans); font-size: 15px; font-weight: 700;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .25s;
}
html.vf-2026 .vf-title__actions .vf-btn--ghost:hover { background: rgba(255,255,255,.18); }

/* ---------- Top Cast ---------- */
html.vf-2026 .vf-cast { display: flex; gap: 26px; overflow-x: auto; padding-bottom: 8px; }
html.vf-2026 .vf-cast > * { flex: 0 0 auto; text-align: center; }
html.vf-2026 .vf-cast__av {
  width: 80px; height: 80px; border-radius: 999px;
  margin: 0 auto 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
  border: 2px solid rgba(255,255,255,.08);
  object-fit: cover;
}
html.vf-2026 .vf-cast__n { font-size: 13px; font-weight: 700; line-height: 1.25; }
html.vf-2026 .vf-cast__r,
html.vf-2026 .vf-cast__p { font-size: 11.5px; color: rgba(245,245,247,.5); margin-top: 2px; }

/* секционные заголовки detail */
html.vf-2026 .vf-block > h2,
html.vf-2026 .vf-block > h3,
html.vf-2026 .vf-cast-block h2,
html.vf-2026 .vf-cast-block h3 {
  font-family: var(--vf-font-display); font-weight: 700;
}

/* ---------- WHERE TO WATCH (косметика, разметку не трогаем) ---------- */
html.vf-2026 .vf-wtw__title { font-family: var(--vf-font-display); font-weight: 700; }
html.vf-2026 .vf-wtw__provider {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  transition: background .2s, transform .2s;
}
html.vf-2026 .vf-wtw__provider:hover {
  background: rgba(255,255,255,.1);
  transform: translateY(-2px);
}
html.vf-2026 .vf-wtw__logo { border-radius: 8px; overflow: hidden; }
html.vf-2026 .vf-wtw__region {
  border-radius: 6px; background: rgba(255,255,255,.12);
  font-size: 11px; font-weight: 800;
}

/* мобайл */
@media (max-width: 780px) {
  html.vf-2026 .vf-title { gap: 22px; }
  html.vf-2026 .vf-title__poster,
  html.vf-2026 .vf-title__poster img { width: 150px; }
  html.vf-2026 .vf-title__info { min-width: 0; flex-basis: 100%; }
  html.vf-2026 .vf-cast__av { width: 64px; height: 64px; }
}