/* -----------------------------------------------------------------
   video.css – responsive wrapper + poster fixes for Plyr
   ----------------------------------------------------------------- */

/* 1️⃣ Wrapper – fluid width, automatic height via aspect‑ratio */
.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 960px;               /* optional max‑size */
    margin: 0 auto;                  /* centre horizontally */
    background: #000;               /* fallback colour while loading */
    aspect-ratio: 16 / 9;            /* placeholder; overwritten by JS */
    overflow: hidden;                /* clip child elements if they spill */
}

/* 2️⃣ The <video> element itself – keep video frames from stretching */
.video-wrapper video {
    position: absolute;
    inset: 0;                        /* top/right/bottom/left = 0 */
    width: 100%;
    height: 100%;
    object-fit: contain;             /* preserve intrinsic aspect */
}

/* -----------------------------------------------------------------
   Plyr’s own poster element – we want it to behave like the video
   ----------------------------------------------------------------- */

/* Remove the default black background (we already have one on the wrapper) */
.plyr__poster {
    background: none;
}

/* The actual <img> inserted by Plyr – keep its proportions */
.plyr__poster img {
    width: 100%;
    height: 100%;
    object-fit: contain;             /* do NOT stretch */
    display: block;
}

/* -----------------------------------------------------------------
   Fallback for VERY OLD browsers that don’t understand aspect‑ratio
   ----------------------------------------------------------------- */
@supports not (aspect-ratio: 1) {
    /* The JS script adds a class like “ratio-4-3”. */
    .video-wrapper {
        height: 0;                 /* keep it collapsed before we know the ratio */
        padding-top: 56.25%;       /* 16:9 default (will be replaced) */
    }
    .video-wrapper.ratio-4-3 { padding-top: 75%; }          /* 4:3   */
    .video-wrapper.ratio-3-2 { padding-top: 66.6667%; }      /* 3:2   */
    .video-wrapper.ratio-21-9 { padding-top: 42.8571%; }    /* 21:9  */
}