/* Responsive video player – NASGB */

#video-container {
    --video-width: 600px;

    width: min(100%, var(--video-width));
    margin-inline: auto;
}

/* Video
#video-container video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 75vh;
    object-fit: contain;
    margin-inline: auto;
} */
    
    #video-container {
    --video-width: 600px;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: min(100%, var(--video-width));
    margin-inline: auto;
}

    

/* Controls */
#video-container #video-controls {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;

    width: 100%;
    margin: 0 auto;
    padding: 10px;

    background: #0371a8;
    border: 3px solid white;
    border-radius: 12px;
}

/* Buttons */
#video-container #video-controls button {
    background: #173747;
    border: 1px solid white;
    border-radius: 4px;
    color: white;
    padding: 8px 10px;
    cursor: pointer;
    font: inherit;
}

/* Keyboard focus */
#video-container #video-controls button:focus-visible,
#video-container #video-controls input:focus-visible {
    outline: 3px solid #ffdf59;
    outline-offset: 2px;
}

/* Seek bar */
#video-container #seek-bar {
    flex: 1 1 180px;
    min-width: 100px;
    max-width: 100%;
}

/* Volume */
#video-container #volume-bar {
    width: 80px;
    max-width: 100%;
}


/* Mobile video controls – two organized rows */
@media (max-width: 700px) {
    #video-container #video-controls {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 80px) auto;
        gap: 10px 8px;
        align-items: center;
        justify-content: center;
    }

    /* First row: Play/Pause + video position */
    #video-container #play-pause {
        grid-column: 1;
        grid-row: 1;
    }

    #video-container #seek-bar {
        grid-column: 2 / 6;
        grid-row: 1;
        width: 100%;
        min-width: 0;
    }

    /* Second row: Mute + volume + fullscreen */
    #video-container #mute {
        grid-column: 1;
        grid-row: 2;
    }

    #video-container #volume-bar {
        grid-column: 2 / 5;
        grid-row: 2;
        width: 100%;
        min-width: 0;
    }

    #video-container #full-screen {
        grid-column: 5;
        grid-row: 2;
    }
}