/* Click-to-play YouTube cover for the Duo demo (site/duo-youtube-embed.py, site/duo-yt.js). No iframe until the visitor clicks. */
.yt-lite { position: relative; display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #111; }
.yt-lite a { position: absolute; inset: 0; display: block; background-size: cover; background-position: center; }
.yt-lite a i { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 14px; background: rgba(20, 20, 20, .82); transition: background .15s; }
.yt-lite a:hover i, .yt-lite a:focus-visible i { background: #f00; }
.yt-lite a i::after { content: ""; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff; }
.yt-lite a:focus-visible { outline: 3px solid #5b3df5; outline-offset: -3px; }
.yt-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 26.10.2026: inside the grid block .h-duo the .vis column shrank to 0 wide (the cover has only absolute children, so no intrinsic width) */
.shot-video, .shot-video .yt-lite { width: 100%; }
.h-duo .vis { width: 100%; min-width: 0; justify-self: stretch; }
/* play button smaller and translucent so it does not hide a word in the frame */
.yt-lite a i { width: 56px; height: 40px; margin: -20px 0 0 -28px; border-radius: 12px; background: rgba(20, 20, 20, .55); }
.yt-lite a i::after { left: 22px; top: 11px; border-width: 9px 0 9px 15px; }