.film-hero{--hero-inset:16px;position:relative;isolation:isolate;width:calc(100% - var(--hero-inset) - var(--hero-inset));height:max(440px,calc(100svh - var(--header-size,80px) - var(--hero-inset) - var(--hero-inset)));display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;background:#e7edf4;color:#111d35;margin:var(--hero-inset);padding:0;border-radius:24px}
.film-visual{position:relative;grid-row:1;min-height:0;width:100%;height:100%;overflow:hidden}
.film-poster,.film-visual iframe{position:absolute;inset:0;width:100%;height:100%;display:block;border:0}
.film-poster img{display:block;width:100%;height:100%;object-fit:contain}
.film-visual iframe{opacity:0;pointer-events:none}
.film-hero.is-ready .film-visual iframe{opacity:1}
.film-actions{position:relative;grid-row:2;z-index:3;display:flex;gap:12px;align-items:center;justify-content:center;white-space:nowrap;padding:12px 160px 24px;margin:0}
.film-actions .button{font-size:clamp(11px,.95vw,15px);min-height:48px;padding:12px 22px;gap:24px}
.film-actions .button.primary{background:#2456e8;border-color:#2456e8;color:white}
.film-actions .button.secondary{background:#fff;border-color:#ccd6e4;color:#111d35}
.film-actions .button svg{color:inherit}
.film-actions .button:hover{translate:0 -2px}
.film-controls{position:absolute;right:3%;bottom:26px;z-index:4;display:flex;align-items:center;gap:20px}
.film-status{display:none}
.film-toggle{display:flex;align-items:center;gap:10px;min-height:44px;background:transparent;border:1px solid #b8c5d7;color:#022b66;border-radius:24px;padding:10px 16px;font:inherit;font-size:12px;cursor:pointer}
.film-toggle:hover{background:#fff9}.film-toggle:active{scale:.97}
.film-toggle>svg{width:12px;height:14px;flex:none;fill:currentColor;stroke:none}
.film-hero :is(a,button):focus-visible{outline:3px solid #022b66;outline-offset:5px}
.film-hero.is-static .film-visual iframe{display:none}.film-hero.is-static .film-status{display:none}
.film-review{background:#e7edf4;color:#022b66;padding:16px 24px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:13px}.film-review button{border:1px solid #9eb1cf;background:white;border-radius:6px;padding:8px 12px;color:#022b66;cursor:pointer}
@media(max-width:1000px) and (min-width:701px){.film-actions .button{min-height:40px;padding:8px 14px;gap:12px}.film-toggle{font-size:11px;min-height:40px;padding:8px 12px}}
@media(max-width:700px){
 .film-hero{--hero-inset:12px;border-radius:20px;height:max(620px,calc(100svh - var(--header-size,80px) - var(--hero-inset) - var(--hero-inset)))}
 .film-actions{padding:8px 24px 24px;gap:10px;flex-wrap:wrap;justify-content:center;white-space:normal}
 .film-actions .button{font-size:11px;min-height:42px;padding:10px 14px;gap:10px;justify-content:space-between}
 .film-controls{right:5.8%;top:2.5%;bottom:auto}
 .film-toggle{min-height:32px;padding:6px 10px;font-size:10px}
}
@media(max-width:380px){.film-actions .button{font-size:10px;padding:9px 12px;min-height:38px}}
@media(prefers-reduced-motion:reduce){.film-actions .button:hover{translate:none}.film-toggle:active{scale:none}}

@media(min-width:701px) and (max-width:1000px){.film-actions{justify-content:flex-start;padding-left:24px;padding-right:130px}}