/* =========================================================================
   story.css — §7 "Kako se pravi", the pinned section.
   ========================================================================= */

.story { background: var(--cream); }

.story__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(var(--s-8), 5vw, var(--s-20));
  row-gap: var(--s-10);
  align-items: start;
}

/* JS pins this column; height is set so the pin has something to hold. */
.story__left { position: relative; }

.story__eyebrow { color: var(--teal-deep); margin-bottom: var(--s-6); }

.story__figure {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--sand);
  /* Pin travel is (right column height - THIS column's height), so a
     shorter figure buys scroll duration without adding empty space to the
     right column. 4/5 made it 825px tall against a 1070px right column,
     leaving only 245px of pin; 1/1 gives ~410px for the same rhythm.
     Capped so it cannot exceed the viewport on short screens. */
  aspect-ratio: 1 / 1;
  max-height: 74vh;
  isolation: isolate;
}

.story__num {
  position: absolute;
  z-index: 2;
  left: clamp(var(--s-4), 2vw, var(--s-8));
  bottom: clamp(var(--s-2), 1.4vw, var(--s-5));
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(64px, 9vw, 132px);
  line-height: .8;
  letter-spacing: -.04em;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  font-variation-settings: var(--wonk-hero);
  text-shadow: 0 2px 24px rgba(var(--ink-rgb), .45);
  pointer-events: none;
}

.story__media { position: absolute; inset: 0; }
.story__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Steps swap with a clip-path wipe; JS drives the inset. */
  clip-path: inset(0 0 0 0);
}
.story__media img + img { clip-path: inset(0 0 100% 0); }

/* ---- Right column: the scrolling steps ----------------------------------
   Each step is a viewport-relative block so the column is ~2.2x taller than
   the viewport. This is what gives the pin something to hold: with fixed
   px gaps the column measured 845px against a 900px viewport and the pin
   lasted 165px — technically pinned, invisibly so. */
.story__right {
  display: grid;
  gap: 0;
}
.story__step {
  /* In a PINNED section this height is scroll duration, not whitespace:
     the visitor never sees a void here because the pinned image fills the
     left of the frame throughout. But 72vh left ~480px between one step's
     last line and the next step's title, which is dead time with nothing
     happening. 58vh, with the figure shortened to 1/1, keeps ~510px of pin
     (J1/J3) while cutting the wait between beats by a third. */
  min-height: 58vh;
}
/* The LAST step must not reserve half a viewport below its final line: that
   space is not scroll duration, it is a void between this section and the
   next, and it measured 422px. The pin ends with the text either way. */
.story__step:last-child {
  min-height: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 46ch;
}
.story__step-title {
  color: var(--teal-deep);
  margin-bottom: var(--s-4);
}
.story__step p { color: var(--cocoa); }

/* Inactive steps recede — opacity only, so nothing fights the pin. */
html.js:not(.no-gsap) .story__step { opacity: .28; transition: opacity .45s var(--ease-out); }
html.js:not(.no-gsap) .story__step.is-active { opacity: 1; }

/* =========================================================================
   Below 900px the pin is disabled entirely and the section stacks.
   A pinned column on a short viewport is a scroll trap.
   ========================================================================= */
@media (max-width: 900px) {
  .story__inner { grid-template-columns: 1fr; gap: var(--s-8); }
  .story__left { position: static !important; }
  .story__figure { aspect-ratio: 3 / 2; }
  /* Stacked, so the viewport-height blocks are dead weight here. */
  .story__right { gap: var(--s-12); }
  .story__step { min-height: 0; display: block; }
  html.js .story__step { opacity: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .story__step { opacity: 1 !important; }
  .story__media img { clip-path: none !important; }
  .story__media img + img { display: none; }
}