/**
 * Services rail.
 *
 * The card, the grid and the counter are already the kit's: `.card`, `.grid` and
 * `.numbered` in pages.css §6 do the box, the stack and the numbering. This file
 * adds only the three things the kit has no opinion about – the legend, the
 * counter's position inside the card, and the dashed handover line that runs
 * through the gap between one service and the next.
 *
 * Ported from `_mockups/services.html`, `.p-legend` and `.p-svc*`.
 */

/* The rail is deliberately narrower than the container: six stacked cards at
   full width read as a wall. The mock-up used 980px; --container-narrow is the
   nearest token and the difference is not perceptible against the gutter. */
.services-rail__list { max-width: var(--container-narrow); }

/* --- The legend ---------------------------------------------------------- */
.services-rail__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  margin-inline: auto;
  margin-block: var(--s-4) var(--s-5);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-soft);
}
.services-rail__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}
.services-rail__key {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}
.services-rail__key--applicant { background: var(--blue); }
.services-rail__key--employer { background: var(--gold-deep); }

/* --- One service --------------------------------------------------------- */
.services-rail__item { position: relative; }

/* The kit prints the counter as a block above the card's content. Here it
   belongs in the top corner, out of the reading order of the title. */
.numbered .services-rail__item::before {
  position: absolute;
  top: var(--s-3);
  inset-inline-end: var(--s-4);
  font-size: var(--text-2xl);
}

/* The dashed handover line, running through the gap to the next service. Sits
   under the icon well: --s-5 is the card's inline padding, 22px centres a 2px
   rule under the 46px .card__icon. */
.services-rail__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 100%;
  height: var(--s-4);
  width: 2px;
  inset-inline-start: calc(var(--s-5) + 22px);
  background-image: linear-gradient(180deg, var(--blue-tint-20) 55%, transparent 45%);
  background-size: 2px 10px;
}

.services-rail__head {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  /* Keeps the title clear of the counter in the corner above it. */
  padding-inline-end: calc(var(--s-6) + var(--s-1) / 2);
}
.services-rail__head h3 {
  font-size: var(--text-lg);
  margin-block-end: 0.35em;
}
.services-rail__head p {
  font-size: var(--text-s);
  color: var(--ink-soft);
}

/* --- The applicant / employer split -------------------------------------- */
.services-rail__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin-block-start: var(--s-3);
}
.services-rail__audience {
  border-radius: var(--r-s);
  padding: var(--s-2) var(--s-3);
  font-size: var(--text-xs);
  line-height: 1.55;
}
.services-rail__audience b {
  display: block;
  font-family: var(--display);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-block-end: 0.35em;
}
.services-rail__audience p {
  color: var(--ink-soft);
  font-size: var(--text-xs);
}
.services-rail__audience--applicant {
  background: var(--blue-tint-05);
  border-inline-start: 3px solid var(--blue);
}
.services-rail__audience--applicant b { color: var(--blue); }
.services-rail__audience--employer {
  background: var(--gold-tint-15);
  border-inline-start: 3px solid var(--gold-deep);
}
.services-rail__audience--employer b { color: var(--gold-deep); }

@media (max-width: 560px) {
  .services-rail__split { grid-template-columns: 1fr; }
  .services-rail__head {
    padding-inline-end: calc(var(--s-5) + var(--s-1));
    flex-wrap: wrap;
  }
}