/* NL Scroll Swap: sticky image stack that swaps as panels scroll past. */

.nl-ss {
  display: grid;
  grid-template-columns: var(--nl-ss-media-width, minmax(40%, 520px)) minmax(0, 1fr);
  gap: var(--nl-ss-gap, clamp(2rem, 5vw, 5rem));
  align-items: stretch;
  overflow: visible;
}

.nl-ss--right {
  grid-template-columns: minmax(0, 1fr) var(--nl-ss-media-width, minmax(40%, 520px));
}

.nl-ss--right > .nl-ss__media {
  order: 2;
}

.nl-ss__media {
  position: relative;
  min-width: 0;
}

/* Sticky image viewport */
.nl-ss__stack {
  position: sticky;
  top: var(--nl-ss-sticky-top, 120px);
  height: var(--nl-ss-media-height, 80vh);
}

.nl-ss__stack > .nl-ss__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity var(--nl-ss-fade, 0.6s) ease, transform calc(var(--nl-ss-fade, 0.6s) * 1.3) ease;
  will-change: opacity, transform;
}

.nl-ss__stack > .nl-ss__img.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Panels */
.nl-ss__panels {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nl-ss__panels > *:not(.nl-ss__img--inline) {
  min-height: var(--nl-ss-panel-min, 80vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}

/* Mobile (set by JS from the breakpoint control) */
.nl-ss--stacked {
  grid-template-columns: minmax(0, 1fr);
}

.nl-ss--stacked > .nl-ss__media {
  display: none;
}

.nl-ss--stacked .nl-ss__panels > *:not(.nl-ss__img--inline) {
  min-height: auto;
  padding-block: 1.5rem 3rem;
}

.nl-ss__panels > .nl-ss__img--inline {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  opacity: 1;
  transform: none;
}

/* Before JS runs, assume the default breakpoint so there is no layout jump */
@media (max-width: 820px) {
  .nl-ss:not(.nl-ss--js) {
    grid-template-columns: minmax(0, 1fr);
  }
  .nl-ss:not(.nl-ss--js) > .nl-ss__media {
    display: none;
  }
  .nl-ss:not(.nl-ss--js) .nl-ss__panels > * {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nl-ss__stack > .nl-ss__img {
    transition: none;
    transform: none;
  }
}