/* Reddgifs — single-video overrides for SHORTS (9:16).
   Loaded by reddgifs-template.php only on single videos carrying the `short`
   tag, layered on top of single-video.css. Scoped under .rg-single-page--short
   so it can never touch the normal landscape player. JS (shorts-player.js) sets
   the exact --rg-short-h / width so the frame fits the window and never runs
   past the fold; this file is the styling + a sane CSS fallback. */

/* Player + ads sit side by side; the 9:16 frame is narrow, so the wide gutter
   goes to the existing sidebar ad column. */
.rg-single-page--short .rg-single-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
}
.rg-single-page--short .rg-single-player-col {
    flex: 0 0 auto;
    width: auto;
}

/* The 9:16 frame. Height (and width) are set inline by shorts-player.js from the
   live viewport; aspect-ratio + the min() are the no-JS fallback. !important beats
   Video.js's inline landscape sizing. */
.rg-single-page--short .player-wrapper {
    height: var(--rg-short-h, min(74vh, 56.25vw)) !important;
    aspect-ratio: 9 / 16;
    width: auto !important;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 !important;
    position: relative;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

/* Force the theme's ENTIRE player chain to fill the frame. StreamTube nests the
   video inside .player-wrapper-ratio (a Bootstrap .ratio box) → .player-container
   → .player-embed → .player-embed-inner → video-js, and that ratio box computes a
   fixed ~660px height that overflows (and gets clipped by) our fitted wrapper,
   cutting off the bottom of the video. Collapse every layer to fill our box. */
.rg-single-page--short .player-wrapper .player-wrapper-ratio,
.rg-single-page--short .player-wrapper .player-container,
.rg-single-page--short .player-wrapper .player-embed,
.rg-single-page--short .player-wrapper .player-embed-inner,
.rg-single-page--short .player-wrapper .video-js,
.rg-single-page--short .player-wrapper .vjs-tech,
.rg-single-page--short .player-wrapper video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Neutralize the Bootstrap .ratio padding-top pseudo that creates the fixed height. */
.rg-single-page--short .player-wrapper .ratio::before {
    padding-top: 0 !important;
    content: none !important;
}
/* The theme's in-player header (title + close button) is redundant here — the
   page already shows the title above the player. Hide it so it can't overlap. */
.rg-single-page--short .player-wrapper .player-header { display: none !important; }
.rg-single-page--short .player-wrapper video {
    object-fit: cover !important;   /* aspect matches the frame, so this just guarantees edge-to-edge fill */
}
.rg-single-page--short .player-wrapper .vjs-poster {
    background-size: cover !important;
    background-position: center !important;
}

/* The wide gutter beside the narrow player carries the sidebar ad. */
.rg-single-page--short .rg-single-sidebar-col {
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
}

/* Mobile: immersive. The player LEADS the page (near full-width 9:16, just under
   the masthead) and the title + tags + ads flow below it — otherwise the title and
   the long tag list eat ~half the screen and the 9:16 frame collapses to a narrow
   strip. JS reserves a bottom band for the 320x50 sticky ad. */
@media (max-width: 900px) {
    .rg-single-page--short { display: flex; flex-direction: column; }
    .rg-single-page--short .rg-single-main { order: -1; }   /* player block first */
    .rg-single-page--short .rg-single-row { display: block; }
    .rg-single-page--short .rg-single-player-col { width: 100%; }
    .rg-single-page--short .player-wrapper { border-radius: 0; }
}