/**
 * Section: How it works ("How ordering works")
 *
 * The design's four steps: an icon in a soft circle (pink, lilac,
 * alternating), a numbered badge on its lower edge, dotted connectors
 * between circles on wide screens. Centred head. Mobile first.
 */

.how-it-works {
  background: var(--surface);
  padding-block: var(--section-space-m);
  padding-inline: var(--space-gutter);
}

.how-it-works > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

.how-it-works .section-head {
  align-items: center;
  text-align: center;
}

.hiw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-m);
  width: 100%;
}

.hiw-step {
  position: relative;
  display: grid;
  grid-template-areas:
    "icon"
    "title"
    "body";
  /* Rows hug their content, so a step with a two-line title does not push
     its neighbours' icons and titles out of line. */
  align-content: start;
  justify-items: center;
  gap: var(--space-2xs);
  text-align: center;
}

.hiw-icon {
  grid-area: icon;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--step-icon-size);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--brand-tint-pink);
  color: var(--brand-accent);
}

.hiw-step:nth-child(even) .hiw-icon {
  background: var(--brand-tint-lilac);
  color: var(--brand-secondary);
}

.hiw-icon .icon {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The number badge sits on the circle's lower edge. It comes first in the
   DOM (screen readers hear "1, Choose your item"), so the grid places it. */
.hiw-num {
  grid-area: icon;
  align-self: end;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--step-badge-size);
  aspect-ratio: 1;
  translate: 0 50%;
  border: var(--border-thin) solid var(--white);
  border-radius: var(--radius-pill);
  background: var(--brand-accent);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
}

.hiw-step:nth-child(even) .hiw-num {
  background: var(--brand-secondary);
}

.hiw-step h3 {
  grid-area: title;
  padding-block-start: var(--space-s);
  font-size: var(--text-h4);
}

.hiw-step p {
  grid-area: body;
  max-width: 24ch;
  font-size: var(--text-small);
}

.hiw-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
}

@media (min-width: 62rem) {
  .hiw-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Dotted connector from this circle towards the next. */
  .hiw-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--step-icon-size) / 2);
    left: calc(50% + 4rem);
    right: calc(-50% + 4rem);
    border-top: 4px dotted var(--gingham-pink);
  }

  .hiw-step:nth-child(even):not(:last-child)::after {
    border-color: var(--hairline-strong);
  }
}