/* BESTAND: styles/10-project-overlay.css
 * Vergrote foto/video en overlaybediening.
 * Overzicht: HANDLEIDING.md → Vormgeving; laadvolgorde: index.html.
 */
/* ==========================================================================
   09. PROJECTS — VERGROTE WEERGAVE
   ==========================================================================  */

/* 09A. Dialoog en vergrote mediakaart ------------------------------------------------ */

/* 09A-1. Persistente native-fullscreen target -----------------------------------------
   Alleen deze gewone DIV mag de Fullscreen API in. Het <dialog> blijft verantwoordelijk
   voor modal/focusgedrag; <html> gaat nooit meer fullscreen. */
.sb-project-fullscreen-target {
    width: 100%;
    min-width: 0;
}

dialog.sb-integrated-media-host.sb-integrated-overlay > .sb-project-fullscreen-target {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.sb-project-fullscreen-target:fullscreen,
.sb-project-fullscreen-target:-webkit-full-screen {
    position: relative;
    display: block;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000000;
}

.sb-project-fullscreen-target:fullscreen::backdrop {
    background: #000000;
}

.sb-project-fullscreen-target:-webkit-full-screen {
    background: #000000;
}

.sb-project-fullscreen-target:fullscreen .sb-mobile-image-lightbox,
.sb-project-fullscreen-target:-webkit-full-screen .sb-mobile-image-lightbox {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.sb-project-fullscreen-target:fullscreen .sb-mobile-image-lightbox-stage,
.sb-project-fullscreen-target:-webkit-full-screen .sb-mobile-image-lightbox-stage {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
}

.sb-project-fullscreen-target:fullscreen .sb-mobile-image-lightbox-media,
.sb-project-fullscreen-target:-webkit-full-screen .sb-mobile-image-lightbox-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center center;
}


.sb-integrated-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2vw, 24px);
    background: rgba(10, 10, 10, 0.88);
    backdrop-filter: blur(10px);
    isolation: isolate;
}

.sb-integrated-slab.is-overlay-view {
    position: relative;
    inset: auto;
    width: min(1600px, 100%);
    height: min(94vh, 1000px);
    max-width: none;
    max-height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.8rem;
    background: #000000;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32);
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto;
}

.sb-integrated-slab.is-overlay-view .sb-integrated-media-frame {
    min-height: 0;
    background: #000000;
}

.sb-integrated-slab.is-overlay-view.is-audio-mode,
.sb-integrated-slab.is-overlay-view.is-audio-mode .sb-integrated-media-frame {
    background: #f7f4ef;
}

.sb-integrated-slab.is-overlay-view .sb-integrated-media-object {
    object-fit: contain;
    background: #000000;
    transform: none;
}

.sb-integrated-slab.is-overlay-view .sb-integrated-controls {
    flex: 0 0 auto;
}

.sb-integrated-slab.is-overlay-view .sb-integrated-caption-row {
    display: none;
}

.sb-integrated-overlay-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #111111;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.sb-integrated-overlay-close:hover {
    background: #ffffff;
    transform: scale(1.04);
}

.sb-integrated-overlay-close:focus-visible {
    outline: 2px solid var(--sb-story-accent);
    outline-offset: 4px;
}

.sb-integrated-slab:not(.is-overlay-view) .sb-integrated-media-frame {
    /* Alleen de buitenste slab knipt de hoeken af: geen tweede ronde naad. */
    border-radius: 0;
}

/* display: contents houdt dezelfde videonode in de pagina. Alleen de geopende dialoog krijgt een eigen kader. */

dialog.sb-integrated-media-host {
    display: contents;
    margin: 0;
    padding: 0;
    border: 0;
    max-width: none;
    max-height: none;
    color: inherit;
    background: transparent;
}

dialog.sb-integrated-media-host.sb-integrated-overlay {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: clamp(12px, 2vw, 24px);
    background: rgba(10, 10, 10, 0.88);
}

dialog.sb-integrated-media-host::backdrop {
    background: transparent;
}

