/**
 * PME Video System — Responsive media for History/Timeline entries.
 *
 * Goals:
 * - Look good for ANY aspect ratio (1:1, 9:16, 16:9, etc.)
 * - Fully responsive on mobile + desktop
 * - No stretching, no distortion, no ugly fixed heights
 * - Stable inside history cards and <details> toggles
 *
 * Notes:
 * - <video> can be naturally responsive (width:100%, height:auto) and will
 *   respect its intrinsic aspect ratio.
 * - <iframe> needs an aspect ratio hint. We use a CSS variable --pme-ar
 *   set by JS when possible, with a safe default.
 * - WordPress MediaElement (.wp-video / .mejs-*) can inject fixed sizing.
 *   We harden it so it behaves inside our wrapper.
 */

.pme-video-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:100%;
    border-radius:16px;
    overflow:hidden;
    background:transparent;
}

/* Native video: ratio-agnostic, responsive, no distortion */
.pme-video-wrapper video{
    width:auto !important;
    height:auto !important;
    display:block;
    max-width:100% !important;
    max-height:80vh;
    background:transparent;
    object-fit:contain;
}


/* Iframes: keep responsive using an aspect-ratio hint */
.pme-video-wrapper iframe{
    width:100% !important;
    height:auto !important;
    display:block;
    border:0;
    aspect-ratio: var(--pme-ar, 16 / 9);
    background:transparent;
}

/* Optional legacy classes: if present, map to a ratio variable (back-compat) */
.pme-video-wrapper.pme-16-9{ --pme-ar: 16 / 9; }
.pme-video-wrapper.pme-1-1{ --pme-ar: 1 / 1; }
.pme-video-wrapper.pme-9-16{ --pme-ar: 9 / 16; }

/* WordPress [video] output uses MediaElement wrappers that can force fixed sizing.
   Force them to behave naturally inside our wrapper. */
.pme-video-wrapper .wp-video,
.pme-video-wrapper .wp-video-shortcode,
.pme-video-wrapper .mejs-container,
.pme-video-wrapper .mejs-inner,
.pme-video-wrapper .mejs-mediaelement{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 !important;
    position:relative !important;
}

/* Ensure the MediaElement <video> fills correctly */
.pme-video-wrapper .mejs-container video{
    width:100% !important;
    height:auto !important;
    object-fit:contain;
}

/* Native fullscreen controls should remain visible on mobile */
.pme-video-wrapper video::-webkit-media-controls-enclosure{
    overflow:visible;
}

/* History card spacing */
.pme-history-card .pme-video-wrapper{
    margin-top:8px;
}

@media (max-width: 600px){
    .pme-video-wrapper video{
        max-height:65vh;
    }
}


/* Center mixed-ratio media inside wrapper (prevents 1:1 / 9:16 sticking to top when container is taller) */
.pme-video-wrapper video,
.pme-video-wrapper iframe{
    margin:auto;
    object-position:center center;
}

/* MediaElement wrappers can still create extra height; center their media area */
.pme-video-wrapper .mejs-inner,
.pme-video-wrapper .mejs-mediaelement{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}


/* If wrapper contains a block container (figure/div), make it behave */
.pme-video-wrapper > figure,
.pme-video-wrapper > div.wp-video,
.pme-video-wrapper > div.mejs-container{
    margin:0 !important;
    max-width:100% !important;
    width:100% !important;
}


/* MediaElement often assumes 16:9; prevent it from reserving empty space for odd ratios */
.pme-video-wrapper .mejs-container{
    max-width:100% !important;
    height:auto !important;
}
.pme-video-wrapper .mejs-inner,
.pme-video-wrapper .mejs-mediaelement{
    height:auto !important;
}
.pme-video-wrapper .mejs-video{
    height:auto !important;
}


/* Fullscreen best practice: never top-stick, never reserve empty space */
.pme-video-wrapper video:fullscreen,
.pme-video-wrapper video:-webkit-full-screen{
    max-height:none !important;
    max-width:none !important;
    width:100vw !important;
    height:100vh !important;
    object-fit:contain !important;
    object-position:center !important;
    margin:auto !important;
    background:#000 !important;
}

/* Some browsers fullscreen the wrapper (if requested programmatically) */
.pme-video-wrapper:fullscreen,
.pme-video-wrapper:-webkit-full-screen{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100vw !important;
    height:100vh !important;
    background:#000 !important;
}