/**
 * Section: How It Works
 * Ported from .docs/mockup/css/sections.css (HOW IT WORKS block, lines
 * 918-1048) and the .hiw-grid / .hiw-step / .hiw-num / .hiw-icon /
 * .hiw-actions rules in the shared responsive block (980px + 480px).
 * Tokens only — no hardcoded colours or sizes, with two exceptions below.
 *
 * `#fff` (pure white) has no exact token match — `--off-white` is #FAFAF7,
 * a warmer tone used elsewhere for cards — so the mockup's literal is kept
 * verbatim rather than substituted for a token that isn't actually the same
 * colour. `rgba(27, 94, 122, 0.08)` does match `--hairline-soft` exactly and
 * is tokenised.
 */

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

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

.how-it-works .section-title-group {
  align-items: center;
}

.hiw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-m);
  max-width: var(--container);
  margin-inline: auto;
  position: relative;
}

/* Connector rail — runs behind the cards and shows through the gaps at the
   icon centres, so the four steps still read as one connected timeline. */
.hiw-grid::before {
  content: "";
  position: absolute;
  top: calc(var(--space-l) + 32px);
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--deep-ocean) 0%, var(--coastal-blue) 100%);
  opacity: 0.3;
  z-index: 0;
}

.hiw-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-xs);
  padding: var(--space-l) var(--space-m) var(--space-m);
  background: var(--white);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal);
}

.hiw-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hiw-num {
  position: absolute;
  top: calc(var(--space-l) - 9px);
  left: calc(var(--space-m) + 44px);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--terracotta);
  color: var(--white);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  z-index: 2;
}

.hiw-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--coastal-soft);
  border-radius: 50%;
  border: 2px solid var(--deep-ocean);
  color: var(--deep-ocean);
  position: relative;
  z-index: 1;
}

.hiw-icon .material-symbols-outlined {
  font-size: 30px;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 32;
}

.hiw-step h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--deep-ocean);
  letter-spacing: -0.01em;
  margin-top: var(--space-2xs);
}

.hiw-step p {
  font-size: var(--text-small);
  color: var(--graphite);
  line-height: 1.6;
  max-width: none;
}

.hiw-intro {
  max-width: 620px;
}

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


/* === RESPONSIVE === */
@media (max-width: 980px) {
  /* How it works — 2x2 grid on tablet */
  .hiw-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-l) var(--space-m);
  }

  /* Rail only makes sense as a single 4-across row; hide it once the grid wraps */
  .hiw-grid::before {
    display: none;
  }
}

@media (max-width: 480px) {
  /* How it works — single column on mobile */
  .hiw-grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }

  .hiw-step {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
    column-gap: var(--space-s);
    row-gap: var(--space-xs);
  }

  .hiw-num {
    position: static;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  .hiw-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
  }

  .hiw-icon .material-symbols-outlined {
    font-size: 26px;
  }

  /* Heading and paragraph each take a full-width row below the num + icon */
  .hiw-step h3 {
    font-size: 16px;
    flex-basis: 100%;
  }

  .hiw-step p {
    max-width: none;
    flex-basis: 100%;
  }

  /* Stack the CTAs full-width so they share the same width */
  .hiw-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hiw-actions .btn-primary,
  .hiw-actions .btn-outline {
    justify-content: center;
  }
}