/**
 * Step rail.
 *
 * `pages.css` §8 owns `.step-rail`, `.step`, the numbered marker, the dashed
 * joining line and `.step__meta`. None of that is repeated here. This file adds
 * only the four optional parts the kit does not carry, ported from
 * `_mockups/process.html` (`.p-lanes`, `.p-slow`) and `_mockups/partners.html`
 * (`.p-rail-legend`, `.p-ext`, `.p-meta-ext`, `.p-step-note`).
 *
 * NOTE ON THE ROOT CLASS. The section's own wrapper is `.step-rail__band`, not
 * `.step-rail` – the kit already means something specific by `.step-rail` (the
 * <ol> that resets the counter and centres at container-narrow), and putting
 * that class on the outer <section> as well would apply the grid twice.
 *
 * SPECIFICITY, deliberately. Two rules below have to beat kit rules that carry
 * a pseudo-class:
 *   `.step.step-rail__step--external::before` ties with `.step:last-child::before`
 *   `.step__meta.step-rail__meta--external`   ties with `.step__meta`
 * A tie is enough because section stylesheets load after pages.css (see
 * inc/enqueue.php). This is what makes the last step of the employer rail draw
 * dashed-gold rather than solid gold, which is what the mock-up renders.
 *
 * Breakpoints are literal px because `var()` is invalid inside a media query.
 */

.step-rail__band {
  scroll-margin-block-start: var(--sticky-offset);
}

.step-rail__head {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-block-end: var(--s-5);
}

/* ---------------------------------------------------------------------------
 * Legend. Only rendered when a step is flagged as externally paced, because a
 * dashed gold circle with nothing explaining it is just an inconsistency.
 * ------------------------------------------------------------------------- */
.step-rail__legend {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-block-end: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-soft);
}

.step-rail__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}

.step-rail__dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  flex: none;
  background: var(--blue);
}

.step-rail__dot--external {
  background: var(--paper);
  border: 2px dashed var(--gold-deep);
}

/* ---------------------------------------------------------------------------
 * A stage FINAS does not pace. Dashed gold marker, gold badge.
 * ------------------------------------------------------------------------- */
.step.step-rail__step--external::before {
  background: var(--paper);
  color: var(--navy);
  border: 2px dashed var(--gold-deep);
}

.step__meta.step-rail__meta--external {
  color: var(--gold-deep);
  background: var(--gold-tint-15);
}

/* ---------------------------------------------------------------------------
 * The two lanes. Rendered only when both sides are filled – half a comparison
 * reads as an omission, so the renderer drops the block rather than the lane.
 * ------------------------------------------------------------------------- */
.step-rail__lanes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin-block-start: var(--s-3);
}

.step-rail__lane {
  border-radius: var(--r-m);
  padding: var(--s-3) var(--s-4);
}

.step-rail__lane-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-block-end: 0.4em;
}

.step-rail__lane--you {
  background: var(--blue-tint-05);
  border: 1px solid var(--blue-tint-20);
}
.step-rail__lane--you .step-rail__lane-label { color: var(--blue); }
.step-rail__lane--you p { color: var(--ink-soft); }

.step-rail__lane--we {
  background: var(--navy);
  border: 1px solid var(--navy);
}
.step-rail__lane--we .step-rail__lane-label { color: var(--gold); }
.step-rail__lane--we p { color: var(--on-dark-strong); }

/* ---------------------------------------------------------------------------
 * The flagged caveat: the honest "this is the slow part" panel.
 * Logical radius longhands, so the gold rule stays on the leading edge in RTL.
 * ------------------------------------------------------------------------- */
.step-rail__caveat {
  margin-block-start: var(--s-3);
  background: var(--gold-tint-15);
  border-inline-start: 3px solid var(--gold-deep);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--r-m);
  border-end-end-radius: var(--r-m);
  padding: var(--s-3) var(--s-4);
}

.step-rail__caveat b {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-block-end: 0.35em;
}

.step-rail__caveat p { color: var(--ink-soft); }

/* Fine print under a step – a qualifier, not a warning. */
.step-rail__note {
  margin-block-start: var(--s-2);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

@media (max-width: 640px) {
  .step-rail__lanes { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * The closing panel.
 *
 * Sits below the last step, inside the rail's own section, and reads as the
 * rail's coda rather than as a new block. Gold-tinted, because what it says is
 * the TAHANAN promise: the relationship does not end at the airport.
 * ------------------------------------------------------------------------- */
.step-rail__after {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-block-start: var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--gold-tint-15);
  border: 1px solid var(--brand-highlight-line);
  border-radius: var(--r-card);
  padding: var(--s-4) var(--s-5);
}

.step-rail__after-image {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: var(--r-m);
  flex: none;
}

.step-rail__after p {
  font-size: var(--text-base);
  color: var(--ink);
}

/* Gold as TEXT needs the AA-safe shade, never the display gold. */
.step-rail__after b { color: var(--gold-deep); }

@media (max-width: 620px) {
  .step-rail__after {
    flex-direction: column;
    align-items: stretch;
  }

  .step-rail__after-image {
    width: 100%;
    height: 130px;
  }
}