/* Sumparo · «Ролик» section v7 — the film is the centrepiece: own poster, one red play control, sound on the visitor's tap.
   16:9 on landscape screens, 9:16 on portrait (phones). Self-contained: does not depend on styles.css / app.js. */
.film7{position:relative;padding:clamp(64px,9vw,124px) clamp(12px,3.4vw,48px) clamp(64px,8vw,112px);background:transparent;color:#0e0d0c}
.film7-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin:0 auto clamp(22px,2.6vw,36px);padding:0 clamp(8px,1.7vw,24px);max-width:1440px}
.film7-kick{margin:0 0 14px;font:600 14px/1 "Inter",system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#8a7f76}
.film7-title{margin:0;font:800 clamp(52px,7.2vw,112px)/.88 "Sofia Sans Condensed","Arial Narrow",Impact,sans-serif;text-transform:uppercase;letter-spacing:.005em;color:#0e0d0c}
.film7-title em{font-style:normal;color:#ed422e}
.film7-lede{margin:0 0 6px;max-width:420px;font:400 19px/1.45 "Inter",system-ui,sans-serif;color:#3d352f}
.film7-frame{position:relative;margin:0 auto;width:min(100%,calc((100svh - 104px) * 16 / 9));aspect-ratio:16/9;border:3px solid #0e0d0c;border-radius:24px;overflow:hidden;background:#f4ebe4 url(/watch/sumparo-film-v7-poster-fix5-h.jpg) center/cover no-repeat;box-shadow:14px 16px 0 rgba(14,13,12,.92);max-width:1440px;isolation:isolate;scroll-margin-top:84px}
@media (orientation:portrait){.film7-frame{scroll-margin-top:70px;aspect-ratio:9/16;width:min(100%,calc((100svh - 90px) * 9 / 16));border-radius:18px;box-shadow:7px 8px 0 rgba(14,13,12,.92);background-image:url(/watch/sumparo-film-v7-poster-fix5-v.jpg)}}
.film7-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:transparent;cursor:pointer}
.film7-play{position:absolute;left:clamp(14px,2.4vw,34px);bottom:clamp(14px,2.3vw,32px);z-index:3;display:inline-flex;align-items:center;gap:clamp(10px,1.1vw,16px);padding:clamp(9px,1vw,14px) clamp(18px,2.1vw,30px) clamp(9px,1vw,14px) clamp(9px,1.1vw,16px);border:3px solid #0e0d0c;border-radius:999px;background:#ed422e;color:#fff;font:700 clamp(18px,1.6vw,22px)/1 "Inter",system-ui,sans-serif;box-shadow:6px 7px 0 rgba(14,13,12,.92);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.film7-play:hover{transform:translate(-1px,-1px);box-shadow:8px 9px 0 rgba(14,13,12,.92)}
.film7-play:active{transform:translate(3px,3px);box-shadow:3px 4px 0 rgba(14,13,12,.92)}
.film7-play:focus-visible,.film7-ctl button:focus-visible{outline:3px solid #0e0d0c;outline-offset:3px}
.film7-play i{display:flex;align-items:center;justify-content:center;width:clamp(36px,3.2vw,46px);height:clamp(36px,3.2vw,46px);border-radius:12px;background:#fff}
.film7-play i:after{content:"";margin-left:4px;border-left:clamp(14px,1.2vw,17px) solid #ed422e;border-top:clamp(9px,.8vw,11px) solid transparent;border-bottom:clamp(9px,.8vw,11px) solid transparent}
.film7-play small{font:600 clamp(16px,1.4vw,20px)/1 "Inter",system-ui,sans-serif;opacity:.88}
.film7-ctl{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:10px;padding:clamp(10px,1.4vw,18px);background:linear-gradient(to top,rgba(14,13,12,.38),rgba(14,13,12,0));opacity:0;pointer-events:none;transition:opacity .25s ease}
.film7.is-playing .film7-ctl,.film7.is-paused .film7-ctl{opacity:1;pointer-events:auto}
.film7.is-playing.is-idle .film7-ctl{opacity:0}
.film7-ctl button{flex:none;width:44px;height:44px;border-radius:12px;border:2.5px solid #0e0d0c;background:#fbf6f0;color:#0e0d0c;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.film7-ctl svg{width:22px;height:22px;display:block}
.film7-bar{flex:1;height:6px;border-radius:3px;background:rgba(251,246,240,.55);overflow:hidden;cursor:pointer}
.film7-bar b{display:block;height:100%;width:0;background:#ed422e}
.film7.is-playing .film7-play,.film7.is-paused .film7-play{display:none}
.film7 .demo-link{text-align:center;margin:clamp(28px,3vw,44px) 0 0;font:600 17px/1.5 "Inter",system-ui,sans-serif}
.film7 .demo-link a{color:#0e0d0c;text-underline-offset:5px}
html:not(.light) .film7{color:#f4ece5}html:not(.light) .film7-title{color:#f4ece5}html:not(.light) .film7-lede{color:#d9cfc6}html:not(.light) .film7-kick{color:#a59a90}html:not(.light) .film7 .demo-link a{color:#f4ece5}
html:not(.light) .film7-frame{border-color:#f4ece5;box-shadow:14px 16px 0 rgba(244,236,229,.18)}
@media (max-width:760px){.film7-head{display:block}.film7-lede{margin-top:14px;font-size:16px}.film7-kick{font-size:12px;margin-bottom:12px}.film7-title{font-size:clamp(46px,13.6vw,60px)}.film7 .demo-link{font-size:15px}}

/* Shared controls and full-screen canvas, also used by the 16:9 demo. */
.film7-ctl button{border-radius:50%}
.film7-frame:fullscreen{width:100%;max-width:none;height:100%;border:0;border-radius:0;box-shadow:none;background:#0e0d0c}
.film7-frame:fullscreen .film7-video{object-fit:contain}
.film7-bar:focus-visible{outline:2px solid #fff;outline-offset:5px}