/* ===========================================================================
 * Granzia Landing page — pink standalone landing.
 * Matches Figma "Landing page" (desktop 8404-18454 / mobile 8079-29884).
 * Exact text colours are the Figma brand pinks (Pink-2/*). Global chrome
 * (header/footer/logo) is themed via the injected :root --primary (#c04a65).
 * Single markup; desktop ⇄ mobile switch at 768px.
 * ======================================================================== */

/* Background = the palette's deepest shade so any area below .landing-rest
   (e.g. the mobile sticky-bar padding) matches the FAQ end instead of going white. */
.landing { direction: rtl; background: #C96B8A; position: relative; }
.landing * { box-sizing: border-box; }

/* The global body{overflow-x:hidden} makes body a scroll container and breaks the
   sticky hero. `clip` still hides horizontal overflow but keeps sticky working.
   Scoped to landing pages only (this stylesheet loads on the template alone). */
body { overflow-x: clip; }

/* ---- Sticky hero + scroll colour transition --------------------------------
   The hero is pinned (sticky) while .landing-rest scrolls up and over it; its
   background fades through the palette (--landing-bg set per scroll in main.js). */
.landing-rest {
  position: relative;
  z-index: 1;
  /* Fallback = the palette's deepest shade so no white ever flashes below the
     last section; no bottom padding/margin that could open a gap to the footer. */
  background: var(--landing-bg, #C96B8A);
  padding-bottom: 0;
  margin-bottom: 0;
}
.landing-faq { padding-bottom: 0; margin-bottom: 0; }

/* ---- Section 3: Hero --------------------------------------------------- */
.landing-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  overflow: hidden;
}
.landing-hero__pic, .landing-hero__img { display: block; width: 100%; }
.landing-hero__img { height: auto; }

.landing-hero__content {
  position: absolute;
  top: 50%;
  right: 80px;                     /* Figma physical right:80 (over the curtain) */
  left: auto;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;           /* children hug the right edge */
  text-align: right;
  gap: 16px;
}
.landing-hero__title {
  margin: 0;
  font-size: 30px;
  line-height: 36px;               /* text-3xl/bold */
  font-weight: 700;
  color: #782e3f;                  /* Pink-2/50 */
  white-space: nowrap;
}
.landing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 10px 32px;
  border-radius: 99px;
  background: #f05c7e;             /* Pink-2/base */
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease;
}
.landing-cta:hover { background: #e34d6f; }

/* ---- Section 4: Trust bar --------------------------------------------- */
.landing-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 8px 80px;
  background: #ffeff0;             /* pink-050 */
}
.landing-trust__list {
  display: flex;
  align-items: center;
  gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.landing-trust__item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #782e3f;                  /* Pink-2/50 */
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  white-space: nowrap;
}
.landing-trust__item img { display: block; width: 24px; height: 24px; }
.landing-trust__item:first-child img { width: 22px; height: 24px; }   /* free-delivery ratio */

