/* ============================================================
   Shift Journey — shared timeline primitives.
   Consumed by sections/shift-split/.

   Reconstructed from the section markup + the reference screenshot
   provided by the user. All colors / spacing / type flow from theme
   tokens so this file inherits any changes to brand color, type
   ramp, or space scale.
   ============================================================ */

/* ----------------------------------------------------------------
   Outer section wrapper.
   The section template sets --sj-section-pt / --sj-section-pb from
   the schema padding-top/bottom selects. */
.sj-section,
.sj-split-wrap__section {
  padding-top:    var(--sj-section-pt, var(--space-3xl));
  padding-bottom: var(--sj-section-pb, var(--space-3xl));
}

/* ----------------------------------------------------------------
   Journey container.
   Holds the timeline header and the ordered list of stops. */
.sj-journey {
  max-width: 640px;
  margin-inline: auto;
}

.sj-journey__header {
  margin-bottom: var(--space-2xl);
}

.sj-journey__heading {
  font-family: var(--font-primary);
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-5xl));
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--clr-text-primary);
  font-weight: 400;
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}

.sj-journey__intro {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.55;
  color: color-mix(in srgb, var(--clr-text-primary) 70%, transparent);
  margin: 0;
  max-width: 48ch;
}

/* ----------------------------------------------------------------
   Timeline path.
   Vertical list of stops with a faint coral rule running behind
   the marker column. Generous gap between stops for editorial
   breathing room. */
.sj-journey__path {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

/* Connecting rule — runs from the first node center to the last,
   sitting behind the markers. Faint coral so it reads as a thread
   tying the stops together, not a heavy divider. */
.sj-journey__path::before {
  content: "";
  position: absolute;
  left: 8px;            /* centers under the node column */
  top: 14px;            /* aligns with first node center */
  bottom: 14px;         /* aligns with last node center */
  width: 1px;
  background: color-mix(in srgb, var(--clr-tertiary) 55%, transparent);
  pointer-events: none;
}

/* ----------------------------------------------------------------
   Individual stop.
   Two-column row: marker on the left, content on the right. */
.sj-journey__stop {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
  position: relative;
}

/* Marker column — a circular outlined dot. Sits over the connecting
   rule (z-index lifts it above ::before). */
.sj-journey__marker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
}

.sj-journey__node {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--clr-bg-page, var(--clr-white));
  border: 2px solid var(--clr-tertiary);
  box-sizing: border-box;
}

.sj-journey__node--filled {
  background: var(--clr-tertiary);
  border-color: var(--clr-tertiary);
}

/* ----------------------------------------------------------------
   Content column — editorial serif at body-comfortable size.
   Both the question paragraphs and the closing "drop" statement
   share the same type treatment; the only differentiation between
   them is the filled vs. outlined marker on the left. */
.sj-journey__content {
  padding-top: 0;
}

.sj-journey__q,
.sj-journey__drop p {
  font-family: var(--font-primary);
  font-size: var(--font-size-lg);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--clr-text-primary);
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}

/* The closing drop is an unstyled <blockquote> — strip default
   browser margins so it sits flush with the marker like the other
   stops, with no left rule or quote indent. */
.sj-journey__drop {
  margin: 0;
  padding: 0;
  border: 0;
}

@media (min-width: 1024px) {
  .sj-journey__q,
  .sj-journey__drop p {
    font-size: var(--font-size-xl);
  }
}