/* Video Layout Component Styles */

/* Large screens: split layout is the default — renders correctly before JS runs */
#right-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: 50%;
    transition: width 1s ease-in-out;
}

#right-panel.video-hidden {
    width: 100%;
}

#separator {
    display: block;
    position: absolute;
    top: 0;
    left: calc(50% - 1px);
    height: 100vh;
    width: 2px;
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
    background-color: #d1d5db;
    transition: left 1s ease-in-out, opacity 1s ease-in-out, background-color 0.2s ease-in-out;
}

#separator:hover {
    background-color: #60a5fa;
}

#separator.video-hidden {
    left: 0;
    width: 2px;
    opacity: 1;
    pointer-events: auto;
}

#separator.video-hidden:hover {
    background-color: #60a5fa;
}

#promo-video {
    width: 50%;
    opacity: 1;
    transition: width 1s ease-in-out, opacity 1s ease-in-out;
}

#promo-video.video-hidden {
    width: 0;
    opacity: 0;
}

/* Mobile: right panel goes full width, video and separator hidden */
@media (max-width: 767px) {
    #right-panel {
        width: 100%;
    }

    #separator {
        display: none;
    }
}