/* =====================================================================
   HP - How It Works (Figma UK desktop 10125:22340 / mobile 10129:376)
   Dark gradient band (black -> deep navy). Centered eyebrow + gradient
   H2 + subtitle, then a row of three equal image feature cards.
   Content locked to 1240 inside .container. BEM, prefixed hp-how-it-works-.
   Tokens only.
   ===================================================================== */

.hp-how-it-works {
  /* black -> #071f39 (--breakout-grad-dark), stop at 70.2% per node */
  background-image: var(--hp-hiw-bg-grad);
  padding-block: var(--home-sec-pad-y);
  color: var(--gray-0);
}

.hp-how-it-works__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--home-steps-stack-gap); /* 40px between head and cards */
}

/* ---- Header (centered hero content) ---- */
.hp-how-it-works__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--home-stack-gap); /* 20px */
  width: 100%;
  text-align: center;
}

/* Eyebrow — OG Desktop H4 (Axiforma SemiBold 20/100%) */
.hp-how-it-works__eyebrow {
  margin: 0;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: normal;
  color: var(--gray-0);
}

.hp-how-it-works__titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hp-hiw-title-gap);
  width: 100%;
}

/* Heading — OG Desktop H2 (Axiforma Medium 32/45), soft-blue -> white text gradient */
.hp-how-it-works__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  background-image: var(--hp-hiw-text-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subheading — OG Desktop H3 (Axiforma Medium 24/1.2) */
.hp-how-it-works__subheading {
  margin: 0;
  max-width: var(--hp-hiw-subhead-max);
  font-weight: var(--fw-medium);
  font-size: var(--fs-24);
  line-height: 1.2;
  color: var(--gray-0);
}

/* ---- Feature card row ---- */
.hp-how-it-works__cards {
  display: flex;
  align-items: flex-start;
  gap: var(--home-stack-gap); /* 20px */
  width: 100%;
}

.hp-how-it-works__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--home-stack-gap); /* 20px */
  border-radius: var(--radius-8);
}

/* Image — 360x360, rounded 8 */
.hp-how-it-works__media {
  width: 100%;
  max-width: var(--hp-hiw-card-size);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-8);
  overflow: hidden;
}
.hp-how-it-works__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-8);
}

.hp-how-it-works__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hp-hiw-title-gap);
  text-align: center;
}

/* Card title — OG Desktop H3 (Axiforma Medium 24/1.2) */
.hp-how-it-works__card-title {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-24);
  line-height: 1.2;
  color: var(--gray-0);
}

/* Card body — OG Desktop Normal Body (Axiforma Regular 16/normal) */
.hp-how-it-works__card-body {
  margin: 0;
  max-width: var(--hp-hiw-body-max);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: normal;
  color: var(--gray-0);
}

/* ---- Tablet + large-mobile (≤1023): swipe carousel (≈2 cards + peek) instead
   of a 2-up grid — the cards swipe within the content column rather than
   wrapping/stacking. ---- */
@media (max-width: 1023.98px) {
  .hp-how-it-works__eyebrow {
    font-size: var(--fs-18);
  }

  .hp-how-it-works__heading {
    font-size: var(--fs-28);
    line-height: var(--lh-36);
  }

  .hp-how-it-works__subheading {
    font-size: var(--fs-20);
  }

  /* The row is already a flex row (base); make it swipe instead of wrap. */
  .hp-how-it-works__cards {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hp-how-it-works__cards::-webkit-scrollbar { display: none; }

  .hp-how-it-works__card {
    flex: 0 0 clamp(280px, 46%, 360px);
    scroll-snap-align: start;
  }
}

/* ---- Large-mobile (600–767): step text sizes, keep 2-up grid ---- */
@media (max-width: 767.98px) {
  .hp-how-it-works {
    background-image: var(--hp-hiw-bg-grad-mobile);
    padding-block: 40px;
  }
  .hp-how-it-works__inner {
    gap: var(--home-stack-gap); /* 20px */
  }
  .hp-how-it-works__head {
    gap: var(--hp-hiw-title-gap);
  }
  /* Eyebrow — OG Mobile H4 (Axiforma Medium 18) */
  .hp-how-it-works__eyebrow {
    font-weight: var(--fw-medium);
    font-size: var(--fs-18);
  }
  /* Heading — OG Mobile H2 (Axiforma Medium 26/36) */
  .hp-how-it-works__heading {
    font-size: var(--fs-26);
    line-height: var(--lh-36);
  }
  /* Subheading — OG Mobile Large Body (Axiforma Regular 18/25) */
  .hp-how-it-works__subheading {
    font-weight: var(--fw-regular);
    font-size: var(--fs-18);
    line-height: var(--lh-25);
  }
  /* Title — OG Mobile H4 (Axiforma SemiBold 20) */
  .hp-how-it-works__card-title {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-20);
  }
  .hp-how-it-works__card-body {
    max-width: var(--hp-hiw-body-max-mobile);
  }
}

/* ---- Phone (≤599): one-up + peek, bleeding to the screen edge. The carousel
   mechanics come from the ≤1023.98 rule above; this just narrows to one card,
   bleeds the gutters, and lets the image fill the wider card. ---- */
@media (max-width: 599.98px) {
  .hp-how-it-works__cards {
    align-items: stretch;
    margin-inline: calc(var(--pad-mobile) * -1);
    padding-inline: var(--pad-mobile);
    /* offset the snap start by the gutter so the first card isn't glued */
    scroll-padding-inline: var(--pad-mobile);
  }
  .hp-how-it-works__card {
    flex: 0 0 85%;
  }
  .hp-how-it-works__media {
    max-width: none;
  }
  .hp-how-it-works__img {
    object-fit: contain;
  }
}