/* Front-page film dialog (js/film-dialog.js): a bordered 16:9 panel on larger screens, the whole screen on phones and
   small windows. The films themselves choose portrait or landscape from the space they get. */
.dn-film-open { overflow: hidden; }

.dn-film-dialog {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(18, 21, 27, 0.74);
    animation: dn-film-in 0.18s ease-out;
}

/* content-box, so the area inside the 6 px border is exactly 16:9: with the site's border-box the inside came out
   wider than the 16:9 video (1269 x 709 for a 1280 x 720 panel), which showed thin black bars at its sides */
.dn-film-panel {
    position: relative;
    box-sizing: content-box;
    width: min(1280px, calc(100vw - 60px), calc((100vh - 60px) * 16 / 9));
    aspect-ratio: 16 / 9;
    background: #fafaf8;
    border: 6px solid #ffffff;
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.dn-film-dialog--video .dn-film-panel { background: #111418; }

.dn-film-panel iframe,
.dn-film-panel video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.dn-film-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(29, 36, 48, 0.82);
    cursor: pointer;
}

.dn-film-close svg { width: 22px; height: 22px; fill: none; stroke: #fafaf8; stroke-width: 2.4; stroke-linecap: round; }
.dn-film-close:hover { background: rgba(29, 36, 48, 0.95); }
.dn-film-close:focus-visible { outline: 3px solid #e08a18; outline-offset: 2px; }

@media (max-width: 760px), (max-height: 560px) {
    .dn-film-dialog { padding: 0; background: #000; }
    .dn-film-panel { width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
}

@keyframes dn-film-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .dn-film-dialog { animation: none; }
}