/*
 * Video shopping (reels) page -- structural styles only.
 * Everything cosmetic lives in the Tailwind classes on ~/Views/Home/Web/Partial/Video/*.cshtml.
 *
 * Layout contract (Figma 1944-3 / 1949-60, 1440x964 frame):
 *   header 72  ->  stage top pad 16  ->  video column 852  ->  stage bottom pad 24
 *   rail sits 24px right of the video column, bottom-aligned with it
 *   arrows sit 24px from the viewport right edge, centred on the stage
 */

html.video-shopping,
html.video-shopping body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.video-shell {
  --video-stage-pad-top: 16px;
  --video-stage-pad-bottom: 24px;
  position: relative;
  height: calc(100dvh - var(--video-header-h, 88px));
  min-height: 420px;
  overflow: hidden;
  background: #171717;
}

/*
 * The stage gutters live on the slide, not here: `overflow: hidden` clips at the padding box,
 * so padding on the viewport would let the next slide show through the bottom gutter.
 */
.video-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* One slide per screen; the track slides vertically by whole viewport heights. */
.video-track {
  height: 100%;
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.video-track.is-dragging {
  transition: none;
}

.video-slide {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
  height: 100%;
  padding: var(--video-stage-pad-top) 24px var(--video-stage-pad-bottom);
}

/*
 * The video box is sized in JS from the clip's real aspect ratio (see sizeStage() in
 * video-page.js) so portrait, square and landscape clips all hug their frame exactly
 * as designed, instead of being letterboxed inside a fixed box.
 */
.video-stage {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
}

.video-stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* Bottom scrim -- Figma paints it over the lower 458 of 852 (~54%). */
.video-scrim {
  position: absolute;
  inset: 46% 0 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);
}

.video-rail {
  flex: 0 0 auto;
}

/* Range slider (filter panel) -- two native inputs stacked over one shared track. */
.video-range {
  position: relative;
  height: 16px;
}

.video-range input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  height: 16px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.video-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  border: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.video-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  border: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Narrow viewports: drop the outside rail onto the video and shrink the gutters. */
@media (max-width: 900px) {
  .video-slide {
    gap: 12px;
    padding: var(--video-stage-pad-top) 12px var(--video-stage-pad-bottom);
  }
}