/* =====================================================================
   HP - Comparison Chart (Figma UK desktop 10125:20719; mobile 10125:21076)
   "How does OneGold compare?" — white section; centred gradient eyebrow +
   H2 + lead; a 4-column comparison table (feature | OneGold | ETFs |
   Traditional Bullion Dealers) with a raised dusty-blue OneGold column and
   light-grey comparison columns; then a "Get the App" QR CTA.
   Content locked to 1240 via .container. Tokens only.
   ===================================================================== */

.hp-comparison {
  background: var(--gray-0);
  padding-block: var(--hp-comparison-pad-top) var(--hp-comparison-pad-bottom);
}

.hp-comparison__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hp-comparison-stack-gap);
}

/* ---- Intro ---- */
.hp-comparison__intro {
  display: flex;
  flex-direction: column;
  gap: var(--hp-comparison-intro-gap);
  width: 100%;
  text-align: center;
}

/* Eyebrow — OG Desktop H4 (Axiforma SemiBold 20), gradient text. */
.hp-comparison__eyebrow {
  margin: 0;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: normal;
  background-image: var(--hp-comparison-eyebrow-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Heading — OG Desktop H2 (Axiforma Medium 32/45). */
.hp-comparison__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  color: var(--hp-comparison-heading-color);
}

/* Lead — OG Desktop Large Body (Axiforma Regular 18/25). */
.hp-comparison__lead {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-25);
  color: var(--gray-8);
}

/* ---- Table ---- */
.hp-comparison__table {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.hp-comparison__row {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.hp-comparison__cell {
  flex: 1 0 0;
  min-width: 0;
  max-width: var(--hp-comparison-col-max);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hp-comparison-row-h);
  padding: var(--hp-comparison-cell-pad-y) var(--hp-comparison-cell-pad-x);
  text-align: center;
}
.hp-comparison__row--head .hp-comparison__cell { min-height: var(--hp-comparison-head-h); }

/* Feature (first) column — white, gray-3 left+bottom rule, left-aligned label. */
.hp-comparison__cell--feature {
  justify-content: flex-start;
  text-align: left;
  background: var(--gray-0);
  border-left: 1px solid var(--gray-3);
  border-bottom: 1px solid var(--gray-3);
  padding-left: var(--hp-comparison-feature-pad-l);
  padding-right: var(--hp-comparison-feature-pad-r);
}
.hp-comparison__row--head .hp-comparison__cell--feature {
  border-top: 1px solid var(--gray-3);
}
.hp-comparison__cell--spacer {
  background: transparent;
  border-left: 0;
  border-bottom: 0;
}
.hp-comparison__row--head .hp-comparison__cell--spacer { border-top: 0; }
/* first feature label cell (directly under header) gets the top-left round */
.hp-comparison__row--head + .hp-comparison__row .hp-comparison__cell--feature {
  border-top-left-radius: var(--radius-10);
  border-top: 1px solid var(--gray-3);
}
.hp-comparison__row--last .hp-comparison__cell--feature {
  border-bottom-left-radius: var(--radius-10);
}

.hp-comparison__feature {
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  line-height: normal;
  color: var(--gray-8);
}

/* OneGold raised column — dusty-blue fill on every row. */
.hp-comparison__cell--og {
  background: var(--dusty-blue);
  color: var(--gray-0);
}
.hp-comparison__row:not(.hp-comparison__row--head) .hp-comparison__cell--og {
  border-top: 1px solid var(--gray-5);
}
.hp-comparison__row--head .hp-comparison__cell--og {
  border-top-left-radius: var(--radius-10);
}
.hp-comparison__row--last .hp-comparison__cell--og {
  border-bottom-left-radius: var(--radius-10);
}

/* Comparison columns (ETFs / Dealers) — light-grey, white hairline frame. */
.hp-comparison__cell--compare {
  background: var(--light-blue);
  border: 1px solid var(--gray-0);
  color: var(--gray-8);
}
.hp-comparison__row--head .hp-comparison__cell--compare:last-child {
  border-top-right-radius: var(--radius-10);
}
.hp-comparison__row--last .hp-comparison__cell--compare:last-child {
  border-bottom-right-radius: var(--radius-10);
}

/* Column header labels (ETFs / Traditional Bullion Dealers) — Bold 20. */
.hp-comparison__col-title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  line-height: normal;
  color: var(--gray-8);
}

/* OneGold inverse logo in the header cell. */
.hp-comparison__og-logo {
  display: block;
  width: 100%;
  max-width: var(--hp-comparison-oglogo-w);
}
.hp-comparison__og-logo img { width: 100%; height: auto; }

/* Cell text values — Regular 16. */
.hp-comparison__value {
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: normal;
  color: var(--gray-8);
}
.hp-comparison__value--og { color: var(--gray-0); }

