.dsb-video-wrap {
  display: block;
}

/* Default caption styling — semi-transparent black background, white text.
   Overridden per-video via inline <style> when the per-video option is set. */
.dsb-video-wrap video::cue {
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-family: sans-serif;
  padding: 0.15em 0.4em;
}

.dsb-video-caption {
  text-align: center;
  font-style: italic;
  margin-top: 0.5em;
}

/* Plyr fills the aspect-ratio wrap — ALL its nested containers get 100% height,
   so the video can't collapse to black (the original bug) and Plyr can't overflow
   the cell or lose its control bar. */
.dsb-video-wrap.dsb-plyr .plyr,
.dsb-video-wrap.dsb-plyr .plyr__video-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}
.dsb-video-wrap.dsb-plyr .plyr video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
/* Video.js keeps the aspect-ratio wrap and fills it (fill mode) — prevents the
   oversize/black-when-paused of responsive mode. */
.dsb-video-wrap.dsb-vjs .video-js {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
/* Keep the custom players' control bars visible (they were hiding/collapsing). */
.dsb-video-wrap.dsb-vjs .vjs-control-bar {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 7px;   /* Video.js sizes controls in em — shrink so the bar fits the small cell */
}
.dsb-video-wrap.dsb-vjs .vjs-control-bar .vjs-button { width: 2.4em; }
.dsb-video-wrap.dsb-vjs .vjs-progress-control { min-width: 1.2em; }
.dsb-video-wrap.dsb-vjs .vjs-time-control,
.dsb-video-wrap.dsb-vjs .vjs-remaining-time { display: none; }
.dsb-video-wrap.dsb-plyr .plyr__controls { opacity: 1 !important; }
/* Plyr themed to the site's purple (override with --plyr-color-main). */
.dsb-video-wrap .plyr { --plyr-color-main: #5b3a62; }

/* Cover-image facade (poster + play button; player loads on click). */
.dsb-video-facade { overflow: hidden; }
.dsb-video-facade:hover .dsb-play-btn,
.dsb-video-facade:focus .dsb-play-btn {
  background: rgba(0, 0, 0, 0.78) !important;
  transform: translate(-50%, -50%) scale(1.06);
}