/* ===== Scroll-Pin Container ===== */
.scroll-pin {
  position: relative;
}

/* Default flow (mobile under cutoff, reduced-motion, no-JS, unrecognized mode):
   children stack naturally and remain fully accessible. */

/* JS-active state: pin the section, allow modes to absolutely-position children */
.scroll-pin.is-active {
  height: 100vh;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ----- Chrome (progress bar + dot nav) ----- */
.scroll-pin__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0, 0, 0, 0.1);
  z-index: 10;
}
.scroll-pin__progress-bar {
  height: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.scroll-pin__nav {
  position: absolute;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 10;
}
.scroll-pin__nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C5D0DE;
  transition: background 0.3s, transform 0.3s;
}
.scroll-pin__nav-dot.is-current {
  background: #0050E6;
  transform: scale(1.4);
}

.scroll-pin:not(.is-active) .scroll-pin__progress,
.scroll-pin:not(.is-active) .scroll-pin__nav {
  display: none;
}

/* ----- Mode: slides ----- */

/* Default flow only: zero out row margins so adjacent rows don't add gaps. */
.scroll-pin[data-scroll-pin-mode="slides"] > .et_pb_row {
  margin-top: 0;
  margin-bottom: 0;
}

/* Active state: rows become full-height flex containers for vertical centering */
.scroll-pin[data-scroll-pin-mode="slides"].is-active > .et_pb_row {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* Anchor row: shorter, sits at the top of the section, stays in flow */
.scroll-pin[data-scroll-pin-mode="slides"].is-active > .et_pb_row.scroll-pin__anchor {
  min-height: 0;
  align-items: flex-start;
  position: relative;
  z-index: 5;
}

/* Slide rows: stacked absolutely below the anchor.
   --anchor-h is set dynamically by JS on activation; 25vh is a fallback. */
.scroll-pin[data-scroll-pin-mode="slides"].is-active > .et_pb_row:not(.scroll-pin__anchor) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-height: 0;
  top: var(--anchor-h, 25vh);
  height: calc(100vh - var(--anchor-h, 25vh));
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Below tablet (script still active): let slides size to content. */
@media (max-width: 980px) {
  .scroll-pin[data-scroll-pin-mode="slides"].is-active > .et_pb_row:not(.scroll-pin__anchor) {
    bottom: auto;
    height: auto;
    max-height: calc(100vh - var(--anchor-h, 25vh));
    overflow-y: auto;
    align-items: flex-start;
    padding-top: 2rem;
  }
}

/* ===== Mobile guard =====
   Hard override: below the mobile breakpoint, force natural document flow
   regardless of whether the JS added .is-active. This protects against
   stale JS cache, JS errors, or any other case where the bail didn't fire.
   Keep this breakpoint in sync with MOBILE_QUERY in scroll-pin.js. */
@media (max-width: 480px) {
  .scroll-pin.is-active {
    height: auto;
    overflow: visible;
  }
  .scroll-pin[data-scroll-pin-mode="slides"].is-active > .et_pb_row {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    width: auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    display: block;
    padding-top: 0;
    padding-bottom: 0;
  }
  .scroll-pin .scroll-pin__progress,
  .scroll-pin .scroll-pin__nav {
    display: none;
  }
}

/* Hide dot nav for modes where it doesn't make sense.
   Add per-mode overrides here as you register new modes:
   .scroll-pin[data-scroll-pin-mode="video"] .scroll-pin__nav { display: none; }
*/