/* Layout: карточка фильма — сначала эмоция (кадр, логотип, вердикт, характер фильма), затем справка (сюжет, кадры, люди, факты, оценки, материалы, похожие). */

/* Полки */
.row{display:grid;grid-auto-flow:column;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:4px var(--gutter) 18px;margin-inline:calc(var(--gutter) * -1);scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.row>*{scroll-snap-align:start}
.arrows{display:flex;gap:8px}
.arrow{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:1.3rem;line-height:1}
.arrow:hover{background:rgba(255,255,255,.2)}
.arrow:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
@media (max-width:760px){.arrows{display:none}}
.h3{font:700 1.25rem/1.2 var(--font-display);letter-spacing:-.02em}

/* Hero фильма */
.f-hero{position:relative;min-height:clamp(600px,88vh,920px);display:grid;align-items:end;overflow:hidden;isolation:isolate}
.f-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;z-index:-2}
.f-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.5) 40%,transparent 70%),
  linear-gradient(0deg,var(--bg) 0%,rgba(0,0,0,.55) 30%,transparent 60%)}
.f-hero .wrap{width:100%;padding-block:120px 48px;display:grid;gap:18px;justify-items:start}
.crumbs{display:flex;gap:8px;font:500 .85rem/1 var(--font-ui);color:rgba(245,245,247,.7)}
.crumbs a:hover{color:var(--fg)}
.f-logo{max-width:min(520px,82vw);max-height:170px;object-fit:contain;object-position:left bottom;filter:drop-shadow(0 4px 24px rgba(0,0,0,.5))}
.f-orig{font:500 1rem/1.3 var(--font-ui);color:rgba(245,245,247,.75)}
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:500 .95rem/1.3 var(--font-ui);color:rgba(245,245,247,.88)}
.meta-row .sep{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.pg{font:700 .72rem/1 var(--font-ui);padding:4px 6px;border:1px solid rgba(245,245,247,.6);border-radius:5px}
.ratings{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.rbox{display:grid;gap:4px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);min-width:120px}
.rbox b{font:800 1.6rem/1 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rbox small{font:500 .74rem/1.2 var(--font-ui);color:rgba(245,245,247,.72)}
.rbox.main{background:var(--fg);color:#000}
.rbox.main small{color:rgba(0,0,0,.6)}
.rbox.top{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
a.rbox{color:inherit;text-decoration:none}
.rbox.top small{color:rgba(255,255,255,.85)}
.rbox.ext{justify-content:center}
.rbox.ext a{font:600 .85rem/1.6 var(--font-ui);color:rgba(245,245,247,.9);white-space:nowrap}
.rbox.ext a:hover{color:var(--fg)}
.f-actions{display:flex;flex-wrap:wrap;gap:10px}
.btn-icon{width:44px;padding:0}
.btn[aria-pressed="true"]{background:var(--fg);color:#000}
.btn-glass[aria-pressed="true"] .ic-on{display:inline}.btn-glass .ic-on{display:none}
.btn-glass[aria-pressed="true"] .ic-off{display:none}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:#000;font:600 .9rem/1 var(--font-ui);padding:12px 18px;border-radius:999px;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* Вердикт + характер */
.lead-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px}
.panel{background:var(--card);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,32px);display:grid;gap:16px;align-content:start;min-width:0}
.verdict q{font:700 clamp(1.4rem,2.4vw,2rem)/1.18 var(--font-display);letter-spacing:-.025em;quotes:"«" "»";text-wrap:balance}
.author{display:flex;align-items:center;gap:12px}
.ava{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#3a3a40,#1d1d21);display:grid;place-items:center;font:700 .9rem/1 var(--font-display)}
.author b{display:block;font-weight:600}
.author span{font-size:.85rem;color:var(--fg-3)}
.fit{display:grid;gap:10px;padding-top:16px;border-top:1px solid var(--line)}
.fit dt{font:600 .78rem/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.fit dd{margin:0 0 6px;color:var(--fg-2)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:500 .82rem/1 var(--font-ui);padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--fg)}
.chip.hot{background:rgba(255,55,95,.16);color:#ff8fa3}
.traits{display:grid;gap:14px}
.trait{display:grid;grid-template-columns:150px minmax(0,1fr) 28px;gap:12px;align-items:center}
.trait span{color:var(--fg-2);font-size:.92rem}
.trait em{font:600 .85rem/1 var(--font-ui);font-style:normal;color:var(--fg-3);text-align:right;font-variant-numeric:tabular-nums}
.meter{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.meter i{height:8px;border-radius:4px;background:rgba(255,255,255,.1)}
.meter i.on{background:linear-gradient(90deg,var(--accent),#ff6b81)}
.after{padding-top:16px;border-top:1px solid var(--line);display:grid;gap:6px}
.after b{font:700 1.1rem/1.3 var(--font-display)}
@media (max-width:900px){.lead-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:440px){.trait{grid-template-columns:110px minmax(0,1fr) 24px}}

/* Сюжет */
.story{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.story p{font-size:1.12rem;line-height:1.65;color:var(--fg-2);max-width:62ch}
.story p+p{margin-top:14px}
.spoiler-free{display:inline-flex;align-items:center;gap:8px;font:600 .8rem/1 var(--font-ui);color:var(--up);margin-bottom:14px}
.tagline{font:700 1.3rem/1.3 var(--font-display);letter-spacing:-.02em;padding-left:18px;border-left:3px solid var(--accent)}
.tagline small{display:block;font:500 .8rem/1.4 var(--font-ui);color:var(--fg-3);margin-top:8px;letter-spacing:0}
@media (max-width:900px){.story{grid-template-columns:minmax(0,1fr)}}

/* Кадры */
.stills{grid-auto-columns:clamp(280px,34vw,520px)}
.still{border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9;background:var(--card)}
.still img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.still:hover img{transform:scale(1.04)}

/* Люди */
.cast{grid-auto-columns:128px}
.person{display:grid;gap:10px;justify-items:center;text-align:center}
.person .ph{width:112px;height:112px;border-radius:50%;overflow:hidden;background:var(--card)}
.person .ph img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.person b{font:600 .92rem/1.25 var(--font-display)}
.person span{font-size:.8rem;color:var(--fg-3);line-height:1.3}
.crew{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.crew-item{display:flex;gap:14px;align-items:center;padding:14px;border-radius:var(--r-md);background:var(--card)}
.crew-item .ph{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;background:var(--card-2);display:grid;place-items:center;font:700 1rem/1 var(--font-display);color:var(--fg-2)}
.crew-item .ph img{width:100%;height:100%;object-fit:cover}
.crew-item span{font-size:.78rem;color:var(--fg-3);display:block}
.crew-item b{font-weight:600}
@media (max-width:900px){.crew{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.crew{grid-template-columns:minmax(0,1fr)}}

/* Факты + оценки */
.facts-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}
.facts{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);margin:0}
.facts dt,.facts dd{padding-block:13px;border-top:1px solid var(--line);margin:0}
.facts dt{color:var(--fg-3);font-size:.9rem}
.facts dd{font-size:.95rem}
.facts dd small{color:var(--fg-3)}
.award{display:inline-flex;align-items:center;gap:6px;margin:2px 6px 2px 0;font:600 .8rem/1 var(--font-ui);padding:6px 10px;border-radius:999px;background:rgba(255,214,10,.12);color:var(--gold)}
.dist{display:grid;gap:6px}
.dist div{display:grid;grid-template-columns:24px minmax(0,1fr) 44px;gap:10px;align-items:center;font-size:.82rem;color:var(--fg-3);font-variant-numeric:tabular-nums}
.dist i{height:8px;border-radius:4px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.dist i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:4px;background:var(--fg-2)}
.users-top{display:flex;align-items:end;gap:14px}
.users-top b{font:800 3rem/1 var(--font-display);letter-spacing:-.04em}
.users-top span{color:var(--fg-3);font-size:.88rem;padding-bottom:6px}
.my-rate{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.my-rate label{font-weight:600}
.rate-line{display:flex;align-items:center;gap:14px}
.rate-line input{flex:1;accent-color:var(--accent);min-width:0}
.rate-line output{font:800 1.6rem/1 var(--font-display);min-width:2.6ch;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:900px){.facts-grid{grid-template-columns:minmax(0,1fr)}}

/* Материалы */
.mats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mat{display:grid;gap:10px;align-content:start}
.mat .img{aspect-ratio:16/10}
.mat h3{font:700 1.02rem/1.3 var(--font-display);letter-spacing:-.01em}
.mat .k{font:600 .75rem/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
@media (max-width:1000px){.mats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.mats{grid-template-columns:minmax(0,1fr)}}

/* Похожие */
.similar{grid-auto-columns:clamp(150px,14vw,200px)}
.sim{display:grid;gap:8px}
.sim .img{aspect-ratio:2/3;border-radius:var(--r-sm)}
.sim b{font:600 .95rem/1.25 var(--font-display)}
.sim span{font-size:.8rem;color:var(--fg-3)}
.why-sim{font-size:.78rem;color:var(--fg-2)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* Сборка на живых данных: <picture> не участвует в раскладке, одиночные панели — на всю ширину */
.f-hero>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;z-index:-2}
.f-title{display:block;font:800 clamp(2.4rem,6vw,4.5rem)/1 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.lead-grid--single{grid-template-columns:minmax(0,1fr)}
.facts-grid--single{grid-template-columns:minmax(0,1fr)}

/* Трейлер первой карточкой в «Кадрах» */
.still.trailer{position:relative}
.still.trailer a{display:block;width:100%;height:100%;position:relative}
.still.trailer a::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,.15) 60%)}
.play{position:absolute;z-index:2;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(255,255,255,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:grid;place-items:center;transition:transform .2s,background .2s}
.play::before{content:"";border-left:22px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:6px}
.still.trailer a:hover .play{transform:scale(1.08);background:rgba(255,255,255,.32)}
.still.trailer .cap{position:absolute;z-index:2;left:18px;bottom:16px;display:grid;gap:4px}
.still.trailer .cap b{font:700 1.15rem/1.2 var(--font-display)}
.still.trailer .cap span{font-size:.82rem;color:rgba(245,245,247,.75)}

@media (max-width:640px){
  .ratings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .rbox{min-width:0;padding:10px 12px}.rbox b{font-size:1.35rem}
  .rbox.ext{flex-direction:row;display:flex;gap:14px;align-items:center}
  .f-actions .btn{height:40px;padding:0 14px;font-size:.88rem}.f-actions .btn-icon{width:40px;padding:0}
  .f-hero .wrap{padding-block:110px 32px}
}