/* =====================================================================
   HP - Why OneGold / "The easiest way to own gold"
   Figma UK desktop 10125:21973, UK mobile 10129:405. Tokens only.
   ===================================================================== */

.hp-why-onegold {
  background: var(--gray-0);
  padding-block: var(--home-sec-pad-y); /* 80px */
}

.hp-why-onegold__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--home-steps-gap); /* 40px */
}

/* --- Intro ----------------------------------------------------------- */
.hp-why-onegold__intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-align: center;
}

.hp-why-onegold__eyebrow {
  margin: 0;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: 1;
  background-image: linear-gradient(
    270deg,
    var(--hp-why-onegold-grad-from) 8.7%,
    var(--hp-why-onegold-grad-to) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hp-why-onegold__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45); /* 45px */
  color: var(--hp-why-onegold-h2-color);
}

/* --- Feature row ----------------------------------------------------- */
.hp-why-onegold__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--home-stack-gap); /* 20px */
  width: 100%;
}

.hp-why-onegold__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 450px;
  padding: 40px 35px;
  border: 1px solid var(--soft-blue);
  border-radius: var(--radius-8);
  box-shadow: var(--education-card-glow); /* 0 0 4px rgba(153,204,250,0.4) */
  overflow: hidden;
}

.hp-why-onegold__card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-8);
  pointer-events: none;
}

.hp-why-onegold__card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.hp-why-onegold__card-title {
  margin: 0;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: normal;
  text-align: center;
  background-image: linear-gradient(
    270deg,
    var(--hp-why-onegold-grad-from) 8.7%,
    var(--hp-why-onegold-grad-to) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hp-why-onegold__card-text {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.hp-why-onegold__card-line {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: normal;
  text-align: center;
  color: var(--gray-8);
}

/* --- 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-why-onegold__eyebrow {
    font-size: var(--fs-18);
  }

  .hp-why-onegold__heading {
    font-size: var(--fs-28);
    line-height: var(--lh-36);
  }

  .hp-why-onegold__row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hp-why-onegold__row::-webkit-scrollbar { display: none; }

  .hp-why-onegold__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-why-onegold__eyebrow {
    font-weight: var(--fw-medium);
    font-size: var(--fs-18);
  }

  .hp-why-onegold__heading {
    font-size: var(--fs-26);
    line-height: var(--lh-36); /* 36px */
  }
}

/* --- 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
   and bleeds the gutters. --- */
@media (max-width: 599.98px) {
  .hp-why-onegold__row {
    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-why-onegold__card {
    flex: 0 0 85%;
    padding: 40px 15px;
  }
}