/* The video section of a solution page (Solution.astro) and its click-to-play thumbnail. */
#video{background:var(--bg);padding:88px 0}
.vid-hd{text-align:center;margin-bottom:40px}
.vid-hd p{color:var(--txt2);font-size:1rem;max-width:620px;margin:12px auto 0;line-height:1.9}
.vid-box{position:relative;max-width:960px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--md-sys-shape-corner-extra-large);overflow:hidden;background:#000;box-shadow:0 18px 50px rgba(15,40,70,.18)}
.vid-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-facade{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer}
.yt-facade img{width:100%;height:100%;object-fit:cover;display:block}
.yt-play{position:absolute;inset:0;margin:auto;width:84px;height:60px;border-radius:16px;background:rgba(0,0,0,.72);transition:background .2s,transform .2s}
.yt-play::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent #fff;transform:translateX(2px)}
.yt-facade:hover .yt-play,.yt-facade:focus-visible .yt-play{background:#e00;transform:scale(1.06)}
.yt-facade:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
@media(max-width:768px){#video{padding:56px 0}.vid-hd{margin-bottom:28px}.vid-box{border-radius:16px}.yt-play{width:68px;height:48px}}