@media (max-width: 720px) {
    .sb-integrated-overlay {
        padding: 10px;
    }

    .sb-integrated-slab.is-overlay-view {
        width: 100%;
        height: calc(100dvh - 20px);
        border-radius: 1.1rem;
    }

    .sb-integrated-overlay-close {
        top: 12px;
        right: 12px;
        width: 42px;
        height: 42px;
    }

    dialog.sb-integrated-media-host.sb-integrated-overlay {
        padding: 10px;
    }
}


/* 09B. Mobiele image-lightbox --------------------------------------------------------
   Een afbeelding gebruikt op kleine schermen een eigen, minimale fullscreen viewer.
   Desktop en de bestaande video/audio-overlay blijven ongewijzigd. */
@media (max-width: 1080px), (max-height: 540px) {
    dialog.sb-integrated-media-host.sb-integrated-overlay.is-mobile-image-lightbox {
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        overflow: hidden;
        background: #000000;
        backdrop-filter: none;
    }

    .sb-mobile-image-lightbox {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 100dvh;
        overflow: hidden;
        background: #000000;
        color: #ffffff;
        animation: sb-mobile-lightbox-in 180ms cubic-bezier(0.22, 0.8, 0.2, 1) both;
    }

    .sb-mobile-image-lightbox-stage {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        overflow: hidden;
        background: #000000;
        /* Horizontale veegbewegingen worden door de bestaande project-swipe
           afgehandeld; verticale browsergebaren en pinch-zoom blijven native. */
        touch-action: pan-y pinch-zoom;
        -webkit-tap-highlight-color: transparent;
    }

    .sb-mobile-image-lightbox-media {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: contain;
        object-position: center center;
        user-select: none;
        -webkit-user-drag: none;
    }

    .sb-mobile-image-lightbox-count {
        position: absolute;
        top: max(14px, env(safe-area-inset-top));
        left: max(16px, env(safe-area-inset-left));
        z-index: 3;
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 12px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.42);
        color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        line-height: 1;
        pointer-events: none;
    }

    .sb-mobile-image-lightbox-nav {
        position: absolute;
        left: max(16px, env(safe-area-inset-left));
        right: max(16px, env(safe-area-inset-right));
        bottom: max(18px, env(safe-area-inset-bottom));
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        pointer-events: none;
    }

    .sb-mobile-image-lightbox-step {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 0 0 4px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.42);
        color: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
        font-size: 2rem;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
        transition:
            background 0.16s ease,
            border-color 0.16s ease,
            transform 0.16s ease;
    }

    .sb-mobile-image-lightbox-step:active {
        background: rgba(255, 255, 255, 0.16);
        transform: scale(0.96);
    }

    .sb-mobile-image-lightbox-step:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 4px;
    }

    .sb-mobile-image-lightbox-close {
        position: absolute;
        top: max(14px, env(safe-area-inset-top));
        right: max(16px, env(safe-area-inset-right));
        z-index: 4;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 0 0 3px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        color: #111111;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
        font-size: 2rem;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition:
            background 0.16s ease,
            transform 0.16s ease;
    }

    .sb-mobile-image-lightbox-close:active {
        background: #ffffff;
        transform: scale(0.96);
    }

    .sb-mobile-image-lightbox-close:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 4px;
    }
}


