/* Reusable responsive video player — used for every course video (welcome,
   chapter learning/review/practice, summary/review videos). One component,
   same behavior everywhere per the requirement that it must be identical
   across all videos.

   Mobile: video fills near-full width, natural aspect ratio, no crop/stretch.
   Tablet/desktop (>=768px): video is centered inside a wider fixed-height
   stage, with a soft blurred copy of the same video filling the sides —
   never cropped or stretched either way, since both layers use
   object-fit rules that preserve the source aspect ratio exactly. */

.vp-frame {
  position: relative;
  width: 100%;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  background: #14101f;
}

.vp-bg {
  display: none;
}

.vp-video {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-height: 85vh;
}

@media (min-width: 768px) {
  .vp-frame {
    max-width: 900px;
    height: min(72vh, 680px);
  }
  .vp-bg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(44px) brightness(0.55) saturate(1.15);
    transform: scale(1.15);
  }
  .vp-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
  }
}