/* ================================================================
   PROCESS — a horizontal, always-visible route through the 9 stops
   (5 numbered phases, 2 content-check gates, 2 loop stops). Every
   icon, label, and one-line description renders immediately — no
   click needed to see it. Content-check gates sit directly on the
   line as a distinct diamond marker (not a smaller stop circle), so
   "nothing moves forward without your sign-off" reads as a literal
   chokepoint on the road.

   Mobile-first: the base rules below are a single left-aligned
   vertical column (a plain CSS gradient bar, no SVG/JS needed —
   there's no room for a horizontal line under ~900px). At 900px+ it
   becomes a horizontal line with stops alternating above/below so
   full descriptions have room without colliding. The line is a
   plain, fully-visible CSS gradient bar at all times — fully
   attached from step to step, no scroll-driven draw-in.
   ================================================================ */

/* ---------- Personalize: type a project name ----------
   Plain text field, styled like a form control (shared/base.css
   tokens) but not part of a real form — process.js swaps it into
   each step's description live, no submit needed. */
.journey-personalize {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-block-end: 28px;
}
.journey-personalize label {
  font-weight: var(--weight-label);
  font-size: 0.92rem;
}
.journey-personalize input {
  font-family: inherit;
  font-size: 0.95rem;
  min-width: 0;
  flex: 1 1 240px;
  max-width: 320px;
  padding-block: 10px;
  padding-inline: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
}

.journey-track { position: relative; }

.journey-line {
  display: none; /* shown at 900px+ only — see below */
}

/* Fade-up is opt-in, not opt-out: stops/gates are plain, fully-opaque
   content by default (this rule doesn't exist without it), and
   process.js is the only thing that adds .journey-animate — and only
   once it has confirmed IntersectionObserver exists and the user
   hasn't asked for reduced motion. That's the opposite of the site's
   shared .reveal class (opacity:0 by default, shown only once JS
   catches up) — deliberately, since this section's brief requires
   every stop to render with no JS at all, not just no click. */
.journey-animate .journey-stop,
.journey-animate .journey-gate {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.journey-animate .journey-stop.is-visible,
.journey-animate .journey-gate.is-visible {
  opacity: 1;
  transform: none;
}

.journey-list {
  list-style: none;
  position: relative;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.journey-list::before {
  content: "";
  position: absolute;
  /* Centered on the 48px node/marker below (half of 48, minus half
     the line's own 3px width). */
  inset-inline-start: 23px;
  inset-block: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--color-primary), var(--color-seafoam));
}

.journey-stop, .journey-gate {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  column-gap: 20px;
}
.journey-node, .journey-gate-marker { order: 1; flex-shrink: 0; }
.journey-copy, .journey-gate-copy { order: 2; }
.journey-spacer { display: none; }

.journey-node, .journey-gate-marker {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.journey-node {
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: var(--weight-display);
  color: #fff;
}
.journey-node svg { width: 22px; height: 22px; }
.journey-node--loop .journey-node-shape { width: 38px; height: 38px; }
.journey-node-shape {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.journey-color-1 { background: var(--color-primary); }
.journey-color-2 { background: var(--color-primary-deep); }
.journey-color-3 { background: var(--color-seafoam); }
.journey-color-4 { background: var(--color-teal); }
.journey-color-5 { background: var(--color-cyan); }
.journey-color-loop { background: var(--color-deepwater); }

.journey-copy { padding-block-start: 6px; }
.journey-tag {
  font-size: 0.72rem;
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-block-end: 2px;
}
.journey-copy h3 { margin-block-end: 4px; }
.journey-copy p:last-child { color: var(--text-muted); font-size: 0.9rem; }

/* ---------- Content-check gates: a chokepoint ON the line ---------- */
/* Masks the line behind the diamond so it doesn't show through at the
   corners/edges. Shaped and sized to match the diamond's own footprint
   (44px + a hairline buffer for anti-aliasing) rather than a circle —
   a circle's diameter has to clear the diamond's widest (diagonal)
   point, which left a visible gap of bare background on each side
   before the line resumed. */
.journey-gate-marker::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 8px;
  background: var(--bg-surface);
  z-index: -1;
}
.journey-gate-diamond {
  width: 44px;
  height: 44px;
  transform: rotate(45deg);
  border-radius: 8px;
  background: var(--color-seafoam);
  box-shadow: var(--shadow-control);
  display: flex;
  align-items: center;
  justify-content: center;
}
.journey-gate-diamond svg { width: 20px; height: 20px; color: #fff; transform: rotate(-45deg); }
.journey-gate-copy { padding-block-start: 10px; }
.journey-gate-label {
  font-weight: var(--weight-label);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-accent-text);
  margin-block-end: 2px;
}
.journey-gate-copy p:last-child { color: var(--text-muted); font-size: 0.88rem; }

/* ---------- 900px+: horizontal line, stops alternating above/below ---------- */
@media (min-width: 900px) {
  .journey-track { padding-block: 48px 24px; }

  .journey-list::before { display: none; }

  /* A plain CSS gradient bar, not an SVG stroke — solid and fully
     visible at all times, connecting each stop to the next. */
  .journey-line {
    display: block;
    position: absolute;
    inset-inline: 0;
    /* track's 48px top padding + the 190px copy/spacer slot + half the
       48px icon = where the icon row's vertical center actually sits */
    inset-block-start: 262px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: linear-gradient(to right, var(--color-primary), var(--color-seafoam));
    z-index: 0;
    pointer-events: none;
  }

  .journey-list {
    position: relative;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  .journey-stop, .journey-gate {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    column-gap: 0;
  }
  /* Desktop relies on literal DOM order (copy/icon/spacer for the
     "above" variant, spacer/icon/copy for "below") instead of the
     mobile `order` overrides, so unset those here. */
  .journey-node, .journey-gate-marker, .journey-copy, .journey-gate-copy { order: initial; }

  .journey-copy, .journey-gate-copy, .journey-spacer {
    display: flex;
    flex-direction: column;
    /* Taller than the default copy strictly needs, so a typed-in
       project name (process.js .journey-personalize) has room to wrap
       to an extra line or two without overflowing into the row above
       or below it — see the matching .journey-line math above. */
    height: 190px;
    width: 100%;
    text-align: center;
    padding-block-start: 0;
  }
  .journey-spacer { display: block; }
  .journey-stop--above .journey-copy,
  .journey-gate--above .journey-gate-copy {
    justify-content: flex-end;
    padding-block-end: 14px;
  }
  .journey-stop--below .journey-copy,
  .journey-gate--below .journey-gate-copy {
    justify-content: flex-start;
    padding-block-start: 14px;
  }

  .journey-node-shape { margin-inline: auto; }
}