/* =====================================================================
   HP - Get Started CTA (slug: cta-get-started)
   UK desktop node 10125:20837 | UK mobile node 10129:574
   Token-only. All classes BEM-prefixed "hp-cta-get-started-".
   ===================================================================== */

.hp-cta-get-started {
  background: var(--color-bg);
}

/* ---- Section wrapper (desktop): 80px block padding, centred banner ---- */
.hp-cta-get-started__inner {
  padding-block: var(--home-sec-pad-y);          /* 80px */
}

/* ---- Desktop promo banner: 1240 x 130, gradient L, rounded ---- */
.hp-cta-get-started__banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cta-gs-gap);                          /* 40px */
  height: var(--cta-gs-banner-h);                  /* 130px */
  padding: var(--cta-gs-banner-pad-y) var(--cta-gs-banner-pad-x); /* 40px 20px */
  border-radius: var(--radius-10);                 /* 10px */
  /* to-l: from black (right) -> via #1f3854 @54.677% -> to #071f39 (left) */
  background: linear-gradient(
    270deg,
    var(--gray-8) 0%,
    var(--cta-gs-grad-mid) 54.677%,
    var(--breakout-grad-dark) 100%
  );
}

.hp-cta-get-started__promo {
  display: block;
  flex: 0 0 auto;
  width: var(--cta-gs-promo-w);                    /* 200px */
  height: var(--cta-gs-banner-h);                  /* 130px */
}
.hp-cta-get-started__promo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hp-cta-get-started__heading {
  flex: 0 0 var(--cta-gs-heading-w);               /* 590px */
  width: var(--cta-gs-heading-w);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--cta-gs-heading-fs);             /* 28px */
  line-height: 1.2;
  color: var(--gray-0);
}

.hp-cta-get-started__qr {
  display: block;
  flex: 0 0 auto;
  width: var(--cta-gs-qr-size);                    /* 95px */
  height: var(--cta-gs-qr-size);
  border-radius: var(--cta-gs-qr-radius);          /* 15px */
  overflow: hidden;
}
.hp-cta-get-started__qr-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Mobile stacked panel (hidden on desktop via .is-mobile) ---- */
.hp-cta-get-started__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--home-stack-gap);                      /* 20px */
  padding: var(--cta-gs-banner-pad-y) var(--pad-mobile); /* 40px 20px */
  /* to-r: from black (left) -> #1f3854 @50% -> #071f39 (right) */
  background: linear-gradient(
    90deg,
    var(--gray-8) 0%,
    var(--cta-gs-grad-mid) 50%,
    var(--breakout-grad-dark) 100%
  );
}

.hp-cta-get-started__heading--mobile {
  flex: none;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: var(--fs-26);                         /* 26px */
  line-height: var(--lh-36);                       /* 36px */
}

.hp-cta-get-started__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);                             /* 8px */
  /* Figma is a fixed 200px pill (fits EN "Get the App"); keep that as the
     floor but let longer fr/it/de labels ("App herunterladen",
     "Télécharger l'app") grow the pill instead of overflowing it. */
  min-width: var(--cta-gs-promo-w);                /* 200px floor */
  width: auto;
  max-width: 100%;
  min-height: var(--cta-gs-btn-h);                 /* 44px */
  padding: 14px var(--btn-pad-x-lg);               /* 14px 24px */
  border-radius: var(--radius-8);                  /* 8px */
  background: var(--og-blue);
}
.hp-cta-get-started__btn-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);                         /* 16px */
  line-height: 1;
  letter-spacing: 0.16px;
  color: var(--gray-0);
}
.hp-cta-get-started__btn-arrow {
  flex: 0 0 auto;
  width: var(--cta-gs-arrow-w);                    /* 16px */
  height: var(--cta-gs-arrow-h);                   /* 18px */
  /* chevron-down asset rotated -90deg to point right */
  background: var(--gray-0);
  -webkit-mask: url("../../img/hp-cta-get-started-arrow.svg") no-repeat center / contain;
          mask: url("../../img/hp-cta-get-started-arrow.svg") no-repeat center / contain;
  transform: rotate(-90deg);
}

/* ---- Panel CTA: QR on desktop, app-store badges on mobile ---- */
.hp-cta-get-started__qr--panel { display: block; }

.hp-cta-get-started__stores {
  display: none;               /* desktop: hidden (QR is shown instead) */
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* =====================================================================
   Tablet (768–1023): the .is-mobile panel is already shown (global toggle
   at 1024px from Task 2). Step down the inner padding to match the
   reduced section rhythm at this tier.
   ===================================================================== */
@media (max-width: 1023.98px) {
  .hp-cta-get-started__inner {
    padding-block: var(--ba-pad-y); /* 40px */
  }
}

/* =====================================================================
   Phone (≤599): full-bleed panel, swap QR for app-store badges.
   ===================================================================== */
@media (max-width: 599.98px) {
  .hp-cta-get-started {
    /* mobile panel is full-bleed; no section side padding */
    background: none;
  }
  /* Revert tablet padding-block reduction — phone keeps main's 80px rhythm. */
  .hp-cta-get-started__inner {
    padding-block: var(--home-sec-pad-y); /* 80px — matches main ≤599 */
  }
  /* Swap the desktop QR for the official app-store badges. */
  .hp-cta-get-started__qr--panel { display: none; }
  .hp-cta-get-started__stores { display: flex; }
}