/* =====================================================================
   Homepage section: Header + Hero  (slug: hp-header-hero)
   UK desktop node 10125:20543 / UK mobile node 10125:20906
   Pixel-perfect at 1240 inside .container; mobile @ <=767.98px (20px gutters).
   Token-only; all section classes prefixed hp-header-hero-.
   ===================================================================== */

.hp-header-hero {
  background: var(--hp-header-hero-gradient);
  padding-block: var(--hp-header-hero-pad-top) var(--hp-header-hero-pad-bottom);
}

.hp-header-hero__inner {
  display: flex;
  align-items: center;
  gap: var(--hp-header-hero-row-gap);
}

/* --- Phone visual (left) --- */
.hp-header-hero__phone {
  flex: 0 0 var(--hp-header-hero-phone-w);
  width: var(--hp-header-hero-phone-w);
  height: var(--hp-header-hero-phone-h);
}
.hp-header-hero__phone-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Content (right) --- */
.hp-header-hero__content {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--home-stack-gap);
  /* reserve room for the absolutely-placed endorsers row below the stack */
  padding-bottom: calc(var(--hp-header-hero-endorser-h) + var(--hp-header-hero-endorser-gap) + var(--hp-header-hero-endorser-bottom));
}

.hp-header-hero__lead {
  display: flex;
  flex-direction: column;
  gap: var(--hp-header-hero-lead-gap);
}

.hp-header-hero__logo {
  width: var(--hp-header-hero-logo-w);
  height: var(--hp-header-hero-logo-h);
}
.hp-header-hero__logo img { width: 100%; height: 100%; }

.hp-header-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--hp-header-hero-copy-gap);
}

.hp-header-hero__title {
  margin: 0;
  color: var(--gray-0);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-44);
  line-height: var(--lh-55);
  letter-spacing: 0;
}

.hp-header-hero__subtitle {
  margin: 0;
  color: var(--gray-0);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: normal;
  max-width: var(--hp-header-hero-subtitle-max);
}

/* --- QR / Get-the-App CTA --- */
.hp-header-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--home-hero-getapp-gap);     /* 15px, matches Figma */
  /* content-sized so longer locale labels (e.g. "Télécharger l'app") never
     overflow the pill; EN matches Figma's 235x101 (14.5/111/15/80/14.5). */
  width: max-content;
  padding: 10.5px 14.5px;
  border-radius: var(--radius-10);
  background: var(--hp-header-hero-cta-gradient);
  box-shadow: var(--hp-header-hero-cta-shadow);
}
.hp-header-hero__cta-label {
  min-width: 111px;     /* Figma label box; grows for longer locales */
  color: var(--gray-0);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  letter-spacing: 0.16px;
  line-height: 1;
  white-space: nowrap;
}
.hp-header-hero__cta-qr {
  flex: 0 0 80px;       /* Figma QR is 80x80 (was wrongly using the 120px old-home token) */
  width: 80px;
  height: 80px;
  border-radius: var(--radius-10);
  overflow: hidden;
}
.hp-header-hero__cta-qr img { width: 100%; height: 100%; object-fit: cover; }

/* Mobile-only app-store badges (desktop uses the scannable QR above). */
.hp-header-hero__stores {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- Rating pill --- */
.hp-header-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: var(--radius-5);
  background: var(--dusty-blue);
}
.hp-header-hero__rating-stars {
  width: var(--hp-header-hero-stars-w);
  height: var(--hp-header-hero-stars-h);
}
.hp-header-hero__rating-stars img { width: 100%; height: 100%; }
.hp-header-hero__rating-text {
  color: var(--gray-0);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: normal;
  white-space: nowrap;
}

