/* =============================================================================
   Process timeline — a numbered sequence of steps, used once (index.html
   #process). Docs: sections.md, colors.md, typography.md, spacing-and-layout.md.

   The step marker takes the division treatment: --color-division-brand fill
   with white text. The EdTech *brand* (#268279) is dark and does take white;
   the EdTech *accent* (#5ecec3) does not — see the contrast rule in
   docs/redesign/edtech/contracts.md §1.
   ============================================================================= */

.process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--card-grid-gap);
}

/* The connecting rule runs between the centres of the first and last marker.
   Marker centre = half a column in from each edge, allowing for the 3 gaps. */
.process::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: calc(var(--space-14) / 2);
  left: calc((100% - 3 * var(--card-grid-gap)) / 8);
  right: calc((100% - 3 * var(--card-grid-gap)) / 8);
  height: 1px;
  background-color: var(--color-border);
}

.process__step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.process__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-14);
  height: var(--space-14);
  margin-inline: auto;
  margin-bottom: var(--space-4);
  border-radius: var(--border-radius-pill);
  background-color: var(--color-division-brand);
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 130%;
}

/* typographyH4 — the element is an <h3>, so the level is set here on purpose. */
.process__title {
  margin-bottom: var(--space-2);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 130%;
  color: var(--color-primary);
}

/* typographyBodyRegular */
.process__text {
  margin-bottom: 0;
  font-weight: 500;
  font-size: 1rem;
  line-height: 160%;
  color: var(--color-text-gray);
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .process__title { font-size: 1.375rem; }
  .process__text { font-size: 0.9375rem; }
}

@media (max-width: 900px) {
  .process {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Two rows of markers, so a single horizontal rule no longer connects them. */
  .process::before {
    display: none;
  }
}

/* Single column: the marker moves beside the copy and the step reads left-aligned. */
@media (max-width: 600px) {
  .process {
    grid-template-columns: 1fr;
  }

  .process__step {
    padding-left: calc(var(--space-14) + var(--space-4));
    text-align: left;
  }

  .process__number {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }

  .process__title { font-size: 1.125rem; }
  .process__text { font-size: 0.875rem; }
}