@keyframes sb-mobile-lightbox-in {
    from {
        opacity: 0;
        transform: scale(0.992);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) and (max-width: 1080px),
       (prefers-reduced-motion: reduce) and (max-height: 540px) {
    .sb-mobile-image-lightbox {
        animation: none;
    }

    .sb-mobile-image-lightbox-step,
    .sb-mobile-image-lightbox-close {
        transition: none;
    }
}


/* 09C. Mobiele video-viewer ----------------------------------------------------------
   Video gebruikt dezelfde bestaande videonode als de inline projectplayer. Alleen de
   presentatie verandert naar fullscreen; zo blijven afspeelpositie, buffer en state
   behouden wanneer de overlay opent of sluit. */
@media (max-width: 1080px), (max-height: 540px) {
    dialog.sb-integrated-media-host.sb-integrated-overlay.is-mobile-video-lightbox {
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        overflow: hidden;
        background: #000000;
        backdrop-filter: none;
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-slab.is-overlay-view {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #000000;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-media-frame {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
        overflow: hidden;
        background: #000000;
        touch-action: pan-y pinch-zoom;
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-video-shell {
        width: 100%;
        height: 100%;
        min-height: 0;
        background: #000000;
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        video.sb-integrated-media-object {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
        background: #000000;
    }

    /* Één sluitknop is genoeg. De bovenste X blijft altijd zichtbaar; de tweede
       fullscreen/close-knop uit de gewone player verdwijnt in deze mobiele viewer. */
    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-overlay-close {
        top: max(14px, env(safe-area-inset-top));
        right: max(16px, env(safe-area-inset-right));
        width: 48px;
        height: 48px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.92);
        color: #111111;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-fullscreen {
        display: none;
    }

    /* De desktop-tabs voegen in fullscreen weinig toe. De actieve video blijft
       gewoon geselecteerd; terug op de projectpagina zijn de tabs weer zichtbaar. */
    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-tabs,
    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-caption-row {
        display: none;
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-controls {
        position: relative;
        z-index: 5;
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.28) 0%,
            rgba(0, 0, 0, 0.92) 100%
        );
        backdrop-filter: blur(12px);
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-control-row {
        min-height: 66px;
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-time {
        display: inline-flex;
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.75rem;
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        button.sb-integrated-progress-track {
        background-image: linear-gradient(
            rgba(255, 255, 255, 0.25),
            rgba(255, 255, 255, 0.25)
        );
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-control-icon,
    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-fullscreen-step {
        color: rgba(255, 255, 255, 0.9);
        border-color: rgba(255, 255, 255, 0.24);
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-fullscreen-arrows {
        display: inline-flex;
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-mini-play {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
    }
}

/* 09D. Lage landscape-viewports ------------------------------------------------------
   Telefoons in landscape hebben weinig verticale ruimte. Gebruik de veilige viewport-
   hoogte zodat browser-/systeembalken geen deel van het beeld afdekken. Media blijft
   altijd volledig zichtbaar met contain; video-controls liggen over het beeld heen. */
@media (orientation: landscape) and (max-height: 600px) {
    dialog.sb-integrated-media-host.sb-integrated-overlay.is-mobile-image-lightbox,
    dialog.sb-integrated-media-host.sb-integrated-overlay.is-mobile-video-lightbox {
        width: 100vw;
        height: 100svh;
        min-height: 0;
        max-height: 100svh;
        inset: 0;
        margin: 0;
        padding: 0;
    }

    .sb-mobile-image-lightbox {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .sb-mobile-image-lightbox-stage {
        inset: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 0;
    }

    .sb-mobile-image-lightbox-media {
        /* Het element vult exact de fullscreen-stage. object-fit: contain schaalt
           daarna de volledige foto binnen die vaste box, ook voor portraitbeelden. */
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: contain;
        object-position: center center;
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-slab.is-overlay-view {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-media-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding:
            env(safe-area-inset-top)
            env(safe-area-inset-right)
            env(safe-area-inset-bottom)
            env(safe-area-inset-left);
        box-sizing: border-box;
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-video-shell,
    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        video.sb-integrated-media-object {
        width: 100%;
        height: 100%;
        min-height: 0;
        max-width: 100%;
        max-height: 100%;
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        video.sb-integrated-media-object {
        object-fit: contain;
        object-position: center center;
    }

    /* De bediening neemt in landscape geen aparte videoruimte meer in. */
    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-controls {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 6;
        padding-bottom: max(4px, env(safe-area-inset-bottom));
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.48) 28%,
            rgba(0, 0, 0, 0.82) 100%
        );
        border-top: 0;
        backdrop-filter: none;
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-control-row {
        min-height: 54px;
        padding-top: 12px;
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    dialog.sb-integrated-media-host.is-mobile-video-lightbox
        .sb-integrated-overlay-close {
        top: max(10px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
        width: 44px;
        height: 44px;
    }

    .sb-mobile-image-lightbox-count {
        top: max(10px, env(safe-area-inset-top));
        left: max(12px, env(safe-area-inset-left));
        min-height: 36px;
    }

    .sb-mobile-image-lightbox-close {
        top: max(10px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
        width: 44px;
        height: 44px;
    }

    .sb-mobile-image-lightbox-nav {
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
    }

    .sb-mobile-image-lightbox-step {
        width: 44px;
        height: 44px;
    }
}