/* --- Endorsers row (vault / partner lockups) --- */
.hp-header-hero__endorsers {
  position: absolute;
  left: 0;
  bottom: var(--hp-header-hero-endorser-bottom);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.hp-header-hero__endorser-big {
  flex: 0 0 var(--hp-header-hero-big-w);
  width: var(--hp-header-hero-big-w);
  height: var(--hp-header-hero-big-h);
  display: block;
  line-height: 0;
  /* MKS PAMP mark ships on a white field (its dark text needs it on the dark
     hero); round it into a clean badge rather than a hard white rectangle. */
  border-radius: 8px;
  overflow: hidden;
  transition: opacity 0.15s ease;
}
.hp-header-hero__endorser-big:hover { opacity: 0.8; }
.hp-header-hero__endorser-big img { width: 100%; height: 100%; object-fit: contain; }
.hp-header-hero__endorser-rule {
  width: 1px;
  height: var(--hp-header-hero-endorser-h);
  background: var(--gray-0);
  opacity: 0.5;
}
.hp-header-hero__endorser-companies {
  position: relative;
  flex: 0 0 var(--hp-header-hero-companies-w);
  width: var(--hp-header-hero-companies-w);
  height: var(--hp-header-hero-companies-h);
}
.hp-header-hero__endorser-companies img { width: 100%; height: 100%; object-fit: contain; }
/* Stacked hotspot links over the combined Gold Avenue (top) / APMEX (bottom) image. */
.hp-header-hero__endorser-link { position: absolute; left: 0; width: 100%; display: block; }
.hp-header-hero__endorser-link--ga { top: 0; height: 60%; }
.hp-header-hero__endorser-link--apmex { top: 60%; height: 40%; }
.hp-header-hero__endorser-companies:has(.hp-header-hero__endorser-link:hover) img { opacity: 0.8; transition: opacity 0.15s ease; }

/* =====================================================================
   Tablet — keep 2-col layout; shrink phone image so copy stays readable.
   ===================================================================== */
@media (max-width: 1023.98px) {
  .hp-header-hero__phone {
    flex: 0 0 320px;
    width: 320px;
    height: 305px;
  }
  .hp-header-hero__title {
    font-size: var(--fs-36);
    line-height: var(--lh-40);
  }
}

/* =====================================================================
   Mobile — UK mobile node 10125:20906 (390 frame, 20px gutters).
   Single centred column: logo, title, body, rating, phone, endorsers.
   ===================================================================== */
@media (max-width: 767.98px) {
  .hp-header-hero {
    padding-block: var(--hp-header-hero-pad-top-mobile) var(--hp-header-hero-pad-bottom-mobile);
  }
  .hp-header-hero__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--home-stack-gap);
  }

  /* content stacks first; endorsers become a normal in-flow centred row */
  .hp-header-hero__content {
    order: 1;
    width: 100%;
    align-items: center;
    gap: var(--hp-header-hero-lead-gap-mobile);
    padding-bottom: 0;
  }
  .hp-header-hero__lead {
    align-items: center;
    gap: var(--hp-header-hero-lead-gap-mobile);
    width: 100%;
  }
  .hp-header-hero__copy {
    align-items: center;
    gap: var(--home-stack-gap);
    width: 100%;
  }
  .hp-header-hero__title {
    font-size: var(--fs-36);
    line-height: var(--lh-40);
    text-align: center;
  }
  .hp-header-hero__subtitle {
    text-align: center;
    max-width: 100%;
  }
  /* QR CTA is hidden on the mobile frame; tappable store badges take its place. */
  .hp-header-hero__cta { display: none; }
  .hp-header-hero__stores { display: flex; justify-content: center; }
  .hp-header-hero__rating { align-self: center; }

  .hp-header-hero__phone {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    max-width: var(--hp-header-hero-phone-w-mobile);
    height: var(--hp-header-hero-phone-h-mobile);
  }

  .hp-header-hero__endorsers {
    order: 3;
    position: static;
    width: 100%;
    justify-content: center;
  }
}

/* ---- Language switcher in the hero top-right (dark) ---- */
.hp-header-hero__inner { position: relative; }
.hp-hero-lang { position: absolute; top: 0; right: 0; z-index: 20; }
.hp-hero-lang__toggle { display: flex; align-items: center; gap: 6px; padding: 6px; }
.hp-hero-lang__flag { width: 24px; height: 24px; max-width: none; border-radius: 50%; object-fit: cover; flex: none; }
.hp-hero-lang__chevron { width: 10px; height: 7px; flex: none; filter: brightness(0) invert(1); transition: transform 0.2s ease; }
.hp-hero-lang__menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  display: flex; gap: 8px; margin: 0; padding: 8px; list-style: none;
  background: var(--gray-0); border-radius: var(--radius-8);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; z-index: 30;
}
.hp-hero-lang:hover .hp-hero-lang__menu,
.hp-hero-lang:focus-within .hp-hero-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.hp-hero-lang:hover .hp-hero-lang__chevron,
.hp-hero-lang:focus-within .hp-hero-lang__chevron { transform: rotate(180deg); }
.hp-hero-lang__opt { display: block; padding: 2px; border: 2px solid transparent; border-radius: 50%; line-height: 0; }
.hp-hero-lang__opt img { width: 26px; height: 26px; max-width: none; border-radius: 50%; object-fit: cover; display: block; }
.hp-hero-lang__opt--current { border-color: var(--og-blue); }
@media (max-width: 767.98px) { .hp-hero-lang { top: 8px; right: 0; } }