/* ============================================================
   ChemSmog — YouTube video lightbox modal
   ============================================================ */

.cs-video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}
.cs-video-modal.is-open { display: flex; }

.cs-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 64, 84, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: cs-fade-in .2s ease forwards;
}

.cs-video-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(1100px, 92vw);
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: cs-pop-in .25s cubic-bezier(.2,.8,.4,1) forwards;
}

.cs-video-modal__player {
    width: 100%;
    height: 100%;
}
.cs-video-modal__player iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.cs-video-modal__close {
    position: absolute;
    top: -52px;
    right: 0;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.4);
    color: var(--cs-white);
    border-radius: 9999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, transform .15s ease;
}
.cs-video-modal__close:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.05);
}

@keyframes cs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-pop-in {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 575px) {
    .cs-video-modal__close { top: -44px; right: 8px; }
}