/* ==========================================================
   GAYZZEE CAMROOM
   SOC CAMERA LAYOUT V2

   DESKTOP ONLY
========================================================== */


@media (min-width: 980px) {

    /*
     * Geen grote focuscam.
     * Alle live cams worden gelijkwaardig getoond.
     */

    #focusCam {
        display:
            none !important;
    }


    /*
     * Arena blijft bestaan maar trekt de camera's
     * niet meer verticaal uit.
     */

    .cam-arena {
        align-items:
            start !important;

        align-content:
            start !important;

        justify-content:
            stretch !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;
    }


    /*
     * Cameragrid.
     * JS bepaalt hoeveel kolommen nodig zijn.
     */

    #satelliteCams {
        position:
            relative !important;

        inset:
            auto !important;

        top:
            auto !important;

        right:
            auto !important;

        bottom:
            auto !important;

        left:
            auto !important;

        display:
            grid !important;

        width:
            100% !important;

        height:
            auto !important;

        min-width:
            0 !important;

        min-height:
            0 !important;

        max-width:
            none !important;

        max-height:
            none !important;

        grid-template-columns:
            repeat(
                var(--gz-soc-cam-cols, 3),
                minmax(0, 1fr)
            ) !important;

        grid-template-rows:
            none !important;

        grid-auto-rows:
            max-content !important;

        align-items:
            start !important;

        align-content:
            start !important;

        justify-items:
            stretch !important;

        align-self:
            start !important;

        gap:
            10px !important;

        margin:
            0 !important;

        padding:
            10px !important;

        transform:
            none !important;

        animation:
            none !important;

        box-sizing:
            border-box !important;

        pointer-events:
            auto !important;
    }


    /*
     * Iedere camera exact SOC-stijl:
     * breed 16:9.
     */

    #satelliteCams > .satellite-cam {
        position:
            relative !important;

        inset:
            auto !important;

        top:
            auto !important;

        right:
            auto !important;

        bottom:
            auto !important;

        left:
            auto !important;

        width:
            100% !important;

        height:
            auto !important;

        min-width:
            0 !important;

        min-height:
            0 !important;

        max-width:
            none !important;

        max-height:
            none !important;

        aspect-ratio:
            16 / 9 !important;

        align-self:
            start !important;

        justify-self:
            stretch !important;

        margin:
            0 !important;

        padding:
            0 !important;

        overflow:
            hidden !important;

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                0.09
            ) !important;

        border-radius:
            17px !important;

        background:
            radial-gradient(
                circle at center,
                rgba(
                    155,
                    108,
                    255,
                    0.10
                ),
                rgba(
                    6,
                    8,
                    13,
                    0.98
                )
            ) !important;

        transform:
            none !important;

        animation:
            none !important;

        box-sizing:
            border-box !important;
    }


    #satelliteCams > .satellite-cam:hover,
    #satelliteCams > .satellite-cam.is-active,
    #satelliteCams > .satellite-cam.is-focus {
        transform:
            none !important;
    }


    /*
     * Sprekeraccent.
     */

    #satelliteCams > .satellite-cam.is-speaking {
        border-color:
            rgba(
                62,
                255,
                154,
                0.62
            ) !important;

        box-shadow:
            0 0 26px
            rgba(
                62,
                255,
                154,
                0.16
            ) !important;

        transform:
            none !important;
    }


    /*
     * Videobeeld vult 16:9 kaart.
     */

    #satelliteCams .satellite-visual {
        position:
            absolute !important;

        inset:
            0 !important;

        width:
            100% !important;

        height:
            100% !important;

        overflow:
            hidden !important;

        border-radius:
            0 !important;
    }


    #satelliteCams video,
    #satelliteCams .satellite-video {
        position:
            absolute !important;

        inset:
            0 !important;

        width:
            100% !important;

        height:
            100% !important;

        min-width:
            100% !important;

        min-height:
            100% !important;

        max-width:
            none !important;

        max-height:
            none !important;

        object-fit:
            cover !important;

        object-position:
            center center !important;

        border-radius:
            0 !important;

        background:
            #030408 !important;
    }


    /*
     * Placeholder.
     */

    #satelliteCams .satellite-initial {
        position:
            absolute !important;

        inset:
            0 !important;

        display:
            grid !important;

        place-items:
            center !important;
    }


    #satelliteCams .satellite-initial[hidden] {
        display:
            none !important;
    }


    /*
     * Naam en bediening boven video.
     */

    #satelliteCams .satellite-label {
        z-index:
            8 !important;
    }


    #satelliteCams .desktop-cam-tools {
        z-index:
            12 !important;
    }


    /*
     * Fullscreen.
     */

    .cam-arena:fullscreen #satelliteCams {
        height:
            auto !important;

        align-content:
            start !important;
    }

}