/* Cards: the five workflow steps on the home page and the three support
   entries. A list, so the numbering is real markup; the grid wraps to one
   column on narrow screens. */

.cards {
  display: grid;
  gap: var(--loupewire-space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cards--steps {
  /* 190px × 5 plus four 16px gaps is 1014px, inside the 1056px the container
     leaves after its padding, so the five steps sit in one row on a wide
     screen; narrower screens wrap to two or one. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.cards--three {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--loupewire-space-sm);
  padding: var(--loupewire-space-xl);
  border: 1px solid var(--loupewire-border);
  border-radius: var(--loupewire-radius-lg);
  background: var(--loupewire-surface);
  box-shadow: var(--loupewire-shadow-sm);
}

.card--accent {
  border-color: var(--loupewire-brand-primary);
  background: var(--loupewire-brand-primary-subtle);
}

/* On the tinted card the 12px step label in brand-primary measured 4.46:1
   (Lighthouse, 2026-09-20), a hair under 4.5; the active step of the same
   colour clears it in both themes. */
.card--accent .card__step {
  color: var(--loupewire-brand-primary-active);
}

.card__step {
  font-family: var(--loupewire-font-family-mono);
  font-size: var(--loupewire-font-size-sm);
  font-weight: var(--loupewire-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--loupewire-accent);
}

/* The workflow's step number, in a disc beside the step's name. The number
   is aria-hidden: the <ol> already gives each step its position. */
.card__step {
  display: flex;
  align-items: center;
  gap: var(--loupewire-space-sm);
}

.card__number {
  display: inline-grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--loupewire-radius-full);
  background: var(--loupewire-brand-primary-subtle);
  color: var(--loupewire-brand-primary-active);
  letter-spacing: 0;
}

.card--accent .card__number {
  background: var(--loupewire-brand-primary);
  color: var(--loupewire-brand-primary-ink);
}

.card__title {
  font-size: var(--loupewire-display-sm);
}

.card__body {
  color: var(--loupewire-text-muted);
  font-size: var(--loupewire-font-size-md);
}

.card__link {
  margin-block-start: auto;
  padding-block-start: var(--loupewire-space-sm);
  font-size: var(--loupewire-font-size-md);
  font-weight: var(--loupewire-font-weight-semibold);
  text-decoration: none;
}

.card__link::after {
  content: ' →';
}

.card__link:hover {
  text-decoration: underline;
}