/* Independent process-card template; shared Flowline typography and carousel. */
.pattern-process-cards {
  background:var(--color-surface);
}
.process-cards {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-6);
  margin:0;
  padding:0;
  list-style:none;
}
.pattern-process-cards .flow-viewport {
  overflow:visible;
  scroll-snap-type:none;
}
.pattern-process-cards .flow-controls {display:none}
.process-cards__card {
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:var(--space-6);
  border-radius:var(--action-radius);
  background:var(--color-blue);
  color:var(--color-surface);
}
.process-cards__card--final {
  grid-column:span 2;
  background:var(--color-dark);
}
.process-cards__number {
  display:block;
  align-self:flex-start;
  min-width:1.25em;
  margin-bottom:var(--space-6);
  padding-bottom:var(--space-4);
  border-bottom:1px solid color-mix(in srgb,var(--color-surface) 45%,transparent);
  font-size:var(--type-display);
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  font-weight:var(--weight-medium);
  font-variant-numeric:tabular-nums;
}
.process-cards__title {
  margin:0;
  font-size:var(--type-card);
  line-height:var(--leading-card);
  letter-spacing:var(--tracking-card);
  font-weight:var(--weight-medium);
  text-wrap:wrap;
  overflow-wrap:break-word;
}
.process-cards__description {
  max-width:var(--measure-intro);
  margin:var(--space-4) 0 0;
  font-size:var(--type-body);
  line-height:var(--leading-body);
  font-weight:var(--weight-regular);
  overflow-wrap:break-word;
}
@media (min-width:1024px) and (max-width:1199px) {
  .process-cards__card {padding:var(--space-4)}
}
@media (max-width:1023px) {
  .pattern-process-cards .flow-viewport {
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
  }
  .pattern-process-cards .flow-controls {display:flex}
  .process-cards {
    --process-gap:var(--space-6);
    --process-card-basis:calc((100% - var(--process-gap))/2);
    display:flex;
    gap:var(--process-gap);
  }
  /* Allow the final step to reach the same start position as earlier steps. */
  .process-cards::after {
    content:"";
    flex:0 0 calc(100% - var(--process-card-basis) - var(--process-gap));
  }
  .process-cards__card {
    flex:0 0 var(--process-card-basis);
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
}
@media (max-width:767px) {
  .process-cards {
    --process-gap:var(--space-4);
    --process-card-basis:min(360px,calc(100% - 48px));
  }
}