/* =====================================================================
   Benefits Grid — Figma "D - Benefits Grid" 6338:59328 (desktop) + "M -"
   mobile variant. A centred header (Axiforma Medium 32/45 H2 + Regular 24
   Large-Body subhead) over a multi-column grid of benefit rows: each a ~60px
   brand icon + body text (Axiforma Regular 18/25, optional Bold lead phrase),
   then an optional centred CTA (caption + .btn). Three benefits per row at
   desktop, wrapping to fewer as the container narrows; single column on
   mobile with the icon stacked above the copy. Content locked to the 1240
   area via .container. Tokens only.
   ===================================================================== */

.benefits-grid {
  background: var(--gray-0);
  padding-block: var(--home-sec-pad-y);
}

.benefits-grid__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--home-steps-stack-gap); /* 40px between header / grid / CTA */
}

/* ---- Header (centred H2 + subhead, 20px gap) ---- */
.benefits-grid__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--home-stack-gap); /* 20px */
  width: 100%;
  text-align: center;
}

/* Heading (Axiforma Medium 32/45 — OG Desktop H2) */
.benefits-grid__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  color: var(--gray-8);
  word-break: break-word;
}

/* Subhead (Axiforma Regular 24/1.3 — OG Desktop Large Body) */
.benefits-grid__subheading {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-24);
  line-height: 1.3;
  color: var(--gray-8);
  word-break: break-word;
}

/* ---- Benefit grid: 3 per row at desktop, wraps as the container narrows ---- */
.benefits-grid__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 56px;             /* more horizontal air between benefit columns */
  row-gap: 48px;                /* and a touch more between rows */
  width: 100%;
}
/* 2-column variant. */
.benefits-grid--2col .benefits-grid__grid {
  grid-template-columns: repeat(2, 1fr);
}

/* ---- Benefit row: icon + text, vertically centred ---- */
.benefits-grid__item {
  display: flex;
  align-items: center;
  gap: 24px; /* breathing room between the icon and copy (was a tight 10px) */
  min-width: 0;
}

/* Icon: ~60px brand glyph (size from the img's own width/height attributes). */
.benefits-grid__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--redeem-icon-size);  /* 60px */
  height: var(--redeem-icon-size);
}
.benefits-grid__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Body (Axiforma Regular 18/25 — OG Desktop Large Body). */
.benefits-grid__text {
  margin: 0;
  min-width: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-25);
  color: var(--gray-8);
  word-break: break-word;
}

/* Bold lead phrase within the body copy. */
.benefits-grid__lead {
  font-weight: var(--fw-bold);
}

/* ---- CTA: centred caption + button (10px gap) ---- */
.benefits-grid__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--redeem-adv-content-gap); /* 10px */
  width: 100%;
  text-align: center;
}

.benefits-grid__cta-caption {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-25);
  color: var(--gray-8);
  word-break: break-word;
}

/* ---- Tablet (768–1023): Archetype A — 3→2 columns, step heading ---- */
@media (max-width: 1023.98px) {
  .benefits-grid__heading {
    font-size: var(--fs-28);
    line-height: 1.3;
  }
  .benefits-grid__subheading {
    font-size: var(--fs-20);
    line-height: 1.3;
  }
  .benefits-grid__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 36px;
    row-gap: 36px;
  }
  /* 2-col variant stays 2-col at tablet — no change needed */
}

/* ---- Mobile (M - Benefits Grid @767.98 and below): stack to one column, icon on top,
   centred copy; reduce the heading size. ---- */
@media (max-width: 767.98px) {
  .benefits-grid__heading {
    font-size: clamp(24px, 6.4vw, var(--fs-32));
    line-height: 1.3;
  }
  .benefits-grid__subheading {
    font-size: var(--fs-18);
    line-height: var(--lh-25);
  }
  .benefits-grid__grid,
  .benefits-grid--2col .benefits-grid__grid {
    grid-template-columns: 1fr;
    row-gap: var(--home-stack-gap); /* 20px */
  }
  .benefits-grid__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--redeem-adv-content-gap);
  }
}