/* === Layout variables you can tweak per page ============================ */
#scrollytelling-wrapper {
  /* Left column width + grid gap */
  --col-left-min: 320px;
  --col-left-max: 560px;
  --gap: 4rem;

  /* How tall each step should be (more height = longer dwell) */
  /* With long clips, 140–160vh usually feels nice without being exhausting */
  --step-min-height: 100vh;

  /* Extra vertical space between steps */
  --step-gap: 30vh;

  /* Height of the right “screen” (pinned video area) */
  --screen-height: clamp(420px, 50vh, 600px);

  display: grid;
  grid-template-columns: minmax(var(--col-left-min), var(--col-left-max)) 1fr;
  gap: var(--gap);
  align-items: start;
  padding-block: 10vh;
}

/* === Left column: steps ================================================== */
#scrollytelling-wrapper .scrollytelling-step {
  min-height: var(--step-min-height);
  padding: 2rem 0;
}

/* Add extra space between steps (contributes to dwell time) */
#scrollytelling-wrapper .scrollytelling-step + .scrollytelling-step {
  margin-top: var(--step-gap);
}

#scrollytelling-wrapper .scrollytelling-step:last-child {
  border-bottom: 0;
}

/* === Right column: pinned screen ======================================== */
#scrollytelling-wrapper .scrollytelling-videos {
  position: relative; /* GSAP pins this container */
}

#scrollytelling-wrapper .screen {
  position: relative;
  height: var(--screen-height);
  border-radius: 12px;
  overflow: hidden;
  margin: 0; /* reset <figure> default margins */
}

/* Two stacked players for seamless crossfades */
#scrollytelling-wrapper .screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  object-fit: cover;  /* use 'contain' if you prefer letterboxing */
  opacity: 0;
  pointer-events: none;
  display: block;

  /* Minor perf hints for opacity fades */
  will-change: opacity;
  backface-visibility: hidden;
  contain: paint;
}

.scrollytelling-mobile-video {
  display: none;
}

/* === Responsive ========================================================== */
@media (max-width: 900px) {
  #scrollytelling-wrapper {
    grid-template-columns: 1fr;
    --gap: 1.25rem;
    --step-min-height: auto; /* dial back on mobile */
    --step-gap: 2rem;
    --screen-height: auto;    /* ~16:9 */

    padding-block: 0;
  }

  #scrollytelling-wrapper .scrollytelling-videos {
    display: none;
  }

  #scrollytelling-wrapper .scrollytelling-step {
    margin: 0;
    display: flex;
    flex-flow: column nowrap;
    gap: 2rem;
  }

  #scrollytelling-wrapper .scrollytelling-step + .scrollytelling-step {
    margin-top: 0;
  }

  .scrollytelling-mobile-video {
    display: block;
  }

  .scrollytelling-mobile-video figure {
    margin: 0;
    border-radius: 12px;
    overflow: hidden ;
    max-width: fit-content;
  }

  .scrollytelling-mobile-video video {
    width: 100%;
    height: auto;
    position: static;
    object-fit: contain;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #scrollytelling-wrapper .screen video {
    transition: none !important;
    animation: none !important;
  }
}