/* The journey panel (journeys/_journey_steps.html, ADR 0116) on the template, assessment,
   learning path and article pages of a journey: a bordered card (.card--bordered,
   frontend-css-conventions.md rule B) in black, white and grey. The page you're on is said
   in words ("You're here") as well as shaded, so colour is never the only cue, and in forced
   colours, which drop the shade, the words remain. */
.journey-steps {
  margin: 2rem 0;
}

.journey-steps .card-body {
  padding: 1.5rem;
}

.journey-steps__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.journey-steps__lede {
  color: var(--site-muted-text-color, #5c6672);
  margin: 0 0 0.75rem;
}

.journey-steps__list,
.journey-steps__extras {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The step's word in a column of its own, the item beside it; one column on a phone. */
.journey-steps__step {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding: 0.85rem 0;
}

.journey-steps__step + .journey-steps__step {
  border-top: 1px solid #dee2e6;
}

/* The shade runs to the card's edges, past the body's padding. */
.journey-steps__step--current {
  margin: 0 -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  background: #f2f5f3;
}

.journey-steps__word {
  font-weight: 700;
}

.journey-steps__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.journey-steps__name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.journey-steps__here {
  font-size: 0.875rem;
  font-weight: 700;
}

.journey-steps__meta {
  color: var(--site-muted-text-color, #5c6672);
  font-size: 0.875rem;
}

.journey-steps__extras {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid #dee2e6;
}

.journey-steps__extras li + li {
  margin-top: 0.35rem;
}

.journey-steps__extras-label {
  font-weight: 700;
  margin-right: 0.25rem;
}

@media (max-width: 575.98px) {
  .journey-steps .card-body {
    padding: 1.25rem;
  }

  .journey-steps__step {
    grid-template-columns: minmax(0, 1fr);
  }

  .journey-steps__step--current {
    margin: 0 -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}