/* ==========================================================================
   Velveflix — Компоненты Э1 (карточка / сетка / ряд) — ПИЛОТ
   Изоляция: всё под неймспейсом .vf-scope. Внутри .vf-scope локально
   переопределены 4 конфликтных токена на НОВЫЕ значения 2026 (победа
   специфичностью класса над старым :root из style.css). Старый :root не трогаем.
   Источник: ui_components.md §0–§2 + motion_spec.md §1,§5. Только var(--vf-*).
   Подключается ПОСЛЕ vf-tokens.css и child-style. Статус: пилот 1 жанр.
   ========================================================================== */

/* --- Контейнер неймспейса. Локальные оверрайды 4 конфликтных токенов
   УДАЛЕНЫ 2026-06-12: старый :root из style.css снят, глобальные значения
   --vf-bg/--vf-accent/--vf-text/--vf-radius-sm теперь и так = 2026 (vf-tokens.css). --- */
.vf-scope{
  color: var(--vf-text);
  /* Сброс контекста: на архивах movies/tvshows перед сеткой идут float-модули
     Dooplay (slider/featured) — без BFC грид сжимался к правому краю и давал
     горизонтальный overflow. display:flow-root создаёт BFC и клирит флоаты. */
  display: flow-root;
  clear: both;
}

/* ========================= §0 Базовые утилиты ========================= */
.vf-scope .vf-container{
  max-width: var(--vf-container-max);
  margin-inline: auto;
  padding-inline: var(--vf-container-pad);
}
@media (min-width:768px){
  .vf-scope .vf-container{ padding-inline: var(--vf-container-pad-lg); }
}

.vf-scope .vf-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@keyframes vf-shimmer{ 0%{background-position:-150% 0} 100%{background-position:150% 0} }
.vf-scope .vf-skeleton{
  background:linear-gradient(90deg, var(--vf-skeleton) 0%, var(--vf-skeleton-shine) 50%, var(--vf-skeleton) 100%);
  background-size:300% 100%;
  animation: vf-shimmer 1.4s linear infinite;
  border-radius: var(--vf-radius-md);
}
@media (prefers-reduced-motion: reduce){
  .vf-scope .vf-skeleton{ animation:none; background: var(--vf-skeleton); }
}

.vf-scope .vf-clamp-2{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ========================= §1 Карточка .vf-card ========================= */
.vf-scope .vf-card{
  display:block; text-decoration:none; color:var(--vf-text);
  border-radius: var(--vf-radius-md);
  transition: transform var(--vf-dur-base) var(--vf-ease-standard);
}
.vf-scope .vf-card__poster{
  position:relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--vf-radius-md);
  overflow:hidden;
  background: var(--vf-surface-2);
  box-shadow: var(--vf-shadow-1);
  transition: box-shadow var(--vf-dur-base) var(--vf-ease-standard);
}
.vf-scope .vf-card__poster img{
  display:block; width:100%; height:100%;
  object-fit:cover;
  transition: filter var(--vf-dur-base) var(--vf-ease-standard);
}

/* Бейджи */
.vf-scope .vf-card__badge{
  position:absolute; top:var(--vf-space-2);
  display:inline-flex; align-items:center; gap:2px;
  font-size:var(--vf-fs-xs); font-weight:var(--vf-fw-semibold);
  line-height:1; padding:4px 6px; border-radius:var(--vf-radius-xs);
}
.vf-scope .vf-card__badge--rating{
  right:var(--vf-space-2);
  background:var(--vf-rating-bg); color:var(--vf-rating);
}
.vf-scope .vf-card__badge--rating .vf-ic-star{ width:.85em; height:.85em; fill:currentColor; }
.vf-scope .vf-card__badge--type{
  left:var(--vf-space-2);
  background:var(--vf-surface-3); color:var(--vf-text-2);
  text-transform:uppercase; letter-spacing:var(--vf-ls-caps);
}

/* Подпись */
.vf-scope .vf-card__title{
  margin:var(--vf-space-2) 0 0;
  font-size:var(--vf-fs-sm); font-weight:var(--vf-fw-semibold);
  line-height:var(--vf-lh-snug); color:var(--vf-text);
}
.vf-scope .vf-card__meta{
  margin:2px 0 0;
  font-size:var(--vf-fs-xs); color:var(--vf-text-muted);
  font-feature-settings:"tnum";
}

