/* ==========================================================================
   Video player skin

   Loaded by BOTH the video page (video_view_videojs7.tpl.php) and the embed
   (modules/video/embed/videojs7.php), so the two cannot drift apart. It sits on
   top of the vendor "cent" skin and restyles it to match the site: glass
   surfaces, the pink->purple gradient, hairline borders and the same rounding
   the video cards use.

   TOKENS. Every colour is `var(--site-token, literal)`. On the site the tokens
   from css/src/10-tokens.css win, so re-theming the site re-themes the player.
   The embed is a bare page with no combined.css, so there the literals apply -
   which is why they are spelled out rather than left to inherit.

   !important is used deliberately and only where the vendor skin sets the same
   property with it; without it those rules win regardless of source order.
   ========================================================================== */

.video-js {
  --p-accent:      var(--color-accent-pink, #ff2e97);
  --p-accent-2:    var(--color-accent-purple, #a855f7);
  --p-gradient:    var(--gradient-primary, linear-gradient(120deg, #ff2e97 0%, #e0219a 48%, #a855f7 100%));
  --p-surface:     var(--glass-bg-strong, rgba(12, 14, 22, .78));
  --p-surface-2:   var(--color-surface-raised, #1a1e2b);
  --p-text:        var(--color-text-primary, #e8eaf0);
  --p-text-dim:    var(--color-text-secondary, #98a2b8);
  --p-border:      var(--color-border, rgba(255, 255, 255, .08));
  --p-border-warm: rgba(255, 46, 151, .16);
  --p-glow:        var(--glow-pink-soft, 0 0 14px rgba(255, 46, 151, .28));
  --p-radius:      var(--radius-md, 14px);
  --p-fast:        var(--transition-fast, .15s ease);

  font-family: var(--font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* --------------------------------------------------------------------------
   Shell - same rounding and edge treatment as a video card
   -------------------------------------------------------------------------- */
.video-js,
.video-js .vjs-tech,
.video-js .vjs-poster {
  border-radius: var(--p-radius);
}

.video-js {
  overflow: hidden;   /* keeps the corners on the video itself, not just the box */
}

/* --------------------------------------------------------------------------
   Control bar - glass, like the navbar
   -------------------------------------------------------------------------- */
.video-js .vjs-control-bar {
  align-items: center;
  -webkit-backdrop-filter: var(--glass-blur, blur(16px) saturate(150%));
  backdrop-filter: var(--glass-blur, blur(16px) saturate(150%));
  background: linear-gradient(to top, rgba(5, 7, 13, .92) 0%, rgba(5, 7, 13, .72) 60%, rgba(5, 7, 13, .38) 100%) !important;
  border-top: 1px solid var(--p-border-warm);
  color: var(--p-text) !important;
  height: 60px;
  padding: 0 6px;
}

/* --------------------------------------------------------------------------
   Buttons - calm at rest, accent on hover, matching the site's nav links
   -------------------------------------------------------------------------- */
.video-js .vjs-control,
.video-js .vjs-time-control,
.video-js .vjs-menu-button {
  color: var(--p-text-dim) !important;
  fill: var(--p-text-dim) !important;
  transition: color var(--p-fast), fill var(--p-fast), opacity var(--p-fast);
}

.video-js .vjs-button:hover,
.video-js .vjs-button:focus-visible,
.video-js .vjs-menu-button:hover {
  color: #fff !important;
  fill: #fff !important;
  text-shadow: var(--p-glow);
}

.video-js .vjs-button:focus-visible {
  border-radius: 6px;
  box-shadow: var(--ring-accent, 0 0 0 3px rgba(255, 46, 151, .4));
  outline: none;
}

.video-js .vjs-button > .vjs-icon-placeholder::before {
  line-height: 30px;
}

/* Time readout: tabular so the numbers stop jittering as they tick over. */
.video-js .vjs-current-time,
.video-js .vjs-duration,
.video-js .vjs-time-divider,
.video-js .vjs-remaining-time {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  /* Same margin/height as the buttons. The vendor gives these 40px height and
     margin-top:15px, which lands their centre 2.5px above every icon in the bar. */
  height: 30px;
  line-height: 30px;
  margin-top: 20px;
}

.video-js .vjs-current-time { color: var(--p-text) !important; }

/* --------------------------------------------------------------------------
   Progress bar

   The vendor skin builds this in three absolutely-positioned pieces inside a
   25px hit area: a 3px track drawn as .vjs-slider::before at top:10px, with
   .vjs-load-progress and .vjs-play-progress laid over it at the same offset.
   Styling .vjs-progress-holder directly - the obvious move - paints the whole
   25px hit area instead of the bar, giving a thick grey band. Each piece is
   restyled here in place, and the three have to keep the same height/top or
   they come apart.
   -------------------------------------------------------------------------- */
.video-js .vjs-progress-control .vjs-slider::before {
  background: rgba(255, 255, 255, .16);
  border-radius: 999px;
  height: 4px;
  top: 10px;
  transition: height var(--p-fast), top var(--p-fast);
}

.video-js .vjs-progress-control .vjs-load-progress,
.video-js .vjs-progress-control .vjs-play-progress {
  border-radius: 999px;
  height: 4px;
  top: 10px;
  transition: height var(--p-fast), top var(--p-fast);
}

.video-js .vjs-progress-control .vjs-play-progress {
  background: var(--p-gradient) !important;
}

.video-js .vjs-progress-control .vjs-load-progress,
.video-js .vjs-progress-control .vjs-load-progress div {
  background: rgba(255, 255, 255, .22);
  border-radius: 999px;
}

/* Thickens under the cursor - easier to hit, and shows it is live. */
.video-js .vjs-progress-control:hover .vjs-slider::before,
.video-js .vjs-progress-control:hover .vjs-load-progress,
.video-js .vjs-progress-control:hover .vjs-play-progress {
  height: 6px;
  top: 9px;
}

/* Scrub handle: hidden at rest, so the bar stays a clean line. */
.video-js .vjs-progress-control .vjs-play-progress::before {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 46, 151, .35), 0 2px 6px rgba(0, 0, 0, .6);
  color: transparent;          /* the vendor puts a glyph here */
  content: '';
  height: 12px;
  opacity: 0;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity var(--p-fast);
  width: 12px;
}

.video-js .vjs-progress-control:hover .vjs-play-progress::before {
  opacity: 1;
}

/* Scrub tooltip */
.video-js .vjs-time-tooltip,
.video-js .vjs-mouse-display .vjs-time-tooltip {
  background: var(--p-surface-2);
  border: 1px solid var(--p-border);
  border-radius: 6px;
  box-shadow: var(--shadow-md, 0 6px 18px rgba(0, 0, 0, .5));
  color: var(--p-text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 3px 7px;
}

/* --------------------------------------------------------------------------
   Volume
   -------------------------------------------------------------------------- */
/* The vendor gives .vjs-volume-panel `height:30px; padding-top:20px` to leave
   room above for its vertical volume popup. That makes the panel 50px tall, so
   the flex-centred control bar puts its midpoint 10px below every other button -
   measured: volume centre 524.7 against fullscreen 514.7. The popup is
   absolutely positioned (bottom:23px) and does not need the padding to sit
   where it does, so dropping it is what brings the icon onto the same line. */
.video-js .vjs-control-bar .vjs-volume-panel {
  align-items: center;
  display: flex;
  height: 30px;
  /* Every other control carries margin-top:20px, which is how the vendor clears
     the 25px progress strip pinned to the top of the bar. The volume panel got
     padding-top:20px instead - and with border-box that squashes its content box
     to 10px rather than offsetting it, so the button overflowed 20px downward.
     Same margin as its siblings, no padding: measured centre 514.7, identical to
     the fullscreen button. */
  margin-top: 20px;
  padding-top: 0;
}

.video-js .vjs-volume-bar {
  background: rgba(255, 255, 255, .16);
  border-radius: 999px;
}

.video-js .vjs-slider:focus {
  box-shadow: none;
  text-shadow: none;
}

/* --------------------------------------------------------------------------
   Big play button - the site's gradient affordance, not a vendor rectangle
   -------------------------------------------------------------------------- */
.video-js .vjs-big-play-button {
  background: var(--p-gradient) !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), var(--p-glow);
  color: #fff !important;
  height: 84px;
  line-height: 84px;
  margin: 0;
  opacity: .94;
  transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease !important;
  width: 84px;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
  line-height: 84px;
}

.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
  box-shadow: 0 12px 36px rgba(0, 0, 0, .5), var(--glow-pink, 0 0 22px rgba(255, 46, 151, .42));
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.06) !important;
}

.video-js .vjs-big-play-button .vjs-svg-icon {
  /* The vendor sizes this 80px inside what is now an 84px circle and leaves it
     inline, so it sits on the 84px line-height baseline and lands low and right
     of centre. Absolutely centring it is deliberate: setting `display:flex` on
     the button would have been the tidier fix, but the vendor uses `display` to
     HIDE this button once playback starts (.vjs-has-started) at equal
     specificity, and this file loads later - so it would have won and left the
     play button on screen over the video. */
  fill: #fff !important;
  filter: none;               /* vendor drop-shadow reads as mud on the gradient */
  height: 38px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
}

/* The <svg> INSIDE that span is display:inline with vertical-align:baseline, so
   it sits on the text baseline of a span that inherits the button's
   line-height:84px - measured 10px below centre on the video page. Centring the
   span is not enough; the svg itself has to come out of inline flow. This is
   also why the embed looked right and the site did not: the two pages inherit
   different line-heights, so the baseline drop only showed on one of them. */
.video-js .vjs-big-play-button .vjs-svg-icon {
  line-height: 0;
}

.video-js .vjs-big-play-button .vjs-svg-icon > svg {
  display: block;
  height: 100%;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Menus (quality, captions, settings) - glass panels like the site's dropdowns
   -------------------------------------------------------------------------- */
.video-js .vjs-menu-content,
.video-js .vjs-menu .vjs-menu-content {
  -webkit-backdrop-filter: var(--glass-blur, blur(16px) saturate(150%));
  backdrop-filter: var(--glass-blur, blur(16px) saturate(150%));
  background-color: var(--p-surface) !important;
  border: 1px solid var(--p-border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 16px 36px rgba(0, 0, 0, .6));
  color: var(--p-text) !important;
  overflow: hidden;
  padding: 4px;
}

.video-js .vjs-menu-item {
  border-radius: 6px;
  font-size: 13px;
  padding: 6px 10px;
  transition: background-color var(--p-fast), color var(--p-fast);
}

.video-js .vjs-menu-item:hover,
.video-js .vjs-menu-item:focus {
  background-color: rgba(255, 255, 255, .07) !important;
  color: #fff !important;
}

.video-js .vjs-menu-item.vjs-selected {
  background: var(--p-gradient) !important;
  color: #fff !important;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Loading spinner
   -------------------------------------------------------------------------- */
.video-js .vjs-loading-spinner {
  border-color: rgba(255, 255, 255, .12);
  border-top-color: var(--p-accent);
}

/* --------------------------------------------------------------------------
   Site logo in the control bar (inserted by the player JS on both pages)
   -------------------------------------------------------------------------- */
.video-js .vjs-control-bar .vjs-site-logo {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  /* .vjs-control aligns the top with the sibling icons but hands out 37px of
     height against their 30px, which drops the logo's centre 3.5px below theirs.
     Matching their height is what puts it on the same line - measured, not
     guessed. Width has to be freed from the fixed button width too. */
  height: 30px;
  width: auto;
  opacity: .85;
  padding: 0 12px;
  transition: opacity var(--p-fast);
}

.video-js .vjs-control-bar .vjs-site-logo:hover,
.video-js .vjs-control-bar .vjs-site-logo:focus-visible { opacity: 1; }

.video-js .vjs-control-bar .vjs-site-logo img {
  display: block;
  max-height: 20px;
  width: auto;
}

/* --------------------------------------------------------------------------
   Narrow screens - the bar gets cramped, so shed the optional parts
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .video-js .vjs-control-bar { height: 48px; }
  .video-js .vjs-control-bar .vjs-site-logo { display: none; }
  .video-js .vjs-big-play-button {
    height: 64px;
    line-height: 64px;
    width: 64px;
  }
  .video-js .vjs-big-play-button .vjs-icon-placeholder::before { line-height: 64px; }
}

/* ==========================================================================
   Related-videos grid (nuevo)

   Shown when a video ends. Two things are going on here.

   1. THEMING. The cent skin paints a slate bar across the top, prints the title
      straight onto the thumbnail (unreadable over a bright frame) and uses
      video.js's own face. This restyles it to match the site.

   2. LAYOUT. nuevo sizes the panel in JS - a fixed 800px box, absolutely
      positioned, with every tile given a computed left/top/width/height - which
      left a large dead margin above and below the grid and did not respond to
      the player getting narrower. Everything positional below is therefore
      !important: it is beating inline styles the plugin writes at open time and
      rewrites on resize. Once the tiles are freed from those coordinates the
      grid handles the flow itself, so it fills the player and reflows on a
      phone with no JS involvement.

      Because the whole set is laid out at once, nuevo's paging is redundant and
      its arrows are hidden.

   Specificity note: the cent skin (misc/videojs/skins/cent/videojs.css) uses
   selectors like `.video-js .vjs-related .rel-item .rel-label`. player.css
   loads after it, so these rules only need to MATCH that specificity, not
   exceed it - which is why several look longer than they need to be.

   Markup nuevo generates:
     .vjs-overlay.vjs-grid > p                     <- the heading
     .vjs-related > .rel-block > .rel-parent > .rel-item > a
                          > span.rel-bg (thumbnail)
                          > span.rel-label (title)
                          > i (duration)
   ========================================================================== */

/* ---- panel ------------------------------------------------------------- */

/* Geometry is set per breakpoint in the grid section below - the skin centres
   the panel with left:50% + translateX(-50%) and that must be left alone.
   overflow stays hidden: paging works by sliding .rel-block sideways behind it. */

/* The heading is a bare <p> the skin paints slate grey across the full width.
   Drop the bar; the title alone reads fine over the dimmed video. */
.video-js .vjs-overlay.vjs-grid > p {
  background: none;
  color: #fff;
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0;
  padding: 12px 0 2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}

/* The panel and its contents use the site face, not video.js's. */
.video-js .vjs-overlay.vjs-grid,
.video-js .vjs-overlay.vjs-grid p,
.video-js .vjs-related .rel-item .rel-label,
.video-js .vjs-related .rel-meta,
/* The duration only - NOT every <i>, which would take the site face to the
   Font Awesome glyph in the rating and leave it blank. */
.video-js .vjs-related .rel-block .rel-item > a > i {
  font-family: var(--font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* ---- grid ----------------------------------------------------------------

   nuevo's qt() sizes the panel to min(playerWidth * 0.8, 800px) and then writes
   a pixel left/top/width/height onto every tile. The 800px ceiling is hard-coded,
   so on a wide player the thumbnails stayed small and the panel floated in the
   middle of a lot of empty black.

   Rather than re-implement the grid in JS, the panel is widened here and the
   tiles are re-placed in percentages, which reproduces the same arrangement at
   the panel's real size. This works because the two things that would otherwise
   break both read the RENDERED box, not the number qt() computed:

     - the arrows are positioned from (playerWidth - panel.offsetWidth) / 2
     - paging shifts .rel-block by (page - 1) * panel.offsetWidth

   so both follow the wider panel on their own. The gutter left either side is
   what the arrows sit in.

   The two schemes below mirror qt()'s own branch exactly: 3 columns x 2 rows,
   dropping to 2 x 1 once its working width falls under 480px - which happens at
   a player width of 600px, since it starts from playerWidth * 0.8. That is a
   PLAYER measurement, not a viewport one, so it is a container query: the player
   is only a fraction of the page inline, and a viewport query would switch at
   the wrong moment and leave the tiles overlapping.
   -------------------------------------------------------------------------- */

.video-js .vjs-overlay.vjs-grid {
  container-type: inline-size;
}

.video-js .vjs-related .rel-block {
  height: 100% !important;
  width: 100% !important;
}

.video-js .vjs-related .rel-parent {
  padding: 0;
}

/* Tiles keep a little breathing room without changing the grid arithmetic. */
.video-js .vjs-related .rel-item {
  height: calc(100% - 8px);
  margin: 4px;
  width: calc(100% - 8px);
}

/* --- wide: three columns, two rows, six to a page --- */
@container (min-width: 600px) {
  .video-js .vjs-related {
    --rel-strip: 46px;
    --rel-title-size: 12.5px;
    --rel-meta-size: 11px;
    --rel-meta-h: 22px;

    /* Two rows of: 16:9 thumbnail + title strip + meta row + the tile gutter.
       Worked out in container units so it tracks the player, and stated as a
       calc rather than an aspect-ratio because the card body is a fixed height
       added to a proportional picture. */
    height: calc((((100cqw - 108px) / 3 - 8px) * 0.5625
                  + var(--rel-strip) + var(--rel-meta-h) + 8px) * 2) !important;
    max-width: none !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 108px) !important;
  }

  .video-js .vjs-related .rel-parent {
    height: 50% !important;
    width: 33.3333% !important;
  }

  .video-js .vjs-related .rel-parent:nth-child(odd)  { top: 0 !important; }
  .video-js .vjs-related .rel-parent:nth-child(even) { top: 50% !important; }

.video-js .vjs-related .rel-parent:nth-child(1),
  .video-js .vjs-related .rel-parent:nth-child(2) {
  left: 0.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(3),
  .video-js .vjs-related .rel-parent:nth-child(4) {
  left: 33.3333% !important;
}

.video-js .vjs-related .rel-parent:nth-child(5),
  .video-js .vjs-related .rel-parent:nth-child(6) {
  left: 66.6667% !important;
}

.video-js .vjs-related .rel-parent:nth-child(7),
  .video-js .vjs-related .rel-parent:nth-child(8) {
  left: 100.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(9),
  .video-js .vjs-related .rel-parent:nth-child(10) {
  left: 133.3333% !important;
}

.video-js .vjs-related .rel-parent:nth-child(11),
  .video-js .vjs-related .rel-parent:nth-child(12) {
  left: 166.6667% !important;
}

.video-js .vjs-related .rel-parent:nth-child(13),
  .video-js .vjs-related .rel-parent:nth-child(14) {
  left: 200.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(15),
  .video-js .vjs-related .rel-parent:nth-child(16) {
  left: 233.3333% !important;
}

.video-js .vjs-related .rel-parent:nth-child(17),
  .video-js .vjs-related .rel-parent:nth-child(18) {
  left: 266.6667% !important;
}

.video-js .vjs-related .rel-parent:nth-child(19),
  .video-js .vjs-related .rel-parent:nth-child(20) {
  left: 300.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(21),
  .video-js .vjs-related .rel-parent:nth-child(22) {
  left: 333.3333% !important;
}

.video-js .vjs-related .rel-parent:nth-child(23),
  .video-js .vjs-related .rel-parent:nth-child(24) {
  left: 366.6667% !important;
}
}

/* --- narrow: two columns, one row, two to a page --- */
@container (max-width: 599px) {
  .video-js .vjs-related {
    --rel-strip: 34px;
    --rel-title-size: 11px;
    --rel-meta-size: 10px;
    --rel-meta-h: 19px;

    /* One row, same make-up as above. */
    height: calc(((100cqw - 76px) / 2 - 8px) * 0.5625
                 + var(--rel-strip) + var(--rel-meta-h) + 8px) !important;
    max-width: none !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 76px) !important;
  }

  .video-js .vjs-related .rel-parent {
    height: 100% !important;
    top: 0 !important;
    width: 50% !important;
  }

.video-js .vjs-related .rel-parent:nth-child(1) {
  left: 0.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(2) {
  left: 50.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(3) {
  left: 100.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(4) {
  left: 150.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(5) {
  left: 200.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(6) {
  left: 250.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(7) {
  left: 300.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(8) {
  left: 350.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(9) {
  left: 400.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(10) {
  left: 450.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(11) {
  left: 500.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(12) {
  left: 550.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(13) {
  left: 600.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(14) {
  left: 650.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(15) {
  left: 700.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(16) {
  left: 750.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(17) {
  left: 800.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(18) {
  left: 850.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(19) {
  left: 900.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(20) {
  left: 950.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(21) {
  left: 1000.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(22) {
  left: 1050.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(23) {
  left: 1100.0% !important;
}

.video-js .vjs-related .rel-parent:nth-child(24) {
  left: 1150.0% !important;
}
}

/* Arrows: the skin puts a 44px glyph in a 36px box, so any background sits
   under an overflowing chevron and reads as a blob. Colour the glyph instead.
   The translateY is the skin's vertical centring and must be kept on hover. */
.vjs-grid .vjs-arrow {
  background: none;
  border: none;
  color: rgba(255, 255, 255, .85);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .9));
  transition: color .15s ease, transform .15s ease;
}

.vjs-grid .vjs-arrow-prev {
  left: 10px !important;
  right: auto !important;
}

.vjs-grid .vjs-arrow-next {
  left: auto !important;
  right: 10px !important;
}

.vjs-grid .vjs-arrow:hover {
  background: none;
  color: var(--color-accent-pink, #ec4899);
  transform: translateY(-55%) scale(1.1);
}

/* ---- tiles ---------------------------------------------------------------

   Rebuilt as the site's video card. nuevo stacks everything on top of the
   thumbnail; the card puts the picture on top and the words underneath on a
   solid surface, which is the whole difference in how it reads.

   .rel-item becomes a flex column so .rel-bg (the thumbnail) takes the space
   left over and .rel-label (the title) sits below it at a fixed height. The
   duration stays absolutely positioned - it is a badge over the picture, so it
   is measured up from the title strip rather than from the bottom of the card.
   .rel-meta is the rating/views row added by the player script.
   -------------------------------------------------------------------------- */

.video-js .vjs-related .rel-item {
  background: var(--color-bg-elevated, #16161f);
  border: 1px solid transparent;
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.video-js .vjs-related .rel-item:hover {
  border-color: rgba(255, 46, 151, .5);
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .9);
  transform: translateY(-3px);
}

.video-js .vjs-related .rel-item a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  width: 100%;
}

.video-js .vjs-related .rel-bg {
  border-radius: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* Hover preview, fading in over the still so a clip that takes a moment to
   start does not blank the card in the meantime. */
.video-js .vjs-related .rel-preview {
  height: 100%;
  left: 0;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity .25s ease;
  width: 100%;
}

/* Title strip. Fixed height so the thumbnail above it keeps a predictable
   shape and the duration badge has something constant to sit above. */
.video-js .vjs-related .rel-item .rel-label {
  background: none;
  box-sizing: border-box;
  color: var(--color-text, #f3f3f7);
  display: block;
  flex: 0 0 var(--rel-strip, 46px);
  font-size: var(--rel-title-size, 12.5px);
  font-weight: 600;
  height: auto;
  left: auto;
  line-height: 1.3;
  margin: 0;
  max-height: none;
  overflow: hidden;
  padding: 7px 9px 0;
  position: static;
  text-shadow: none;
  top: auto;
  white-space: normal;
  width: 100%;
}

/* The clamp lives here rather than on .rel-label: -webkit-box is blockified on
   flex items, so on the label itself the two-line limit was silently dropped and
   a long title was cut mid-line instead of ending in an ellipsis. */
.video-js .vjs-related .rel-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Rating on the left, views on the right - the same row as .video-meta. */
.video-js .vjs-related .rel-meta {
  align-items: center;
  color: var(--color-text-secondary, #9a9aa8);
  display: flex;
  flex: 0 0 auto;
  font-size: var(--rel-meta-size, 11px);
  font-weight: 500;
  gap: 8px;
  justify-content: space-between;
  padding: 0 9px 8px;
  pointer-events: none;
}

.video-js .vjs-related .rel-rating.up   { color: var(--color-positive, #34d399); }
.video-js .vjs-related .rel-rating.down { color: var(--color-negative, #f87171); }

.video-js .vjs-related .rel-meta .rel-views {
  font-variant-numeric: tabular-nums;
}

/* Undo the skin's blanket <i> rule for the rating icon. */
.video-js .vjs-related .rel-block .rel-item .rel-meta i {
  background: none;
  border-radius: 0;
  bottom: auto;
  font-size: inherit;
  margin: 0;
  padding: 0;
  position: static;
  right: auto;
}

/* Duration badge, matching .duration-badge on the site's cards - measured up
   from the title strip so it sits on the picture, not on the card body.

   Scoped to the anchor's own child: the skin's selector is any <i> inside the
   tile, which also caught the thumbs-up in the injected rating row and threw it
   on top of the thumbnail. */
.video-js .vjs-related .rel-block .rel-item > a > i {
  background: rgba(0, 0, 0, .65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-sm, 6px);
  bottom: calc(var(--rel-strip, 46px) + var(--rel-meta-h, 19px) + 6px);
  color: #fff;
  font-size: var(--rel-meta-size, 11px);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  margin: 0;
  padding: 4px 6px;
  right: 6px;
}

.video-js .vjs-close-btn:hover,
.video-js .vjs-close-button:hover {
  color: var(--color-accent-pink, #ec4899);
}

/* --------------------------------------------------------------------------
   Fullscreen: drop the glass blur
   --------------------------------------------------------------------------
   backdrop-filter on the control bar means the compositor samples and blurs
   whatever sits behind the bar - and what sits behind it is the PLAYING VIDEO,
   so the blur is recomputed every single frame rather than once.

   Windowed that is a narrow strip over a modest surface and nobody notices.
   Fullscreen it is the full width of the display at native resolution, and it
   costs more than the extra pixels alone: a backdrop-filter painted over video
   stops the browser promoting the video to a hardware overlay plane, so decode
   and page paint are forced through the normal compositor together. That is
   the difference between theatre mode, which is the same video at nearly the
   same size and is fine, and fullscreen, which stutters.

   Only the blur goes. The gradient behind the bar carries the look on its own,
   and over moving video the blur was barely perceptible anyway.

   Written as separate rules per selector on purpose: one unknown pseudo-class
   in a selector LIST invalidates the whole list, so combining :fullscreen with
   :-webkit-full-screen would silently drop the rule in some browsers.
   .vjs-fullscreen is video.js's own class and is the one that always applies. */
.video-js.vjs-fullscreen .vjs-control-bar,
.video-js.vjs-fullscreen .vjs-menu-content,
.video-js.vjs-fullscreen .vjs-menu .vjs-menu-content {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.video-js:fullscreen .vjs-control-bar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.video-js:-webkit-full-screen .vjs-control-bar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   Fullscreen: everything that is not the player stops being drawn
   --------------------------------------------------------------------------
   Applied by js/scripts.js on fullscreenchange to every sibling on the path
   from the fullscreen element up to <body>, and removed again on exit.

   This is the actual fix for the fullscreen stutter. The same player and file
   in the bare /embed/ page were always smooth; on a video page the compositor
   was still maintaining the whole document - related rail, comments, hundreds
   of thumbnails, the fixed sidebar and navbar - behind a full-screen-sized
   video surface, which is enough to hitch the GPU. None of it is visible while
   fullscreen, so none of it needs drawing.
   -------------------------------------------------------------------------- */
.fs-page-hidden {
  display: none !important;
}