/* Wraps .banner-video to track its original scroll position and hold
   its layout space open while the video is popped out (position:fixed
   removes .banner-video from flow). No styling of its own beyond a
   JS-managed height during the popped state. */
.banner-video-placeholder {
}

.banner-video.is-video-popup {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 400px;
  min-height: 255px;
  max-width: calc(100vw - 40px);
  display: flex;
  flex-direction: column;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  z-index: 999;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.banner-video.is-video-popup.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Skip the show/hide transition while actively being dragged so it
   tracks the pointer 1:1 instead of easing behind it. */
.banner-video.is-video-popup.is-dragging {
  transition: none;
}

/* Gives the video its own true 16:9 box, independent of the handle
   bar's height, rather than relying on the original crop/padding-hack
   sizing (which assumed .banner-video__inner filled its parent's full
   height — no longer true once the handle bar shares that space).
   Assumes .banner-video__inner has position: relative in your base
   styles, which this crop pattern normally requires — check
   styles.css if the video doesn't size correctly once popped. */
.banner-video.is-video-popup .banner-video__inner {
  height: auto;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
}

.banner-video-popup__handle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 6px;
  background: rgba(0, 0, 0, 0.85);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.banner-video.is-video-popup .banner-video-popup__handle {
  display: flex;
}

.banner-video-popup__handle:active {
  cursor: grabbing;
}

.banner-video-popup__drag-icon {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.55);
}

.banner-video-popup__drag-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.banner-video-popup__handle:hover .banner-video-popup__drag-icon {
  color: rgba(255, 255, 255, 0.9);
}

.banner-video-popup__close {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: #eb3e58;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.banner-video-popup__close:hover {
  filter: brightness(0.9);
}

/* Desktop only — keep this cutoff in sync with DESKTOP_QUERY in
   hero-video-popup.js. Defensive fallback in case the popup is ever
   mid-transition when the viewport crosses the breakpoint. */
@media (max-width: 767px) {
  .banner-video.is-video-popup {
    display: none !important;
  }
}