/* hover — только реальный указатель */
@media (hover:hover) and (pointer:fine){
  .vf-scope .vf-card:hover{ transform: translateY(-2px) scale(1.015); }
  .vf-scope .vf-card:hover .vf-card__poster{ box-shadow: var(--vf-shadow-poster-hover); }
  .vf-scope .vf-card:hover .vf-card__poster img{ filter: brightness(1.03); }
}
.vf-scope .vf-card:active{ transform: scale(.99); }
.vf-scope .vf-card:focus-visible{
  outline:2px solid var(--vf-focus-ring); outline-offset:2px;
  border-radius: var(--vf-radius-md);
}

/* empty (нет постера) */
.vf-scope .vf-card__poster--empty{
  display:grid; place-items:center; gap:var(--vf-space-2);
  background:var(--vf-surface-2); color:var(--vf-text-muted);
  text-align:center; padding:var(--vf-space-3); font-size:var(--vf-fs-xs);
}
.vf-scope .vf-card__poster--empty .vf-ic-film{ width:32px; height:32px; fill:currentColor; opacity:.6; }

/* ===================== §2A Сетка .vf-grid ===================== */
.vf-scope .vf-row__head{
  font-size:var(--vf-fs-h2); font-weight:var(--vf-fw-bold);
  line-height:var(--vf-lh-snug); color:var(--vf-text); margin:0 0 var(--vf-space-4);
}
.vf-scope .vf-grid-section{ clear:both; }
.vf-scope .vf-grid{
  display:grid;
  gap: var(--vf-grid-gap);
  grid-template-columns: repeat(3, minmax(0,1fr));          /* <480: 3 */
  width:100%;
}
@media (min-width:480px){ .vf-scope .vf-grid{ grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (min-width:768px){ .vf-scope .vf-grid{ grid-template-columns: repeat(5,minmax(0,1fr)); gap:var(--vf-grid-gap-lg); } }
@media (min-width:1024px){ .vf-scope .vf-grid{ grid-template-columns: repeat(6,minmax(0,1fr)); } }
@media (min-width:1280px){ .vf-scope .vf-grid{ grid-template-columns: repeat(7,minmax(0,1fr)); } }

/* empty-состояние сетки */
.vf-scope .vf-row__empty{
  padding: var(--vf-space-8) var(--vf-container-pad);
  text-align:center; color:var(--vf-text-muted); font-size:var(--vf-fs-body);
  display:grid; gap:var(--vf-space-4); place-items:center;
}

/* ===================== §5 Появление сетки (motion) =====================
   Прячем секцию ТОЛЬКО когда JS активен (класс .vf-js на .vf-scope ставит
   vf-components.js). Без JS / до его старта — контент сразу виден (нет FOUC,
   SEO-safe, LCP не задержан спрятанным контейнером). */
.vf-scope.vf-js .vf-grid-section{
  opacity:0; transform:translateY(8px);
  transition: opacity var(--vf-dur-slow) var(--vf-ease-out),
              transform var(--vf-dur-slow) var(--vf-ease-out);
}
.vf-scope.vf-js .vf-grid-section.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .vf-scope.vf-js .vf-grid-section{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   Velveflix — Э-rows: ряд-карусель .vf-row (главная).
   Источник: ui_components.md §2B + motion_spec.md §5. Только var(--vf-*).
   Изоляция: под .vf-scope (4 конфликтных токена уже переопределены выше в файле).
   Горизонтальный скролл + scroll-snap, стрелки только на десктопе (hover:hover),
   на мобайле нативный свайп. Появление ряда через IntersectionObserver (.vf-js).
   ВАЖНО: трек скроллится сам (overflow-x:auto), страница горизонтально НЕ едет.
   ========================================================================== */

.vf-scope .vf-row{ margin: 0 0 var(--vf-space-8); }

.vf-scope .vf-row__head-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--vf-space-4);
  margin-bottom: var(--vf-space-4);
}
.vf-scope .vf-row__head{
  font-size:var(--vf-fs-h2); font-weight:var(--vf-fw-bold);
  line-height:var(--vf-lh-snug); color:var(--vf-text); margin:0;
}
.vf-scope .vf-row__see-all{
  font-size:var(--vf-fs-sm); color:var(--vf-text-muted);
  text-decoration:none; white-space:nowrap; flex:0 0 auto;
}
.vf-scope .vf-row__see-all:hover{ color:var(--vf-accent); }

/* Трек: горизонтальный грид с snap. Скроллится только он, не страница. */
.vf-scope .vf-row__track{
  display:grid; grid-auto-flow:column;
  grid-auto-columns: 42%;                /* мобайл: ~2.3 карточки в кадре */
  gap: var(--vf-grid-gap);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline: var(--vf-container-pad);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-behavior:smooth;
  /* небольшой нижний отступ чтобы hover-подъём карточки не обрезался */
  padding-block: 2px 6px;
}
.vf-scope .vf-row__track::-webkit-scrollbar{ display:none; }
.vf-scope .vf-row__track > .vf-card{ scroll-snap-align:start; min-width:0; }

@media (min-width:480px){ .vf-scope .vf-row__track{ grid-auto-columns:30%; } }
@media (min-width:768px){
  .vf-scope .vf-row__track{ grid-auto-columns:20%; gap:var(--vf-grid-gap-lg);
    scroll-padding-inline:var(--vf-container-pad-lg); }
}
@media (min-width:1024px){ .vf-scope .vf-row__track{ grid-auto-columns:15%; } }
@media (min-width:1280px){ .vf-scope .vf-row__track{ grid-auto-columns:13%; } }

@media (prefers-reduced-motion: reduce){
  .vf-scope .vf-row__track{ scroll-behavior:auto; }
}

/* Стрелки — только реальный указатель (десктоп). */
.vf-scope .vf-row__nav{ display:none; gap:var(--vf-space-2); }
@media (hover:hover) and (pointer:fine){ .vf-scope .vf-row__nav{ display:flex; } }
.vf-scope .vf-row__arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--vf-radius-round);
  background:var(--vf-surface-3); color:var(--vf-text);
  border:1px solid var(--vf-line); cursor:pointer; padding:0;
  transition:background var(--vf-dur-fast) var(--vf-ease-standard),
             opacity var(--vf-dur-fast) var(--vf-ease-standard);
}
.vf-scope .vf-row__arrow:hover{ background:var(--vf-surface-4); }
.vf-scope .vf-row__arrow:focus-visible{ outline:2px solid var(--vf-focus-ring); outline-offset:2px; }
.vf-scope .vf-row__arrow:disabled{ opacity:.35; cursor:default; }
.vf-scope .vf-row__arrow svg{ width:18px; height:18px; fill:currentColor; }

