/**
 * Fichier  : /ott/vod/assets/css/style.php
 * Fonction : structure d'un contenu VOD
 */


/* ==================================================
   VARIABLES
================================================== */

#vod {
    --VOD-grid-gap: 1em;
}


/* ==================================================
   STRUCTURE
================================================== */

#vod {
    box-sizing: border-box;
    padding: var(--VOD-grid-gap);
}

#vod {
    display: grid;
    grid-template-columns: 70% 1fr;
    grid-template-rows: minmax(0, auto);
    align-items: stretch;
    gap: var(--VOD-grid-gap);
}


/* ==================================================
   PLAYER
================================================== */

#vod main {
    min-height: 0;
}

#vod main {
    padding: 8px;
}

#vod main {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.03)
        );
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    backdrop-filter: blur(18px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 10px 30px rgba(0,0,0,0.30);
}


/* ==================================================
   SIDEBAR
================================================== */

#vod aside {
    position: relative;
    min-height: 0;
    margin: 10px 10px 10px 0;
}

#vod aside {
    display: flex;
    flex-direction: column;
    gap: .5em;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media screen and (max-width: 1024px) {

    #vod {
        padding: 0;
    }

    #vod {
        grid-template-columns: 100%;
        gap: 0;
    }

    #vod main {
        padding: 0;
        border-radius: 0;
    }

    #vod aside {
        margin: 10px;
    }

}