/* 本站视频 player shell (static/js/lumos_player.js, templates/partials/lumos_video.html). Every video sits in a 16:9
   frame as wide as its container (as the theme's .video-container was), so its size follows the page column only;
   a portrait video is shown whole with black bars at the sides. The Video.js skin draws its own rounded corners
   (--media-border-radius, 28px by default), so the shell hands it the same radius: --lumos-radius, 8px unless a
   container sets another. */
.lumos-player {
    --media-border-radius: var(--lumos-radius, 8px);
    position: relative;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--lumos-radius, 8px);
    overflow: hidden;
}

.lumos-player > video,
.lumos-player media-i18n,
.lumos-player video-player,
.lumos-player video-skin {
    display: block;
    width: 100%;
    height: 100%;
}

.lumos-player > video {
    object-fit: contain;
    background: #000;
    border-radius: inherit;
}

/* The theme's .video-container is a 16:9 box made of padding (padding-bottom: 56.25%, height 0); the shell is the
   16:9 box now. */
.video-container.lumos-video-host {
    height: auto;
    padding-bottom: 0;
    overflow: visible;
}

/* Page fullscreen where elements cannot go fullscreen (iPhone): the frame fills the screen, the video is contained. */
.lumos-player.lumos-player--fullscreen {
    --lumos-radius: 0px;
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    aspect-ratio: auto;
}

html.lumos-player-lock,
html.lumos-player-lock body {
    overflow: hidden;
}