/* ==========================================================================
   river.css — stepped feature list

   The reference's signature scroll interaction: a column of copy steps beside
   a sticky media column. As each step enters the middle of the viewport it
   brightens (.is-active via .ds-dim) and the matching panel cross-fades in.

   Below the two-column breakpoint the sticky column is dropped entirely and
   each step falls back to its own inline figure, so the content still reads
   in order on a phone.
   ========================================================================== */

.river {
  position: relative;
}

/* --- intro ---------------------------------------------------------------- */

.river__intro {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  max-width: 820px;
  margin-bottom: var(--ds-space-9);
}

.river__intro-heading {
  font-family: var(--ds-font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.02em;
  color: var(--ds-color-text-primary);
}

@media (min-width: 768px) {
  .river__intro-heading {
    font-size: 36px;
  }
}

.river__accent {
  color: var(--ds-color-brand);
}

/* --- layout --------------------------------------------------------------- */

.river__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-8);
}

.river__steps {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* --- steps ---------------------------------------------------------------- */

.river__step {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  padding-block: var(--ds-space-8);
}

.river__heading {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ds-color-text-primary);
}

.river__call {
  color: var(--ds-color-brand);
  font-weight: 400;
}

.river__text {
  max-width: 52ch;
  font-size: 16px;
  line-height: 170%;
  color: var(--ds-color-text-description);
}

.river__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}

/* --- media --------------------------------------------------------------- */

.river__inline-figure {
  margin: var(--ds-space-2) 0 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: var(--ds-border-width) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-panel);
  background-color: var(--ds-color-bg-surface-3);
}

.river__inline-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The sticky column only exists at the two-column breakpoint */
.river__media {
  display: none;
}

@media (min-width: 900px) {
  .river__layout {
    grid-template-columns: 42fr 58fr;
    gap: var(--ds-space-9);
    align-items: start;
  }

  /* Tall steps give each one a comfortable dwell time as it scrolls through */
  .river__step {
    justify-content: center;
    min-height: 42vh;
    padding-block: 10vh;
    cursor: default;
  }

  .river__inline-figure {
    display: none;
  }

  /* Pinned below the header, matching the sticky offset the agenda labels and
     the FAQ aside already use.

     Two things this deliberately avoids:

     `top: 50%` with `translateY(-50%)`, which is how this was centred before.
     Sticky constrains where an element is *laid out*, but a transform is a
     visual offset applied afterwards and is constrained by nothing — so the
     panel rode half its own height above its grid area and over the intro
     heading.

     Giving the box a viewport height and centring the panels inside it. That
     fixes the overlap, but a tall box runs out of travel early: the column is
     only about 1230px against a 744px box, so the panel unpinned before the
     last step and left it with nothing alongside. Keeping the box the height of
     the panel leaves roughly 820px of travel, which covers all three steps. */
  .river__media {
    position: sticky;
    top: calc(var(--ds-header-height) + var(--ds-space-7));
    display: grid;
  }

  /* All panels stack in one grid cell so they can cross-fade in place */
  .river__panel {
    grid-area: 1 / 1;
    aspect-ratio: 3 / 2;
    margin: 0;
    overflow: hidden;
    border: var(--ds-border-width) solid var(--ds-color-border-subtle);
    border-radius: var(--ds-radius-card);
    background-color: var(--ds-color-bg-surface-3);
    opacity: 0;
    transform: scale(0.98);
    transition: opacity var(--ds-duration-slower) var(--ds-ease-standard),
      transform var(--ds-duration-slower) var(--ds-ease-standard);
  }

  .river__panel.is-active {
    opacity: 1;
    transform: scale(1);
  }

  .river__panel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* Without JS nothing dims and nothing swaps, so show the inline figures and
   keep the sticky column out of the way. */
.no-js .river__media {
  display: none;
}

.no-js .river__inline-figure {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .river__panel {
    transform: none;
  }
}