/* ==========================================================================
   LP02 · UNIT 8 · HOW THE PARTNER JOURNEY WORKS — road map
   --------------------------------------------------------------------------
   Six milestones along a road that draws itself as you scroll.
   • Desktop (≥ 64rem): a winding road across the full width; stations sit
     on its crests and troughs, with step cards alternating above / below.
   • Tablet & mobile: a vertical road on the inline-start side, cards to
     its side, a fill line growing down the rail.
   • journey.js reads the map's position LIVE each frame (no cached
     ScrollTrigger positions — content above includes JS-sized and pinned
     sections) and writes the progress; stations light when reached.
   Static fallback (.journey without .is-live): road fully drawn, every
   station lit.
   The step numbers are small badges inside the stations — the order is
   part of the copy, so it stays, but quietly.
   ========================================================================== */

.journey {
  background: linear-gradient(180deg, var(--c-white) 0%, #F3F8FA 100%);
}

.journey__decor {
  background:
    radial-gradient(ellipse 40% 35% at 50% 0%, rgba(0, 169, 182, 0.10), transparent 70%),
    radial-gradient(ellipse 30% 40% at 100% 100%, rgba(1, 62, 106, 0.06), transparent 70%);
}

.journey__head {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  margin-block-end: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}

/* Small road-sign glyph above the title (an icon, not an eyebrow) */
.journey__sign {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 16px;
  background-color: var(--c-navy);
  color: var(--c-teal);
  box-shadow: 0 0 0 6px rgba(0, 169, 182, 0.12);
}

.journey__sign svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

/* ---------------------------------------------------------------------------
   Map container
   --------------------------------------------------------------------------- */
.jmap {
  position: relative;
}

/* Station list (shared structure for both layouts) */
.jmap__steps {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  padding-inline-start: 3.5rem;   /* room for the vertical rail */
}

.jstep {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--r-card);
  border: 1px solid var(--c-ink-a10);
  background-color: var(--c-white);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.jstep__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 12px;
  background-color: var(--c-teal-a12);
  color: var(--c-deep-teal);
  transition: background-color 0.45s var(--ease-out), color 0.45s var(--ease-out);
}

.jstep__icon svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.jstep p {
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-ink);
}

/* Station dot (with the small step number) */
.jstep__dot {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: -3.5rem;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  border: 2px solid var(--c-ink-a20);
  background-color: var(--c-white);
  color: var(--c-slate);
  font-family: var(--ff-display);
  font-size: 0.8125rem;
  font-weight: 700;
  transition: background-color 0.45s var(--ease-out), border-color 0.45s var(--ease-out),
              color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

/* Lit station (also the static fallback) */
.jstep.is-lit,
.journey:not(.is-live) .jstep {
  border-color: rgba(0, 169, 182, 0.4);
  box-shadow: var(--shadow-md);
}

.jstep.is-lit .jstep__icon,
.journey:not(.is-live) .jstep__icon {
  background-color: var(--c-navy);
  color: var(--c-teal);
}

.jstep.is-lit .jstep__dot,
.journey:not(.is-live) .jstep__dot {
  border-color: var(--c-teal);
  background-color: var(--c-teal);
  color: var(--c-navy);
  box-shadow: 0 0 0 6px rgba(0, 169, 182, 0.18);
}

/* Vertical rail (mobile / tablet) */
.jmap__rail {
  position: absolute;
  inset-block: 1.5rem;
  inset-inline-start: calc(1.125rem - 2px);
  inline-size: 4px;
  border-radius: var(--r-pill);
  background: repeating-linear-gradient(180deg, var(--c-ink-a20) 0 8px, transparent 8px 14px);
}

.jmap__rail-fill {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--c-teal), var(--c-deep-teal));
  transform-origin: 50% 0%;
  transform: scaleY(var(--jp, 1));
}

/* Desktop road (hidden below 64rem) */
.jmap__road {
  display: none;
}

/* Tablet: a wider single column beside the rail */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .jmap__steps {
    max-inline-size: 40rem;
    margin-inline: auto;
  }
}

/* ---------------------------------------------------------------------------
   Desktop: winding road with alternating cards
   Geometry (rem, from the top of .jmap):
     upper cards end at 9.5   · road band 11.5 → 19.5
     crest at 12.5 (odd)      · trough at 18.5 (even)
     lower cards start at 21.5 · total height 31
   Stations are evenly spaced: x = 8% + (n − 1) × 16.8%.
   --------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .jmap {
    block-size: 31rem;
  }

  .jmap__rail {
    display: none;
  }

  .jmap__road {
    display: block;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 11.5rem;
    inline-size: 100%;
    block-size: 8rem;
    overflow: visible;
  }

  [dir="rtl"] .jmap__road {
    scale: -1 1;
  }

  .jmap__road-track {
    fill: none;
    stroke: var(--c-ink-a10);
    stroke-width: 14;
    stroke-linecap: round;
  }

  .jmap__road-dash {
    fill: none;
    stroke: var(--c-white);
    stroke-width: 2;
    stroke-dasharray: 8 10;
  }

  .jmap__road-fill {
    fill: none;
    stroke: var(--c-teal);
    stroke-width: 6;
    stroke-linecap: round;
  }

  .jmap__steps {
    display: block;
    block-size: 100%;
    padding: 0;
  }

  .jstep {
    position: absolute;
    inset-inline-start: var(--x);
    inline-size: 13.5rem;
    translate: -50% 0;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
  }

  [dir="rtl"] .jstep {
    translate: 50% 0;
  }

  /* Upper cards grow upward from a fixed line; lower cards grow downward */
  .jstep:nth-child(odd)  { inset-block-end: calc(100% - 9.5rem); }
  .jstep:nth-child(even) { inset-block-start: 21.5rem; }

  /* Station dot sits exactly on the road crest / trough */
  .jstep__dot {
    inset-inline-start: 50%;
    translate: -50% 0;
  }

  [dir="rtl"] .jstep__dot {
    translate: 50% 0;
  }

  .jstep:nth-child(odd) .jstep__dot  { inset-block-start: auto; inset-block-end: -4.125rem; }
  .jstep:nth-child(even) .jstep__dot { inset-block-start: -4.125rem; }

  /* Stem joining card edge and station */
  .jstep::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(50% - 1px);
    inline-size: 2px;
    block-size: 1.875rem;
    background-color: var(--c-ink-a20);
    transition: background-color 0.45s var(--ease-out);
  }

  .jstep:nth-child(odd)::after  { inset-block-end: -1.875rem; }
  .jstep:nth-child(even)::after { inset-block-start: -1.875rem; }

  .jstep.is-lit::after,
  .journey:not(.is-live) .jstep::after {
    background-color: var(--c-teal);
  }
}