/* ── Cómo funcionan mis consultas ──────────────────────────────────────────
   The four cards stood in a plain column in the Framer file. Here they stack:
   each one sticks just below the top of the viewport as you scroll, and the
   next rides up over it, so by the end of the section the whole sequence is
   held on screen at once as a deck you can see the edges of.

   position: sticky does all of it. There is no pinning, no scroll hijack and
   no measurement — which means it cannot drift, it survives a resize, and it
   costs nothing on the main thread. Each card's sticky offset is stepped by
   its index, which is what leaves the shoulder of the card underneath showing.

   Asking for less motion turns the stack back into the plain column it was.
   ────────────────────────────────────────────────────────────────────────── */

.steps { background: var(--ground-alt); }

/* ── The heading holds ────────────────────────────────────────────────────
   The title stays where it is until the whole deck is stacked under it. It
   is sticky inside .section__inner, so it is held for exactly the length of
   this section and released by its own bottom — the cards decide when that
   is simply by being as tall as they are.

   The cards stop BELOW it, so nothing ever passes behind the words and the
   heading needs no plate of its own. --steps-head is that stopping line, and
   js/steps.js keeps it equal to the heading's real height.
   ────────────────────────────────────────────────────────────────────────── */

.steps {
  /* Where the held heading sits, measured from the top of the viewport. */
  --steps-top: calc(var(--nav-h) + clamp(0.75rem, 2vw, 1.5rem));
  /* Replaced with the measured height as soon as js/steps.js has run; this
     is only what the first paint uses. */
  --steps-head: clamp(8rem, 15vw, 11.5rem);
  --steps-gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.steps__head {
  position: sticky;
  top: var(--steps-top);
  /* Under the cards, not over them. While the deck is stacking the two never
     meet — the cards stop below the heading. But the deck is released by its
     own bottom edge a little before the section releases the heading, and in
     that last stretch the cards ride up and out. Letting them pass over the
     title is the deck leaving; holding the title in front of them would be
     type printed across a moving card. */
  z-index: 0;
  max-width: 46rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.steps__title { margin-bottom: clamp(0.85rem, 1.8vw, 1.15rem); }
.steps__lede  { margin-inline: auto; max-width: 38rem; }

/* ── The deck ──────────────────────────────────────────────────────────── */

.steps__deck {
  margin: 0;
  padding: 0;
  list-style: none;
  /* The deck must not clip its own sticky children, and no ancestor of a
     sticky element may have overflow set to anything but visible. */
  overflow: visible;
}

.step {
  position: sticky;
  /* Under the held heading, and then the shoulder: each card stops 18px lower
     than the one before it, so the top of every card underneath stays visible
     behind the one on top. */
  top: calc(var(--steps-top) + var(--steps-head) + var(--steps-gap) + var(--i) * 18px);
  /* The gap between cards while they are still travelling. Larger than the
     shoulder, so each card has room to be read on its own before the next
     one arrives over it. */
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.step:last-child { padding-bottom: 0; }

/* ── The hold ──────────────────────────────────────────────────────────────
   The deck used to end at the bottom edge of the last card, which left that
   card with nowhere to stick: a sticky element cannot hold past the end of
   the box it lives in, so the fourth card never stopped at its shoulder. It
   kept climbing and slid up over the three that were already stuck, and the
   section finished with one card covering the whole stack.

   This is the room it was missing. With the deck running on past the last
   card, every card reaches its own shoulder and the finished stack is held
   there long enough to be seen as a stack before the section lets go.
   ────────────────────────────────────────────────────────────────────────── */
.steps__deck::after {
  content: "";
  display: block;
  height: clamp(14rem, 38vh, 24rem);
}

/* Above the held heading, for the hand-off described on .steps__head. */
.step { z-index: 1; }

.step__card {
  /* The padding moved to .step__body so the photograph can run to the card's
     own edge instead of floating inside a frame within a frame. overflow is
     what makes it take the corner radius with it. */
  padding: 0;
  overflow: hidden;
  display: grid;
  border-radius: var(--r-card);
  background: var(--white);
  border: 1px solid var(--ink-12);
  /* Each card casts onto the one below it, which is what makes the stack
     read as depth rather than as overlap. */
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.8) inset,
              0 18px 40px -30px rgba(42, 43, 47, 0.55);
}

.step__body { padding: clamp(1.75rem, 3.6vw, 3rem); }

/* ── The photograph ────────────────────────────────────────────────────────
   One per step, and each one is the sentence beside it: someone messaging,
   an examination, the plan being written, the explanation being given. The
   cards were wide and mostly empty on a desktop; this is what fills them.

   Square source, cropped by the column rather than by the file, so the same
   asset serves the narrow band on a phone and the tall column on a desktop.
   ────────────────────────────────────────────────────────────────────────── */

.step__figure {
  margin: 0;
  /* On a phone the deck is already tall and stacking; a band is as much room
     as the picture can have without pushing the words off the screen. */
  aspect-ratio: 16 / 10;
  background: var(--ground-alt);
}

.step__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step__name {
  margin: 0 0 0.6rem;
  font-size: var(--fs-title-s);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: var(--track-body);
  color: var(--ink-deep);
  text-wrap: balance;
}

/* Two facts — which step this is, and what it is called — held apart by a gap
   and a change of tone. They used to be one string with a middle dot in it,
   which is punctuation doing a layout's job. */
.step__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.7rem;
  margin: 0 0 clamp(1rem, 2vw, 1.4rem);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
}

.step__no    { color: var(--indigo); font-variant-numeric: tabular-nums; }
.step__phase { color: var(--ink-mute); }

.step__text:last-child { margin-bottom: 0; }

.step__text {
  max-width: 44rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  font-size: var(--fs-body);
  line-height: 1.6;
  letter-spacing: var(--track-body);
  color: var(--ink-70);
  text-wrap: pretty;
}

/* ── From 56rem: the picture takes the right-hand column ──────────────────
   It runs the whole height of the card, so whichever card is tallest sets the
   crop for all four and the deck still reads as one object. js/steps.js levels
   the heights; this just fills what it leaves.
   ────────────────────────────────────────────────────────────────────────── */

@media (min-width: 56rem) {
  .step__card {
    grid-template-columns: minmax(0, 1fr) clamp(13rem, 32%, 21rem);
    align-items: stretch;
  }

  .step__figure {
    aspect-ratio: auto;
    height: 100%;
  }
}

/* ── No stack ──────────────────────────────────────────────────────────────
   Sticky stacking is a reading effect, and if the reader has asked for less
   motion, or there is no script to fall back on, it is simply four cards. */

@media (prefers-reduced-motion: reduce) {
  .step        { position: static; }
  .steps__head { position: static; }
}

/* A held heading plus four stacked cards needs the height to hold them. Below
   that, the heading scrolls away as any heading would and the cards simply
   stack under the bar. */
@media (max-height: 42rem), (max-width: 40rem) {
  .steps__head { position: static; }
  .step { top: calc(var(--steps-top) + var(--i) * 18px); }
}

/* ── Mobile ────────────────────────────────────────────────────────────────
   No photograph on the cards here. A sticky card can only ever be read down
   to the bottom of the screen — it holds its position while the next one
   arrives over it, so anything below the fold is unreachable. The 16:10 band
   was costing roughly 220px of a card that also has to hold a heading, a
   kicker and six lines of description, and the end of the description was
   what fell off. See js/steps.js, which stops equalising the heights here for
   the same reason.
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 47.99rem) {
  /* The photograph is back, and the card is vertical: words, then picture
     across the full width. The two-column split only exists from 56rem.

     The cap is the point. At 16:10 a 335px-wide card gives a 209px band, and
     on a 375x667 screen that left four pixels between the bottom of the card
     and the bottom of the viewport — and a sticky card cannot be scrolled
     past its own stop, so anything under the fold is unreachable. The ratio
     governs normally; 28vh stops it on the short screens where it would not.

     What made this possible at all is js/steps.js no longer levelling the
     heights here: each card is as tall as its own words, so the picture is
     added to one card's height rather than to the tallest card's. */
  .step__figure {
    display: block;
    max-height: 28vh;
  }
}