/* 
 * Sticky Video Player Styles
 * Makes the video player stick to the top of the viewport when scrolling
 */

/* Sticky player class that will be added via JavaScript */
#playerwrapper.sticky {
    position: fixed;
    top: 77px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background-color: #000;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    /* Keep original width, don't stretch to full width */
    width: auto;
}

/* Keep iframe size the same when in sticky mode */
#playerwrapper.sticky #playerframe {
    /* Keep original dimensions */
    width: 960px;
    height: 542px;
}

/* Add padding to body when player is sticky to prevent content jump */
body.has-sticky-player {
    /* padding-top: var(--sticky-player-height, 0px); */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #playerwrapper.sticky #playerframe {
        max-height: 50vh;
    }
}