/* Появление ряда (motion §5): прячем только при активном JS (.vf-js). */
.vf-scope.vf-js .vf-row{
  opacity:0; transform:translateY(8px);
  transition: opacity var(--vf-dur-slow) var(--vf-ease-out),
              transform var(--vf-dur-slow) var(--vf-ease-out);
}
.vf-scope.vf-js .vf-row.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .vf-scope.vf-js .vf-row{ opacity:1; transform:none; transition:none; }
}

/* Жанры-ряд (ссылки-чипы вместо карточек) — Genres widget. */
.vf-scope .vf-chips{
  display:flex; flex-wrap:wrap; gap:var(--vf-space-2);
}
.vf-scope .vf-chip{
  display:inline-flex; align-items:center;
  padding:8px 14px; border-radius:var(--vf-radius-round);
  background:var(--vf-surface-2); color:var(--vf-text-2);
  border:1px solid var(--vf-line); text-decoration:none;
  font-size:var(--vf-fs-sm); font-weight:var(--vf-fw-medium);
  line-height:1; min-height:36px;
  transition:background var(--vf-dur-fast) var(--vf-ease-standard),
             color var(--vf-dur-fast) var(--vf-ease-standard),
             border-color var(--vf-dur-fast) var(--vf-ease-standard);
}
.vf-scope .vf-chip:hover{
  background:var(--vf-surface-3); color:var(--vf-text);
  border-color:var(--vf-line-strong, var(--vf-line));
}
.vf-scope .vf-chip:focus-visible{ outline:2px solid var(--vf-focus-ring); outline-offset:2px; }

/* Контейнер главной: внутренний паддинг как у листингов. */
.vf-scope .vf-home{ padding-block: var(--vf-space-6); }

/* ===================== §1B Провайдер-бейдж на постере (S3) ===================== */
/* Топ-провайдер «где смотреть» — виден ДО клика (JustWatch/Reelgood-стиль).
 * Фикс-размер 28px → CLS-safe. Bottom-left, не пересекается с type/rating/wl-бейджами. */
.vf-scope .vf-card__prov{
  position:absolute; left:var(--vf-space-2); bottom:var(--vf-space-2);
  display:flex; align-items:center; pointer-events:none; z-index:1;
}
.vf-scope .vf-prov-logo{
  width:28px; height:28px; flex:0 0 28px;
  border-radius:7px; object-fit:contain; padding:2px;
  background:var(--vf-wtw-logo-bg);
  box-shadow:0 1px 4px rgba(0,0,0,.5);
}
@media (max-width:480px){
  .vf-scope .vf-card__prov{ left:6px; bottom:6px; }
  .vf-scope .vf-prov-logo{ width:24px; height:24px; flex-basis:24px; }
}