/* Tick / cross glyphs. Colour comes from the column context. */
.hp-comparison__glyph {
  display: inline-flex;
  width: var(--hp-comparison-glyph-size);
  height: var(--hp-comparison-glyph-size);
}
.hp-comparison__glyph svg { width: 100%; height: 100%; display: block; }
/* OneGold column glyphs are white; comparison-column glyphs are muted grey. */
.hp-comparison__cell--og .hp-comparison__glyph { color: var(--gray-0); }
.hp-comparison__cell--compare .hp-comparison__glyph { color: var(--gray-6); }

/* ---- Get-the-App QR CTA ----
   Mirrors the hero CTA fix: content-sized so longer locale labels
   (e.g. "Télécharger l'app", "App herunterladen") never overflow/clip the
   pill. EN matches Figma's 235x101 (5/111/15/80/5 + min-height 101). */
.hp-comparison__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hp-comparison-cta-gap);
  width: max-content;
  min-width: var(--hp-comparison-cta-w);
  min-height: var(--hp-comparison-cta-h);
  padding: var(--hp-comparison-cta-pad-y) var(--hp-comparison-cta-pad-x);
  background-image: var(--hp-comparison-cta-grad);
  border-radius: var(--radius-10);
  box-shadow: var(--hp-comparison-cta-shadow);
}
.hp-comparison__cta-label {
  min-width: 111px;     /* Figma label box; grows for longer locales */
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  line-height: 1;
  letter-spacing: var(--hp-comparison-cta-tracking);
  color: var(--gray-0);
}
.hp-comparison__cta-qr {
  display: block;
  flex: none;
  width: var(--hp-comparison-cta-qr-size);
  height: var(--hp-comparison-cta-qr-size);
  border-radius: var(--radius-10);
  overflow: hidden;
}
.hp-comparison__cta-qr img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   Tablet (768–1023): Archetype D — reduce cell density; table stays 4-col.
   At 834px the 4 equal columns are ~190px each — compress padding + fonts.
   ===================================================================== */
@media (max-width: 1023.98px) {
  .hp-comparison {
    padding-block: var(--hp-comparison-pad-mobile);
  }

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

  .hp-comparison__lead {
    font-size: var(--fs-16);
  }

  /* Reduce cell padding + row height so the 4-col layout breathes at ~834px */
  .hp-comparison__cell {
    min-height: 60px;
    padding: 16px var(--hp-comparison-cell-pad-x-mobile);
  }

  .hp-comparison__cell--feature {
    padding-left: 16px;
    padding-right: 8px;
  }

  /* Column header labels step down */
  .hp-comparison__col-title {
    font-size: var(--fs-14);
  }

  /* Logo proportionally smaller */
  .hp-comparison__og-logo {
    max-width: 140px;
  }

  /* Feature and value text step down */
  .hp-comparison__feature {
    font-size: var(--fs-14);
  }

  .hp-comparison__value {
    font-size: var(--fs-14);
  }
}

/* =====================================================================
   Mobile — M - Comparison Chart (10125:21076), 390 frame, 20px gutters.
   px-20 py-40, stack gap 20; H2 26/36; lead 16. Table keeps 4 columns
   (no logo header text, tight cells). Last data row label differs in the
   mobile frame but rows are content-driven, so the same markup renders.
   ===================================================================== */
@media (max-width: 767.98px) {
  .hp-comparison {
    padding-block: var(--hp-comparison-pad-mobile);
  }
  /* Hide the "Get the App" QR CTA on mobile (scanning a QR on the same phone
     makes no sense; the app links live in the footer/store badges). */
  .hp-comparison__cta {
    display: none;
  }
  .hp-comparison__inner {
    gap: var(--hp-comparison-stack-gap-mobile);
  }
  .hp-comparison__heading {
    font-size: var(--fs-26);
    line-height: var(--lh-36);
  }
  .hp-comparison__lead {
    font-size: var(--fs-16);
    line-height: normal;
  }

  /* Header labels shrink to Bold 12; logo to ~70px wide. */
  .hp-comparison__row--head .hp-comparison__cell { min-height: var(--hp-comparison-head-h); }
  .hp-comparison__col-title { font-size: var(--fs-12); }
  .hp-comparison__og-logo { max-width: var(--hp-comparison-oglogo-w-mobile); }

  /* Feature labels become centred + Bold 12; tight gutters. */
  .hp-comparison__cell {
    padding: var(--hp-comparison-cell-pad-y) var(--hp-comparison-cell-pad-x-mobile);
  }
  .hp-comparison__cell--feature {
    justify-content: center;
    text-align: center;
    padding-left: var(--hp-comparison-feature-pad-mobile);
    padding-right: var(--hp-comparison-feature-pad-mobile);
  }
  .hp-comparison__feature { font-size: var(--fs-12); }
  .hp-comparison__value { font-size: var(--fs-12); }
}

/* ---- Phone (≤599): restore tablet-leaked min-height — matches main ≤599 ---- */
@media (max-width: 599.98px) {
  .hp-comparison__cell {
    min-height: var(--hp-comparison-row-h);
  }
}