/**
 * Stackd: Mobile-first Plyr + video tweaks.
 *
 * Fixes:
 *  1. Vertical (9:16) TV-bot videos no longer letterboxed by forced 4:3 ratio
 *     (we removed `ratio:'4:3'` from Plyr.setup as well).
 *  2. Plyr container never exceeds viewport width on small phones.
 *  3. Volume / mute button on mobile is now LARGE, bottom-left, always visible,
 *     with a contrasted background ring so it's impossible to miss.
 *  4. 2026-05-17: player wrapper now follows the video's NATURAL aspect ratio
 *     (Plyr.setup called with ratio:null). Video is centered on a black bg
 *     so portrait clips no longer get cropped/cut off by the 16:9 wrapper.
 */

/* ============ CORE: never overflow the viewport ============ */
.plyr {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: .5rem;
    overflow: hidden;
    background: #000;
}
.plyr--video,
.plyr video,
.plyr__video-wrapper {
    max-width: 100%;
    /* Cap player height so vertical 9:16 clips don't push the comments off
       screen. 78vh leaves room for the bottom controls + comment composer. */
    max-height: 78vh;
}
.plyr--video video {
    object-fit: contain;
    background: #000;
    width: 100%;
    height: 100%;
}
/* When Plyr ratio is null, the wrapper has no padding-bottom; ensure it
   actually receives a height by sizing it to the inner video. */
.plyr.plyr--video .plyr__video-wrapper {
    height: auto;
    min-height: 220px;
}
.container-post-media,
.container-post-media .post-media,
.post-media video,
.post-img-grid {
    max-width: 100% !important;
}
/* Grid posters / non-Plyr feed videos — same fit rules so creator content
   never gets visually clipped on phones. */
video.video-poster-html,
video.post-img-grid {
    width: 100% !important;
    max-height: 78vh;
    object-fit: contain;
    background: #000;
    border-radius: .5rem;
}

/* ============ DESKTOP: ensure usable volume slider ============ */
.plyr--video .plyr__volume input[type="range"] {
    min-width: 80px;
}

/* ============ MOBILE (phones, <768px) ============ */
@media (max-width: 767.98px) {
    /* The control bar — always visible, comfortable padding, dark gradient
       so it stays readable over bright video frames. */
    .plyr--video .plyr__controls {
        padding: 10px 12px !important;
        background: linear-gradient(transparent, rgba(0,0,0,.85)) !important;
        opacity: 1 !important; /* override any Plyr auto-hide */
    }
    /* Every control gets a thumb-friendly 48x48 minimum tap target */
    .plyr__controls .plyr__control {
        padding: 10px;
        min-width: 48px;
        min-height: 48px;
        font-size: 1rem;
    }

    /* === MUTE / VOLUME — make it the most prominent control === */
    /* Pin mute to the bottom-LEFT (where thumbs naturally rest) */
    .plyr--video .plyr__controls [data-plyr="mute"] {
        order: -1 !important;
        margin-right: 10px;
        width: 56px !important;
        height: 56px !important;
        background: rgba(255,255,255,.18) !important;
        border-radius: 50% !important;
        border: 2px solid rgba(255,255,255,.5) !important;
        box-shadow: 0 2px 6px rgba(0,0,0,.45);
        transition: background .15s ease, transform .15s ease;
    }
    .plyr--video .plyr__controls [data-plyr="mute"]:active {
        transform: scale(0.93);
        background: rgba(255,255,255,.32) !important;
    }
    /* The actual SVG icon inside the mute button — make it bigger */
    .plyr--video .plyr__controls [data-plyr="mute"] svg {
        width: 24px !important;
        height: 24px !important;
        color: #fff !important;
        fill: currentColor !important;
    }

    /* Force-show the volume slider next to the mute button (Plyr hides it
       on touch by default, leaving only the mute toggle). */
    .plyr--video .plyr__volume {
        display: flex !important;
        align-items: center;
        margin-right: 8px;
    }
    .plyr--video .plyr__volume input[type="range"] {
        display: block !important;
        min-width: 90px;
        width: 90px;
        height: 24px;
    }

    /* Keep the standard PLAY button visible too (don't let the bigger mute
       crowd it) */
    .plyr--video .plyr__controls [data-plyr="play"] {
        margin-left: 6px;
    }
}

/* ============ EXTRA-SMALL phones (<380px) — even tighter spacing ============ */
@media (max-width: 380px) {
    .plyr--video .plyr__volume input[type="range"] {
        min-width: 70px;
        width: 70px;
    }
    .plyr--video .plyr__controls .plyr__time {
        font-size: .75rem;
    }
}