/* ============================================================
   Shared Video Player Modal
   ============================================================
   Styles for the in-page video player (js/components/video-modal.ts), used by
   the community videos page and the homepage Pilot Transmissions feed. Reuses
   the base .modal overlay + open/close animation (modals.css); only the content
   box (wider, 16:9 embed) and the floating close button are component-specific.
   Loaded globally so the modal works on any page that opens it. */

/* Sit above the mobile bottom tab bar (--z-mobile-tab-bar: 1200). The base
   .modal is only z-index 1000, so the tab bar would otherwise overlap (and clip)
   the player on mobile. */
.video-modal {
    z-index: var(--z-modal-low);
}

.video-modal-content {
    width: min(920px, 94vw);
    max-width: 920px;
    max-height: 90vh;
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* On mobile, modals.css turns every .modal into a bottom-anchored slide-up
   sheet. For a 16:9 video that pins the frame to the bottom of the screen,
   where the fixed tab bar clips it. The player is a centered media viewer, so
   opt out of the sheet treatment and keep it centred + fully on-screen.
   (modals.css explicitly allows opting out via own align-items/position.) */
@media (max-width: 768px) {
    .video-modal.modal,
    .video-modal.modal.modal-open {
        align-items: center;
        justify-content: center;
        padding: var(--spacing-md);
    }

    .video-modal.modal > .video-modal-content {
        width: min(920px, 92vw);
        max-width: 92vw;
        max-height: 86vh;
        margin: 0;
        border: 1px solid var(--neon);
        border-radius: 0;
        padding-top: 0;
        animation: none;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 16px var(--neon-glow);
    }

    /* No bottom-sheet grabber bar on the centred viewer. */
    .video-modal.modal > .video-modal-content::before {
        display: none;
    }
}

.video-modal-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.video-modal-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.video-modal-info {
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
}

.video-modal-title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-snug);
    color: var(--text);
}

.video-modal-channel {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--neon);
}

/* Floating close button over the video (overrides the base .modal-close flow). */
.video-modal-close {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    z-index: 5;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    background: rgba(6, 8, 5, 0.7);
    border: 1px solid var(--border);
    color: var(--text);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.video-modal-close:hover {
    border-color: var(--neon);
    color: var(--neon);
}