/* Process steps, ported from NI26 styles/ni-components.css (2. Process Steps,
   .nic-ps__grid, .nic-ps__step, .nic-ps__num, .nic-ps__title, .nic-ps__body).
   The connector line spans the whole gap between two cards at the height of
   the number circles (NI26 drew a short stub across the card edge). The band
   background comes from the section (_layout.css). */

.ni-process-steps__list {
  --ni-process-steps-gap: var(--space-6);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ni-process-steps-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ni-process-steps--n2 .ni-process-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ni-process-steps--n3 .ni-process-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Five in a row: a little less gap and side padding keeps the text column wide
   enough to read. */
.ni-process-steps--n5 .ni-process-steps__list {
  --ni-process-steps-gap: var(--space-5);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ni-process-steps__step {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: var(--space-7) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.ni-process-steps--n5 .ni-process-steps__step { padding-right: var(--space-5); padding-left: var(--space-5); }

/* Connector: from the outer edge of this card's border to the next card,
   centered on the 40px number circle (padding top plus half the circle). */
.ni-process-steps__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--space-7) + (var(--space-10) / 2) - 1px);
  left: calc(100% + 1px);
  width: var(--ni-process-steps-gap);
  height: 2px;
  background: var(--border-strong);
  pointer-events: none;
}

.ni-process-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--ni-blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ni-process-steps__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-strong);
  overflow-wrap: break-word;
}

.ni-process-steps__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  overflow-wrap: break-word;
}

/* ---------- Navy band ----------
   Keyed on the section, like the shared band rules and NI Card Grid, so the
   cards flip whichever module in the section picked Navy. */
.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-process-steps__step {
  background: var(--on-dark-fill);
  border-color: var(--on-dark-fill-strong);
}

.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-process-steps__step:not(:last-child)::after { background: var(--on-dark-fill-strong); }
.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-process-steps__title { color: #fff; }
.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-process-steps__desc { color: var(--fg-on-dark-muted); }

/* Browsers without :has() paint the band on the module itself (_layout.css);
   these follow it. Kept apart because one unknown selector drops a whole rule. */
@supports not selector(:has(a)) {
  .ni-process-steps[data-ni-bg="dark"] .ni-process-steps__step { background: var(--on-dark-fill); border-color: var(--on-dark-fill-strong); }
  .ni-process-steps[data-ni-bg="dark"] .ni-process-steps__step:not(:last-child)::after { background: var(--on-dark-fill-strong); }
  .ni-process-steps[data-ni-bg="dark"] .ni-process-steps__title { color: #fff; }
  .ni-process-steps[data-ni-bg="dark"] .ni-process-steps__desc { color: var(--fg-on-dark-muted); }
}

/* ---------- Breakpoints ---------- */
@media (max-width: 1100px) {
  .ni-process-steps--n5 .ni-process-steps__list { --ni-process-steps-gap: var(--space-4); }
  .ni-process-steps--n5 .ni-process-steps__step { padding-right: var(--space-4); padding-left: var(--space-4); }
  .ni-process-steps--n5 .ni-process-steps__title { font-size: var(--text-base); }
}

/* Two columns: the row no longer reads left to right as one line, so the
   connectors go, and five-step cards get their full padding back. */
@media (max-width: 960px) {
  .ni-process-steps .ni-process-steps__list {
    --ni-process-steps-gap: var(--space-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ni-process-steps .ni-process-steps__step { padding-right: var(--space-6); padding-left: var(--space-6); }
  .ni-process-steps .ni-process-steps__title { font-size: var(--text-md); }
  .ni-process-steps__step:not(:last-child)::after { content: none; }
}

@media (max-width: 560px) {
  .ni-process-steps .ni-process-steps__list {
    --ni-process-steps-gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
  }
}