/*
 * Video player chrome shared by every page that embeds the
 * partials/video-player.leaf partial (library lessons, For The Record,
 * the public watch page, share.leaf, the admin lesson/S3-manager preview
 * modals, and any future page that plays a video) — see
 * partials/video-player-assets.leaf for why this file must be linked
 * *after* Video.js's own video-js.min.css.
 *
 * Moved out of library.css (issue #310) because this styling is not
 * library-specific — For The Record uses it too — and library.css was
 * already over the repo's 800-line file cap.
 *
 * The control-bar skin below (issue #438) composes real Video.js
 * components via controlBar.children (see Public/js/video-player.js) and
 * restyles them here with scoped overrides, not a ground-up reset —
 * .video-js carries almost all of Video.js's own base behavior (slider
 * drag/keyboard handling, focus-visible glow, caption-menu positioning,
 * fullscreen), none of which is reimplemented here. `vjs-default-skin` is
 * dropped from every call site's elementClass as dead weight: Video.js
 * 8.16's own CSS never actually selects on that class.
 */

.video-card {
    padding: 0;
    max-width: 888px; /* 500px height * 16/9 = 888.89px */
    margin-left: auto;
    margin-right: auto;
}

.video-frame {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,0.08);
    background: #000;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    max-height: 500px;
}

/* Theater mode (issue #435) — .watch-layout (video-surfaces.css) now
   caps the whole row at calc(70vh * 16 / 9) and centers it, so this box
   just needs to fill its row at the right aspect ratio — no separate
   width-capping/centering of its own needed anymore.

   `max-height: 500px` on the base rule above is reset to `none` here:
   it was dead weight under the old padding-bottom trick (height was
   always 0 regardless of padding), but it is not dead once aspect-ratio
   gives this box a real computed height — confirmed by direct testing
   last round, where leaving it in place silently re-clipped the video
   back to 500px tall after this exact fix.

   Scoped to theater mode only — the default watch page,
   library/lesson.leaf, for-the-record.leaf, and share.leaf all share
   .video-frame and must render unchanged. */
.library-page.theater-mode .video-frame {
    height: auto;
    padding-bottom: 0;
    aspect-ratio: 16 / 9;
    width: 100%;
    max-height: none;
}

.video-frame video,
.video-frame .video-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Poster only (issue #409) — cropped to fill the 16:9 frame, matching the
   browse grid and admin list's thumbnail convention. Scoped to
   video.js's own poster <img>, not the video/.video-js rule above: actual
   playback must stay letterboxed (contain), only the poster should crop. */
.video-frame .vjs-poster img {
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.video-js .vjs-control-bar {
    background: linear-gradient(to top, rgba(8,11,19,0.92) 0%, rgba(8,11,19,0.78) 55%, rgba(8,11,19,0) 100%);
    font-size: 1rem;
    height: 3.6em;
    padding-top: 0.8em; /* reserves room for .vjs-progress-control, pulled out of flow below */
}

/* YouTube-style progress strip pinned above the button row instead of an
   inline flex segment. .vjs-control-bar is already Video.js's own
   positioning context (position: absolute), so no extra wrapper is needed.
   This only repositions the control — Video.js's own drag/keyboard
   handling and the :hover height-grow on .vjs-progress-holder (see
   video-js.min.css) are untouched. */
.video-js .vjs-progress-control {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 0.8em;
    margin: 0;
    padding: 0 0.6em;
}

.video-js .vjs-play-progress,
.video-js .vjs-volume-level {
    background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
}

.video-js .vjs-slider {
    background: rgba(255,255,255,0.3);
}

/* Video.js ships .vjs-custom-control-spacer as `display:none` by design —
   it's an opt-in flexible spacer. This is what pushes subsCapsButton /
   playbackRateMenuButton / fullscreenToggle to the right edge, YouTube-style,
   now that progressControl no longer occupies that space in the flex row. */
.video-js .vjs-control-bar .vjs-custom-control-spacer {
    display: block;
    flex: 1 1 auto;
}

/* Video.js 8.16's own base CSS unconditionally hides .vjs-current-time and
   .vjs-duration, and hides .vjs-time-divider via a second, always-on rule
   of its own — dead code in the stock skin (nothing rendered them), dormant
   until #438's composed control bar actually put them in the children list.
   :not(.vjs-live) keeps this scoped to on-demand playback: a live stream
   (none exist in this app today) hides these on purpose, via Video.js's own
   .vjs-live-scoped rules, and this override must not fight that if one is
   ever added. */
.video-js:not(.vjs-live) .vjs-control-bar .vjs-current-time,
.video-js:not(.vjs-live) .vjs-control-bar .vjs-duration,
.video-js:not(.vjs-live) .vjs-control-bar .vjs-time-divider {
    display: inline-block;
}

/* Subtle circular/rounded hover + focus affordance on every control-bar
   button. Purely a background addition — Video.js's own focus text-shadow
   glow (video-js.min.css, .vjs-control:focus) is untouched, so keyboard
   focus visibility is preserved. */
.video-js .vjs-control-bar .vjs-button:hover,
.video-js .vjs-control-bar .vjs-button:focus {
    background-color: rgba(255,255,255,0.15);
    border-radius: 4px;
}

.video-js .vjs-big-play-button {
    background-color: rgba(8,11,19,0.75);
    border: none;
    border-radius: 50%;
    width: 2.6em;
    height: 2.6em;
    line-height: 2.6em;
    margin-top: -1.3em;
    margin-left: -1.3em;
}

.video-js .vjs-big-play-button:hover,
.video-js .vjs-big-play-button:focus {
    background-color: rgba(56,189,248,0.85);
}

/* Real meaning for the `theme` export (library/lesson.leaf,
   for-the-record.leaf x2) that previously had no matching CSS anywhere in
   the repo (#438) — an accent-color swap on top of the same control-bar
   composition/layout above, not a second skin. Named after Video.js's own
   community "Forest" skin convention (green accent). */
.video-js.vjs-theme-forest .vjs-play-progress,
.video-js.vjs-theme-forest .vjs-volume-level {
    background: linear-gradient(90deg, #22c55e 0%, #15803d 100%);
}

.video-js.vjs-theme-forest .vjs-big-play-button:hover,
.video-js.vjs-theme-forest .vjs-big-play-button:focus {
    background-color: rgba(34,197,94,0.85);
}

/* Theater mode button (issue #435, watch.leaf only). Video.js's base CSS
   draws a generic icon-font glyph on every .vjs-icon-placeholder via a
   global :before rule; every stock button overrides it with its own
   class-scoped content (e.g. .vjs-fullscreen-control). This button has no
   such Video.js-provided override, so the glyph would render underneath
   the inline SVG icon set via JS unless suppressed here. */
.video-js .vjs-theater-mode-toggle .vjs-icon-placeholder:before {
    content: none;
}

/* Sized in em, not a hardcoded pixel value on the SVG itself, to match
   .vjs-icon-placeholder:before's own 1.8em convention (28.8px at the
   control bar's 16px base font-size) — every native Video.js icon
   (play, volume, fullscreen, etc.) scales this way, so this one should
   track the same base font-size instead of drifting out of proportion
   if it ever changes. */
.video-js .vjs-theater-mode-toggle svg {
    width: 1.8em;
    height: 1.8em;
}