/* pink band under the hero block (Figma Rectangle 20, 60px) */
.landing-hero__band { height: 60px; background: #ffeff0; }

/* ---- Shared section title -------------------------------------------- */
.landing-section-title {
  margin: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: #481c26;                  /* Pink-2/70 */
  text-align: center;
}

/* ---- Section 5: Categories ------------------------------------------- */
.landing-cats { padding: 64px 80px 0; }
.landing-cats__title {
  margin: 0 0 24px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: #481c26;                  /* Pink-2/70 */
  text-align: center;
}
.landing-cats__grid {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.landing-cat {
  width: 243px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.landing-cat__img {
  width: 100%;
  aspect-ratio: 169 / 194;
  border-radius: 8px;
  object-fit: cover;
  background: #fce9ee;
}
.landing-cat__name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #262626;                  /* Soft black */
  text-align: center;
}
.landing-cat__count {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #a1a1a1;                  /* neutral/400 */
  text-align: center;
}

/* ---- Section 6: Best sellers ----------------------------------------- */
.landing-bestsellers { padding: 64px 80px 0; }
.landing-bestsellers .landing-fp-grid { margin-top: 24px; }
.landing-fp-grid--mobile { display: none; }

/* =======================================================================
 * Mobile  ≤ 768px  (Figma mobile 8079-29884, 375 wide)
 * ==================================================================== */
@media (max-width: 768px) {
  /* Hero — cover image 430px tall, centered title + CTA near the top */
  .landing-hero__img { height: 430px; object-fit: cover; object-position: center; }
  .landing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(200deg,
      rgba(251,206,216,.6) 7%,
      rgba(251,206,216,.6) 31%,
      rgba(251,206,216,0) 59%);
  }
  .landing-hero__content {
    right: auto;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    text-align: center;
    gap: 12px;
    width: 248px;
  }
  .landing-hero__title { font-size: 24px; line-height: 32px; text-align: center; }
  .landing-cta { height: 38px; padding: 8px 24px; }

  /* Trust — compact scrolling strip */
  .landing-trust { padding: 8px 16px; justify-content: flex-start; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
  .landing-trust::-webkit-scrollbar { display: none; }
  .landing-trust__list { gap: 24px; }

  .landing-hero__band { display: none; }

  /* Section titles */
  .landing-section-title,
  .landing-cats__title { font-size: 24px; line-height: 32px; }

  /* Categories — 109px cards, wrap 3 + 2 centered */
  .landing-cats { padding: 40px 16px 0; }
  .landing-cats__title { margin-bottom: 24px; }
  .landing-cats__grid { flex-wrap: wrap; gap: 8px; }
  .landing-cat { width: 109px; gap: 8px; }
  .landing-cat__img { aspect-ratio: 109 / 125; }

  /* Best sellers — 2-col grid */
  .landing-bestsellers { padding: 40px 16px 0; }
  .landing-fp-grid { display: none; }
  .landing-fp-grid--mobile { display: grid; }
}

/* =======================================================================
 * Sections 7–14
 * ==================================================================== */

/* ---- Section 7: Two banners (quiz + comparison) ---------------------- */
.landing-banners {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding: 64px 80px 0;
  direction: ltr;                  /* quiz left, comparison right (Figma) */
}
.landing-banner {
  position: relative;
  flex: 0 0 631px;
  width: 631px;
  height: 393px;
  border-radius: 16px;
  overflow: hidden;
}
.landing-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.landing-banner__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.landing-banner__content {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 360px;
  max-width: calc(100% - 48px);
  text-align: right;               /* RTL-safe right alignment */
  direction: rtl;
}
.landing-banner__title { margin: 0 0 8px; font-size: 24px; line-height: 32px; font-weight: 700; color: #481c26; }
.landing-banner__text  { margin: 0 0 16px; font-size: 16px; line-height: 24px; font-weight: 500; color: #602532; }
.landing-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 10px 32px;
  border-radius: 99px;
  border: 1px solid #90374c;
  background: transparent;
  color: #90374c;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.landing-banner__cta:hover { background: #90374c; color: #fff; }

/* ---- Section 8: Big banner + hotspot (reuses homepage hotspot JS) ----- */
.landing-bigbanner { margin-top: 64px; padding: 0; }
.landing-bigbanner .hotspot-discovery__viewport { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; overflow: visible; }
.landing-bigbanner .hotspot-discovery__track { display: block; width: 100%; margin: 0; padding: 0; overflow: visible; }
.landing-bigbanner__card { position: relative; width: 100%; margin: 0; padding: 0; border: 0; background: none; flex: none; }
.landing-bigbanner__frame { position: relative; width: 100%; aspect-ratio: 1440 / 800; overflow: hidden; }
.landing-bigbanner__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.landing-bigbanner__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.landing-bigbanner__tint { position: absolute; inset: 0; background: rgba(168, 64, 88, .15); }
/* spot dot positioning is inherited from .hotspot-discovery__spot (home) */

/* ---- Section 9: Offers ----------------------------------------------- */
.landing-offers { padding: 64px 80px 0; }
.landing-offers__head { text-align: center; }
.landing-offers__sub { margin: 8px 0 0; font-size: 16px; line-height: 28px; color: #602532; text-align: center; }
.landing-offers .landing-fp-grid { margin-top: 24px; }
.landing-fp-grid--wrap { flex-wrap: wrap; row-gap: 24px; justify-content: center; }

/* ---- Section 10: Doctors "شاهدنا في الواقع" -------------------------- */
.landing-doctors { padding: 64px 80px 0; }
.landing-doctors__grid { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.landing-doctor { margin: 0; width: 249.6px; display: flex; flex-direction: column; gap: 8px; }
.landing-doctor__media { position: relative; width: 100%; aspect-ratio: 249.6 / 397; border-radius: 12px; overflow: hidden; background: #f4dfe5; }
.landing-doctor__img { width: 100%; height: 100%; object-fit: cover; }
.landing-doctor__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .85);
}
.landing-doctor__play::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #90374c;
}
.landing-doctor__name { font-size: 16px; line-height: 24px; font-weight: 500; color: #262626; text-align: center; }

/* ---- Section 11: Usage guide ----------------------------------------- */
.landing-guide { display: flex; gap: 40px; align-items: center; justify-content: flex-end; padding: 64px 80px 0; }
.landing-guide__media { flex: 0 0 509px; width: 509px; height: 380px; border-radius: 8px; overflow: hidden; }
.landing-guide__media img { width: 100%; height: 100%; object-fit: cover; }
.landing-guide__text { max-width: 599px; text-align: right; direction: rtl; }
.landing-guide__lead { margin: 0 0 16px; font-size: 18px; line-height: 28px; font-weight: 500; color: #301219; }
.landing-guide__list { margin: 0; padding: 0; list-style: none; }
.landing-guide__list li { margin-bottom: 13px; font-size: 16px; line-height: 24px; font-weight: 500; color: #602532; text-align: right; }
.landing-guide__list li:last-child { margin-bottom: 0; }
.landing-guide__link { display: inline-block; margin-top: 16px; font-size: 16px; line-height: 24px; font-weight: 500; color: #90374c; text-decoration: underline; }

/* ---- Section 12: Reviews "منكم ولنا" --------------------------------- */
.landing-reviews { padding-top: 64px; }
.landing-reviews .trust-proof__title.landing-section-title { font-size: 24px; line-height: 32px; color: #481c26; }

/* smaller (24px) section titles: doctors + reviews */
.landing-section-title--sm { font-size: 24px; line-height: 32px; }

/* ---- Section 13: FAQ — reuses themed homepage section ---------------- */
.landing-faq { padding-top: 24px; }

/* ---- Section 14: Mobile sticky bar (hidden on desktop) --------------- */
.landing-sticky { display: none; }

/* =======================================================================
 * Mobile  ≤ 768px  — sections 7–14
 * ==================================================================== */
@media (max-width: 768px) {
  /* Banners — stacked, comparison first */
  .landing-banners { flex-direction: column; gap: 16px; padding: 40px 16px 0; direction: rtl; }
  .landing-banner { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 343 / 301; }
  .landing-banner--compare { order: -1; }
  .landing-banner__content { top: 16px; right: 24px; left: 24px; width: auto; max-width: none; }
  .landing-banner--quiz .landing-banner__content { text-align: right; }       /* Figma: quiz right */
  .landing-banner--compare .landing-banner__content { text-align: center; }   /* Figma: comparison centered */
  /* smaller mobile type (Figma): compare title 18px, quiz title 16px, text 14px */
  .landing-banner__title { font-size: 18px; line-height: 28px; margin-bottom: 6px; }
  .landing-banner--quiz .landing-banner__title { font-size: 16px; line-height: 24px; }
  .landing-banner__text { font-size: 14px; line-height: 20px; margin-bottom: 12px; }

  /* ---- banner bg framing + centered content (from home promo-cta values) ---- */
  /* الكارد الأول (compare) */
  .landing-banner--compare {
    height: 301px !important;
    overflow: hidden !important;
    aspect-ratio: unset !important;
  }
  .landing-banner--compare .landing-banner__bg img {
    position: absolute !important;
    width: 127.07% !important;
    height: 127.06% !important;
    left: -27.02% !important;
    top: -4.52% !important;
    object-fit: fill !important;
    max-width: none !important;
  }
  .landing-banner--compare .landing-banner__content {
    left: 50% !important;
    right: unset !important;
    transform: translateX(-50%) !important;
    width: 295px !important;
    text-align: center !important;
    top: 16px !important;
  }

  /* الكارد التاني (quiz) */
  .landing-banner--quiz {
    height: 301px !important;
    overflow: hidden !important;
    aspect-ratio: unset !important;
  }
  .landing-banner--quiz .landing-banner__bg img {
    position: absolute !important;
    width: 117.36% !important;
    height: 125.55% !important;
    left: -8.62% !important;
    top: -3.77% !important;
    object-fit: fill !important;
    max-width: none !important;
  }
  .landing-banner--quiz .landing-banner__content {
    left: 50% !important;
    right: unset !important;
    transform: translateX(-50%) !important;
    width: 295px !important;
    text-align: center !important;
    top: 16px !important;
  }

  .landing-banner__cta {
    position: static !important;
    display: inline-block !important;
  }

  /* Big banner — taller mobile crop; spots keep their % positions (home style) */
  .landing-bigbanner { margin-top: 40px; }
  .landing-bigbanner__frame { aspect-ratio: 375 / 550; }

  /* Offers */
  .landing-offers { padding: 40px 16px 0; }

  /* Doctors — horizontal scroll */
  .landing-doctors { padding: 40px 0 0; }
  .landing-doctors__grid {
    justify-content: flex-start; gap: 12px; margin-top: 24px;
    padding: 0 16px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
  }
  .landing-doctors__grid::-webkit-scrollbar { display: none; }
  .landing-doctor { width: 193px; flex: 0 0 193px; }
  .landing-doctor__media { aspect-ratio: 193 / 326; }

  /* Guide — image on top, text below */
  .landing-guide { flex-direction: column; gap: 16px; align-items: stretch; padding: 40px 16px 0; }
  .landing-guide__media { order: -1; flex: 0 0 auto; width: 100%; height: 357px; }
  .landing-guide__text { align-items: flex-end; }

  /* Reviews */
  .landing-reviews { padding-top: 40px; }

  /* Sticky bottom bar */
  .landing-sticky {
    display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    background: #fff; padding: 12px 16px; box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
  }
  .landing-sticky__btn {
    display: flex; align-items: center; justify-content: center; height: 44px;
    border-radius: 99px; background: #f05c7e; color: #fff;
    font-size: 16px; font-weight: 700; text-decoration: none;
  }
  /* keep content clear of the sticky bar */
  .landing { padding-bottom: 68px; }
}