.image-preview-trigger { cursor: zoom-in; }
.image-preview-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
html.image-preview-open { overflow: hidden; }
.image-lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 64px 72px 32px; border: 0; background: rgba(12,12,12,.96); color: #fff; box-sizing: border-box; }
.image-lightbox::backdrop { background: #0c0c0c; }
.image-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.image-lightbox figure { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.image-lightbox figure img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100% - 72px); min-height: 0; object-fit: contain; }
.image-lightbox figcaption { max-width: 900px; font: 14px/1.5 sans-serif; color: #ddd; text-align: center; overflow: auto; max-height: 56px; }
.image-lightbox button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #777; border-radius: 50%; background: #222; color: #fff; font: 32px/1 sans-serif; cursor: pointer; }
.image-lightbox button:hover { background: #444; }
.image-lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.image-lightbox button[hidden] { display: none; }
.lightbox-close { top: 12px; right: 16px; }
.lightbox-prev { left: 12px; top: calc(50% - 24px); }
.lightbox-next { right: 12px; top: calc(50% - 24px); }
@media (max-width: 600px) { .image-lightbox { padding: 72px 12px 88px; } .lightbox-prev { top: auto; bottom: 20px; left: calc(50% - 60px); } .lightbox-next { top: auto; bottom: 20px; right: calc(50% - 60px); } }
/* Narrative stills use an image-only preview. */
.film-detail-page:not(.dp-detail-page) .image-lightbox figcaption { display: none; }
.film-detail-page:not(.dp-detail-page) .image-lightbox figure img { max-height: 100%; }