/* Typography here is driven entirely by the section/block typography settings
   (the `title*` / `body*` classes). Deliberately no font-family, font-size or
   font-weight below: those selectors would tie with the typography classes on
   specificity and win on source order, making the settings inert. */

.step-line {
  --step-dot-size: 26px;
  --step-dot-inner-size: 18px;
  --step-line-color: #e6e6e6;
  --step-dot-color: #191919;

  background-color: rgb(var(--color-background));
}

.step-line__heading {
  margin: 0 0 64px;
  color: rgb(var(--color-text));
}

/* ---- the row of steps ---- */
.step-line__steps {
  position: relative;
  display: grid;
  /* no column-gap: the connecting line below assumes columns of exactly 100%/N */
  grid-template-columns: repeat(var(--step-count, 3), minmax(0, 1fr));
  align-items: start;
}

/* connector: spans from the centre of the first dot to the centre of the last.
   With N equal columns those centres sit at 50%/N from each edge. */
.step-line__steps::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--step-dot-size) / 2);
  inset-inline: calc(50% / var(--step-count, 3));
  height: 1px;
  background-color: var(--step-line-color);
}

/* ---- one step ---- */
.step-line__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding-inline: 16px;
}

.step-line__dot {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--step-dot-size);
  height: var(--step-dot-size);
  /* opaque, so it masks the connector running behind it */
  background-color: rgb(var(--color-background));
  border: 1px solid var(--step-line-color);
  border-radius: 50%;
}

.step-line__dot::after {
  content: "";
  width: var(--step-dot-inner-size);
  height: var(--step-dot-inner-size);
  background-color: var(--step-dot-color);
  border-radius: 50%;
}

/* full width so the text_align setting has something to align within */
.step-line__number {
  display: block;
  width: 100%;
  margin-block-start: 30px;
  color: rgb(var(--color-text));
}

.step-line__step-title {
  width: 100%;
  margin: 14px 0 0;
  color: rgb(var(--color-text));
}

.step-line__text {
  width: 100%;
  max-width: 300px;
  margin: 14px 0 0;
  color: rgb(var(--color-light-text));
}

/* ---- responsive ---- */
@media (max-width: 959px) {
  .step-line__heading {
    margin-block-end: 40px;
  }

  .step-line__steps {
    --step-row-gap: 36px;

    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--step-row-gap);
  }

  /* the steps no longer sit on one row, so the horizontal connector would be wrong */
  .step-line__steps::before {
    display: none;
  }

  /* vertical timeline instead: dot column on the right, content to its left,
     so the connector has a lane of its own and never runs through the text */
  .step-line__step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--step-dot-size);
    column-gap: 20px;
    align-items: start;
    padding-inline: 0;
  }

  .step-line__dot {
    grid-column: 2;
    grid-row: 1;
  }

  .step-line__number,
  .step-line__step-title,
  .step-line__text {
    grid-column: 1;
  }

  .step-line__number {
    /* on desktop this clears the dot above it; here the dot sits alongside */
    margin-block-start: 0;
  }

  .step-line__text {
    max-width: none;
  }

  /* one segment per step: from this dot's centre down into the next step's dot,
     which is opaque and closes the join */
  .step-line__step::after {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--step-dot-size) / 2);
    inset-block-end: calc(var(--step-row-gap) * -1);
    inset-inline-end: calc(var(--step-dot-size) / 2);
    width: 1px;
    background-color: var(--step-line-color);
    transform: translateX(50%);
  }

  .step-line__step:last-child::after {
    display: none;
  }
}