/* OctaDivision global reusable fullscreen media engine. */
html.odcp-fullscreen-open,
body.odcp-fullscreen-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.odcp-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: grid;
    place-items: center;
    padding: clamp(14px, 3vw, 48px);
    background:
        radial-gradient(circle at 16% 18%, rgba(24,119,242,.16), transparent 30%),
        radial-gradient(circle at 84% 82%, rgba(0,191,166,.12), transparent 30%),
        rgba(2, 10, 24, .955);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    cursor: zoom-out;
}

.odcp-fullscreen-overlay:focus { outline: none; }

.odcp-fullscreen-stage {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.odcp-fullscreen-stage > .is-odcp-fullscreen {
    width: min(94vw, 1600px) !important;
    max-width: 94vw !important;
    max-height: 92vh !important;
    margin: 0 !important;
    pointer-events: auto;
    cursor: default;
    isolation: isolate;
}

/* Browser-style 16:9 frames from the homepage/footer templates. */
.odcp-fullscreen-stage > .od-video-frame-v210.is-odcp-fullscreen,
.odcp-fullscreen-stage > .od-premium-video-frame.is-odcp-fullscreen,
.odcp-fullscreen-stage > .od-fullscreen-media.is-odcp-fullscreen {
    width: min(94vw, calc((88vh - 56px) * 1.7777778)) !important;
}

.od-fullscreen-trigger,
.od-video-expand-v210,
.od-video-expand-icon,
[data-od-fullscreen-trigger] {
    cursor: pointer;
    position: relative;
    z-index: 20;
    touch-action: manipulation;
}

.od-fullscreen-trigger:focus-visible,
.od-video-expand-v210:focus-visible,
.od-video-expand-icon:focus-visible,
[data-od-fullscreen-trigger]:focus-visible {
    outline: 2px solid #1877F2;
    outline-offset: 4px;
    border-radius: 8px;
}

.is-odcp-fullscreen .od-fullscreen-trigger,
.is-odcp-fullscreen .od-video-expand-v210,
.is-odcp-fullscreen .od-video-expand-icon,
.is-odcp-fullscreen [data-od-fullscreen-trigger] {
    cursor: zoom-out;
}

.odcp-fullscreen-overlay:fullscreen,
.odcp-fullscreen-overlay:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
}

@media (max-width: 1024px) {
    .odcp-fullscreen-overlay { padding: clamp(10px, 2.5vw, 26px); }
    .odcp-fullscreen-stage > .is-odcp-fullscreen { max-width: 96vw !important; }
    .odcp-fullscreen-stage > .od-video-frame-v210.is-odcp-fullscreen,
    .odcp-fullscreen-stage > .od-premium-video-frame.is-odcp-fullscreen,
    .odcp-fullscreen-stage > .od-fullscreen-media.is-odcp-fullscreen {
        width: min(96vw, calc((88vh - 52px) * 1.7777778)) !important;
    }
}

@media (max-width: 767px) {
    .odcp-fullscreen-overlay { padding: 10px; }
    .odcp-fullscreen-stage > .is-odcp-fullscreen { max-width: 97vw !important; max-height: 90vh !important; }
    .odcp-fullscreen-stage > .od-video-frame-v210.is-odcp-fullscreen,
    .odcp-fullscreen-stage > .od-premium-video-frame.is-odcp-fullscreen,
    .odcp-fullscreen-stage > .od-fullscreen-media.is-odcp-fullscreen {
        width: min(97vw, calc((86vh - 48px) * 1.7777778)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .odcp-fullscreen-overlay,
    .odcp-fullscreen-stage > .is-odcp-fullscreen { scroll-behavior: auto !important; }
}
