/* -------------------------------------------------------------------------
 * Velveflix child — vf-hero.css
 * Спринт B2 (2026-06-12): HERO-баннер главной (.vf-hero) + genre-rail (.vf-genrebar).
 * Портировано из _vf-preview/vf-preview.css (строки 78-86, 118, 147-162, 317-320).
 * Все значения на токенах vf-tokens.css (0 хардкодов). Разметка под .vf-scope.
 * Зависимость: vf-components.css (енкью раньше) — кнопки/бейджи могут жить там,
 * но дублируем минимально, чтобы hero работал автономно на главной.
 * ------------------------------------------------------------------------- */

/* ---------- Hero ---------- */
.vf-scope .vf-hero{position:relative; min-height:clamp(360px,52vh,520px); display:flex; align-items:flex-end;
  border-radius:var(--vf-radius-lg); overflow:hidden; margin-top:var(--vf-space-5)}
.vf-scope .vf-hero__bg{position:absolute; inset:0}
.vf-scope .vf-hero__bg img{width:100%;height:100%;object-fit:cover;display:block}
.vf-scope .vf-hero__bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(14,15,19,.2) 0%,rgba(14,15,19,.55) 55%,rgba(14,15,19,.96) 100%),
  linear-gradient(90deg,rgba(14,15,19,.7) 0%,rgba(14,15,19,0) 60%)}
.vf-scope .vf-hero__body{position:relative; padding:var(--vf-space-6); max-width:640px}
.vf-scope .vf-hero__eyebrow{display:inline-flex;align-items:center;gap:6px; color:var(--vf-accent); font-size:var(--vf-fs-xs);
  font-weight:var(--vf-fw-bold); text-transform:uppercase; letter-spacing:var(--vf-ls-caps); margin-bottom:var(--vf-space-2)}
.vf-scope .vf-hero__title{font-size:var(--vf-fs-display); font-weight:var(--vf-fw-extrabold); line-height:var(--vf-lh-tight); letter-spacing:var(--vf-ls-tight); margin:0}
.vf-scope .vf-hero__metarow{display:flex; flex-wrap:wrap; align-items:center; gap:var(--vf-space-3); margin-top:var(--vf-space-3); color:var(--vf-text-2); font-size:var(--vf-fs-sm)}
.vf-scope .vf-hero__metarow .vf-badge--rating{background:var(--vf-rating-bg)}
.vf-scope .vf-hero__desc{margin-top:var(--vf-space-3); color:var(--vf-text-2); font-size:var(--vf-fs-sm); line-height:var(--vf-lh-normal);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vf-scope .vf-hero__cta{display:flex; gap:var(--vf-space-3); margin-top:var(--vf-space-5); flex-wrap:wrap}

/* Hero-локальные кнопки/бейдж (автономно, если vf-components их не задаёт) */
.vf-scope .vf-hero .vf-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px;
  border-radius:var(--vf-radius-pill); font-weight:var(--vf-fw-semibold); font-size:var(--vf-fs-sm);
  border:1px solid transparent; text-decoration:none; transition:background var(--vf-dur-fast), transform var(--vf-dur-fast)}
.vf-scope .vf-hero .vf-btn--accent{background:var(--vf-accent); color:var(--vf-text-on-accent,#1A0E0C)}
.vf-scope .vf-hero .vf-btn--accent:hover{background:var(--vf-accent-hover)}
.vf-scope .vf-hero .vf-btn--accent:active{transform:translateY(1px)}
.vf-scope .vf-hero .vf-btn--ghost{background:var(--vf-surface-2); color:var(--vf-text); border-color:var(--vf-line)}
.vf-scope .vf-hero .vf-btn--ghost:hover{border-color:var(--vf-line-strong); background:var(--vf-surface-3)}
.vf-scope .vf-hero .vf-badge{display:inline-flex; align-items:center; gap:4px; padding:3px 7px; border-radius:var(--vf-radius-pill);
  font-size:var(--vf-fs-xs); font-weight:var(--vf-fw-semibold)}
.vf-scope .vf-hero .vf-badge--rating{color:var(--vf-rating)}

/* ---------- genre rail on home ---------- */
.vf-scope .vf-genrebar{display:flex;gap:var(--vf-space-2);overflow-x:auto;padding-bottom:var(--vf-space-2);scrollbar-width:none;margin-top:var(--vf-space-5)}
.vf-scope .vf-genrebar::-webkit-scrollbar{display:none}
.vf-scope .vf-genrebar a{flex:0 0 auto;padding:8px 16px;border-radius:var(--vf-radius-pill);background:var(--vf-surface-2);border:1px solid var(--vf-line);font-size:var(--vf-fs-sm);color:var(--vf-text-2);white-space:nowrap;text-decoration:none}
.vf-scope .vf-genrebar a:hover{border-color:var(--vf-accent);color:var(--vf-text)}

@media (max-width:600px){
  .vf-scope .vf-hero__body{padding:var(--vf-space-5) var(--vf-space-4)}
}