/* Process steps (library block, T26). Tokens only; written for phones first. Static: no motion.
   Prototype "steps" (Numbered): a blue keyline over each card, the number 64 px light in Boyd Blue
   (large display type, A2), title 23 px, text 15 px in slate. Prototype "journey" (With images): a 16:10
   photo with a 20 px radius, then the keyline, the number 14 px bold, title 20–24 px and text.
   Columns: phones 1 per row, from 600 px 2 per row, from 1024 px 3 or 4 per row (5 or 6 steps wrap at 3).
   Closing line: a hairline, then the line and a text link (shared/actionButton, text-link style). */

.process-steps__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}
.process-steps__heading { margin: 0; max-width: 880px; overflow-wrap: break-word; }
.process-steps__intro {
  margin: 0;
  max-width: 560px;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--color-text);
  overflow-wrap: break-word;
}

.process-steps__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8) var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}
.process-steps__step {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.process-steps__body {
  border-top: var(--border-width) solid var(--color-accent-line);
  overflow-wrap: break-word;
}
.process-steps__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  letter-spacing: var(--ls-heading);
  color: var(--color-heading);
}
.process-steps__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* Numbered. Phones: the number sits beside the title, the text under the title. */
.process-steps--numbered .process-steps__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-4);
}
.process-steps--numbered .process-steps__number {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: var(--fs-display-4);
  font-weight: var(--fw-light);
  line-height: .9;
  letter-spacing: -0.03em;
  color: var(--c-brand);
}
.process-steps--numbered .process-steps__title { font-size: var(--fs-h3); }

/* With images: photo, then number, title and text, one after another in the step's column. */
.process-steps__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-media);
}
.process-steps--images .process-steps__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
}
.process-steps--images .process-steps__number {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-label);
  color: var(--color-eyebrow);
}
.process-steps--images .process-steps__title { font-size: clamp(20px, 1.7vw, var(--fs-card-title)); }

.process-steps__closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-hairline);
}
.process-steps__closing-text {
  margin: 0;
  max-width: 100%;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-tight);
  color: var(--color-heading);
  overflow-wrap: break-word;
}

/* Edit mode only (BV-b walk N5): the "Add a closing line" and "Add a closing link" slots share one baseline and the
   closing line's size; Visual's canvas.css keeps their prompt at least 11 px on screen at small scales. */
.process-steps__closing:has(> [data-ve-empty]) { align-items: baseline; font-size: var(--fs-body-lg); }
.process-steps__closing > [data-ve-empty] { margin: 0; line-height: var(--lh-body-tight); }

@media (min-width: 600px) {
  .process-steps__list:not(.process-steps__list--cols-1) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .process-steps__list.process-steps__list--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process-steps__list.process-steps__list--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Desktop Numbered: the prototype's stacked card, number above the title. */
  .process-steps--numbered .process-steps__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-5);
  }
  .process-steps--numbered .process-steps__number { font-size: 64px; }   /* prototype step number */
  .process-steps--numbered .process-steps__title { font-size: var(--fs-card-title); }
}