/* Route pages (startsprint, project, samenwerking, zorgplan), v3. Loaded from those fragments only; builds on site.css section 26 (.step-svg). */

/* Hero media as a coded SVG: the same tinted slot as a .flow-visual-viz, so hero and step visuals read as one family */
.route-viz {
  margin: 0;
  align-self: center;
  background: linear-gradient(135deg, var(--tint-violet), var(--canvas) 70%);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-3);
  justify-items: center;
}
.route-viz svg {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
}
.route-viz figcaption {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
}

/* Extra step-SVG marks: status pills of a run list, a green status dot, the Brein block */
.step-svg .chip-ok {
  fill: var(--green-tint);
}
.step-svg .t-ok {
  font-size: 14px;
  font-weight: 600;
  fill: var(--green-ink);
}
.step-svg .chip-bad {
  fill: var(--red-tint);
}
.step-svg .t-bad {
  font-size: 14px;
  font-weight: 600;
  fill: var(--red-ink);
}
.step-svg .dot-ok {
  fill: var(--green-ink);
}
.step-svg .dot-wait {
  fill: var(--accent);
}
.step-svg .brain {
  fill: var(--tint-violet);
  stroke: var(--violet);
  stroke-width: 2;
}
.step-svg .t-brain {
  font-size: 18px;
  font-weight: 700;
  fill: var(--violet-deep);
}
.step-svg .t-b {
  font-weight: 700;
}

/* Speech bubbles without a link: the reader's own thoughts, so no hover lift */
.pick-grid-static .pick:hover .pick-quote,
.pick-grid-static .pick:hover .pick-quote::after {
  border-color: var(--hair);
}
.pick-grid-static .pick:hover .pick-quote {
  transform: none;
}
.pick-grid-static + .next-step {
  margin-top: var(--s-7);
}

/* A case card next to a short text (Project "uit de praktijk") */
.route-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: center;
}
.route-case p {
  color: var(--text-2);
  max-width: 52ch;
}
.route-case .more {
  display: inline-block;
  margin-top: var(--s-4);
}

@media (max-width: 900px) {
  .route-viz {
    padding: var(--s-4);
  }
  /* the hero and step SVGs scale to about 0.8 here; 15 keeps the badge text near 12 px on screen */
  .step-svg .t-badge,
  .step-svg .t-ok,
  .step-svg .t-bad,
  .step-svg .lbl {
    font-size: 15px;
  }
  .route-case {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }
}
.route-case h2 {
  margin: var(--s-3) 0 var(--s-4);
}

/* A step with one sentence next to a tall visual: centre the text and keep the pill under it, so no empty column (review R-04) */
.flow-txt-short {
  justify-content: center;
}
.flow-txt-short .flow-pill {
  margin-top: var(--s-5);
}

/* A sorter table (question -> route chip): on the phone one row is the question with its chip, without the repeated column captions (review R-06) */
@media (max-width: 900px) {
  .table-stack.table-sort tr {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-4);
  }
  .table-stack.table-sort td {
    display: block;
  }
  .table-stack.table-sort td::before {
    content: none;
  }
}