/* Static film covers retain the existing image assets and typography. */
.film-card { display:block; color:inherit; text-decoration:none; }
.film-card:focus-visible { outline:2px solid white; outline-offset:8px; }
.film-card .video-cover { opacity:1; }
.video-container.portfolio-player { position:relative; width:100%; aspect-ratio:16 / 9; min-height:200px; }
.portfolio-player iframe { display:block; width:100%; height:100%; border:0; position:absolute; inset:0; }
.video-container.portfolio-player .portfolio-pending-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.portfolio-pending-message { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; margin:0; padding:20px; text-align:center; background:rgba(0,0,0,.25); color:white; font:inherit; }
.portfolio-watch-link { display:table; color:#ccc; margin:-65px 0 90px auto; font-size:.85rem; text-underline-offset:4px; }
.portfolio-watch-link:hover { color:white; }

.video-container.portfolio-cover-only .portfolio-static-cover { display:block; width:100%; height:100%; object-fit:cover; opacity:1; }

/* Use the same local poster as Film Work until the visitor starts playback. */
.portfolio-play-cover { position:absolute; inset:0; width:100%; height:100%; display:block; padding:0; border:0; background:#000; cursor:pointer; color:#fff; }
.video-container.portfolio-player .portfolio-play-image { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; opacity:1; filter:none; }
.portfolio-play-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding-left:5px; font-size:28px; background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.8); transition:background .2s; }
.portfolio-play-cover:hover .portfolio-play-icon { background:rgba(0,0,0,.85); }
.portfolio-play-cover:focus-visible { outline:3px solid white; outline-offset:-5px; }