/*
  Scroll video: CSS for Work Sections with the CMS "Scroll video" switch on (data-scroll-video="true" on the video).
  Deployed to Bunny CDN by deploy.sh as styles/scroll-video.css and linked in the Works template page's head
  (webflow/scroll-video-head.html), so it sets up the pinning before any script runs: the section has its full
  height from the start and ScrollTrigger positions stay right. Goes with scroll-video.js.
  Relies on Webflow's classes:
  .collection-item-work > .content-block > … .media-wrapper > .video_component > .video_player-embed > video
*/

.collection-item-work:has(video[data-scroll-video="true"]) {
  /* Smallest margin above and below a pinned block (.main-wrapper's padding); GAP in scroll-video.js. */
  --sp-sv-gap: 20px;
}

/* Side-by-side layouts: the whole section pins while its scroll videos play one after another. */
@media (min-width: 992px) {
  /* Scroll room after the section: 2.5 screens per scroll video (scroll-video.js sets the count). */
  .collection-item-work:has(video[data-scroll-video="true"])::after {
    content: "";
    display: block;
    height: calc(var(--sp-sv-count, 1) * var(--sp-sv-scroll, 2.5) * 100vh);
    height: calc(var(--sp-sv-count, 1) * var(--sp-sv-scroll, 2.5) * 100svh);
  }

  .collection-item-work:has(video[data-scroll-video="true"]) > .content-block {
    position: sticky;
    /* Centred on screen by scroll-video.js. */
    top: var(--sp-sv-top, var(--sp-sv-gap));
  }
}

/* Stacked layouts (tablet and phone): each scroll video pins on its own, in order. */
@media (max-width: 991px) {
  .media-wrapper:has(video[data-scroll-video="true"]) {
    /* overflow: hidden would stop the video block below from pinning. */
    overflow: visible;
  }

  /* Scroll room below each video block: 2.5 screens. */
  .media-wrapper:has(video[data-scroll-video="true"])::after {
    content: "";
    display: block;
    height: calc(var(--sp-sv-scroll, 2.5) * 100vh);
    height: calc(var(--sp-sv-scroll, 2.5) * 100svh);
  }

  .media-wrapper:has(video[data-scroll-video="true"]) .video_component {
    position: sticky;
    /* Centred on screen by scroll-video.js. */
    top: var(--sp-sv-video-top, var(--sp-sv-gap));
    border-radius: 10px;
  }
}

/* The video keeps its own shape, but is never taller than the screen, so a pinned block always fits. */
video[data-scroll-video="true"] {
  display: block;
  max-height: calc(100vh - 2 * var(--sp-sv-gap, 20px));
  max-height: calc(100svh - 2 * var(--sp-sv-gap, 20px));
  object-fit: cover;
  pointer-events: none;
}