/* =====================================================================
   YOJEA — MOBILE OPTIMIZATION
   Loaded last so it overrides styles.css + section-story.css.
   Scope: phones / small tablets. Desktop is untouched.
   ===================================================================== */

/* Kill any horizontal scrolling from off-canvas decorative elements.
   NOTE: use `clip`, NOT `hidden` — `overflow-x: hidden` makes html/body a
   scroll container and breaks every `position: sticky` (Section 2, the
   Manfaat sachet title, and the scroll-driven Story phases). `clip`
   prevents the sideways scroll without creating a scroll container, so
   all the sticky pinning keeps working on mobile. */
html, body { overflow-x: clip; max-width: 100vw; }

/* ─────────────────────────────────────────────────────────────────
   4 · NAVBAR — only 15% opaque background (mostly transparent)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .topnav { padding: 10px clamp(12px, 4vw, 20px); gap: 10px; }
  /* Even once scrolled, keep the bar light — 15% fill + blur for legibility */
  .topnav.is-scrolled {
    background: rgba(248, 241, 231, 0.15);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    box-shadow: 0 1px 0 rgba(31, 22, 18, 0.05);
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .topnav-drawer {
    /* Drawer must stay readable, so it keeps a near-solid fill */
    background: rgba(248, 241, 231, 0.96);
  }
}
@media (max-width: 480px) {
  .topnav-logo img { height: 27px !important; }
  .topnav-burger {
    width: 38px; height: 38px;
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(31, 22, 18, 0.14);
  }
}

/* ─────────────────────────────────────────────────────────────────
   1 · HERO — testimonial popups to the RIGHT of the woman
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .s1 { padding-top: 60px; }

  /* Both testimonials stacked on the RIGHT side, bracketing the figure. */
  .s1-testi {
    display: flex !important;
    width: clamp(132px, 40vw, 158px);
    left: auto;
    right: 2px;
    padding: 10px 12px;
    border-radius: 13px;
  }
  .s1-testi-a {
    top: 6%;
    bottom: auto;
    --rot: 4deg;
  }
  .s1-testi-b {
    top: auto;
    bottom: 12%;
    right: 2px;
    --rot: -3deg;
  }
  .s1-testi-text { font-size: 12px; }
  .s1-testi-name { font-size: 10.5px; }
  .s1-testi-city { font-size: 8.5px; }

  /* The "+50k" and "6 bahan" floats crowd the photo — hide on phones. */
  .s1-floating-quote,
  .s1-floating-ingredients { display: none !important; }
}
@media (max-width: 380px) {
  /* On the narrowest phones, one card at a time keeps the model clear. */
  .s1-testi-b { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
   2 · SECTION 2 — 3D box + sachet smaller & lower; title clear of
       the dynamic island + sticky navbar
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Push the "The Product / The Ingredients" title well below the
     navbar AND any device dynamic-island / notch (safe-area). */
  .s2-center-title {
    top: calc(env(safe-area-inset-top, 0px) + clamp(78px, 12vh, 104px));
  }
  .s2-center-title-text { font-size: clamp(34px, 9vw, 44px); }

  /* Even vertical rhythm: title (top) · 3D (middle) · progress text
     (bottom) get equal gaps. Lift the 3D a touch and push the ingredient
     cards down so they don't crowd the model. */
  .s2-canvas {
    transform: translateY(3%) scale(0.78);
    transform-origin: center 50%;
  }
  .s2-ingredients { transform: translateY(8%); }
}
@media (max-width: 480px) {
  .s2-center-title-text { font-size: 30px; }
  .s2-canvas { transform: translateY(3%) scale(0.72); }
  .s2-ingredients { transform: translateY(10%); }
}

/* Tighten the vertical spread of the 6 ingredient cards on mobile so
   they cluster closer to the sachet (default tops are 10/42/72%).
   DOM order: 1-3 = left column (top→bottom), 4-6 = right column. */
@media (max-width: 760px) {
  .s2-ing:nth-child(1), .s2-ing:nth-child(4) { top: 24% !important; }
  .s2-ing:nth-child(2), .s2-ing:nth-child(5) { top: 41% !important; }
  .s2-ing:nth-child(3), .s2-ing:nth-child(6) { top: 58% !important; }
}

/* Bigger labels inside the hormone circles on mobile (SVG font-size in
   viewBox units). Estrogen/Progesteron names + the HORMON eyebrow. */
@media (max-width: 760px) {
  .sho-bubble-name { font-size: 23px !important; }
  .sho-bubble-eyebrow { font-size: 10px !important; letter-spacing: 2.4px; }
}

/* ─────────────────────────────────────────────────────────────────
   3 · SECTION LAB — tidy the "Download Hasil Uji Lab" button
   5 · …and tighten the gap before the testimoni section
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .sl-download-wrap {
    margin-bottom: 12px;
    padding: 0 4px;
  }
  .sl-download {
    flex-wrap: nowrap;            /* was wrap — kept the arrow from dropping */
    width: 100%;
    max-width: 380px;
    gap: 12px;
    padding: 12px 16px 12px 12px;
    align-items: center;
  }
  .sl-download-icon { width: 40px; height: 40px; }
  .sl-download-text { flex: 1; min-width: 0; }
  .sl-download-title { font-size: 13.5px; }
  .sl-download-sub {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sl-download-arrow { flex-shrink: 0; padding-left: 0; }

  /* Tighten the decorative field so testimoni follows closely. */
  .sl-field { height: 96px; margin-top: 6px; }
  .sl-card { padding-bottom: 8px; }

  /* Trim the top padding of the testimoni section to close the gap. */
  .s6 { padding-top: clamp(40px, 9vw, 64px) !important; }
}

/* ─────────────────────────────────────────────────────────────────
   6 · SECTION 6 — bigger testimonial cards + bigger headline
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .s6-stage { height: clamp(620px, 140vw, 760px); }
  .s6-stage-title {
    font-size: clamp(46px, 13vw, 72px) !important;
    /* Keep the title ABOVE every floating card so nothing covers it, and
       give it a soft halo so cards drifting behind don't clutter the text. */
    z-index: 20 !important;
    text-shadow:
      0 2px 10px var(--cream),
      0 0 26px var(--cream),
      0 0 26px var(--cream);
  }
  .s6-pop { width: clamp(138px, 40vw, 172px) !important; }
  .s6-pop-text { font-size: 12.5px !important; line-height: 1.36 !important; -webkit-line-clamp: 3; }
  .s6-pop-card { padding: 14px 14px 12px; }
  .s6-pop-name { font-size: 11.5px; }
  .s6-pop-city { font-size: 9.5px; }
}
@media (max-width: 560px) {
  .s6 { padding-left: clamp(14px, 4vw, 24px); padding-right: clamp(14px, 4vw, 24px); }
  .s6-stage { height: clamp(580px, 144vw, 680px) !important; }
  .s6-stage-title { font-size: clamp(44px, 14vw, 60px) !important; }
  .s6-pop { width: clamp(132px, 41vw, 160px) !important; }
}
@media (max-width: 380px) {
  .s6-stage { height: 560px !important; }
  .s6-pop { width: 128px !important; }
  .s6-stage-title { font-size: 46px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   7 · STORY phases — vertically centred (were sitting too high)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .story-row {
    align-content: center;
    justify-items: center;
    text-align: center;
    padding: 60px 24px;
    overflow-y: visible;
  }
  .story-row-text { align-items: center; }
  .story-row-img { max-width: 240px; }

  /* ───────────────────────────────────────────────────────────
     8 · PHASE 4 — text ABOVE, big bottom-anchored woman
     ─────────────────────────────────────────────────────────── */
  .story-cert-img {
    width: clamp(420px, 116vw, 620px);
    height: clamp(560px, 152vw, 820px);
    transition: bottom 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s linear;
  }

  .story-cert-overlay {
    top: calc(env(safe-area-inset-top, 0px) + clamp(74px, 12vh, 104px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(92%, 480px);
    text-align: center;
  }
  .story-cert-eyebrow { margin-bottom: 12px; }
  .story-cert-title { font-size: clamp(40px, 11vw, 64px); margin-bottom: 14px; }
  .story-cert-stamps { justify-content: center; }

  /* ───────────────────────────────────────────────────────────
     9 · PHASE 5 — woman lifts up, buy block sits below in a BOX,
         seals small / tight / horizontal
     ─────────────────────────────────────────────────────────── */
  .story-buy {
    left: 14px;
    right: 14px;
    bottom: 16px;
    top: auto;
    width: auto;
    padding: 18px 16px 16px;
    gap: 12px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    border: 1px solid rgba(31, 22, 18, 0.08);
    border-radius: 24px;
    box-shadow: 0 -8px 36px -14px rgba(31, 22, 18, 0.28);
  }
  .story-buy-title { font-size: clamp(26px, 7vw, 36px); line-height: 1.05; }
  .story-buy-sub { font-size: 12.5px; max-width: none; }
  .story-buy-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
  .story-buy-card { padding: 10px 11px; gap: 9px; border-radius: 13px; }
  .story-buy-card-icon { width: 34px; height: 34px; border-radius: 10px; }
  .story-buy-card-icon svg { width: 17px; height: 17px; }
  .story-buy-card-label { font-size: 12.5px; }
  .story-buy-card-sub { display: none; }      /* keep cards compact (2×2) */
  .story-buy-card-arrow { display: none; }

  /* Featured "Web Yojea" card — stays in the 2×2 grid but is tuned for a
     narrow cell: icon + label on one line, the "Hemat" badge floated to a
     corner pill (so it never pushes the label onto a 2nd line), and the
     scrolling marquee pinned at the bottom. Hover-only effects (reveal
     text, rotating glow) are naturally inactive on touch. */
  .story-buy-card--featured {
    padding: 11px 11px 24px;
    gap: 8px;
    animation: none;                 /* drop the pulse on small screens */
  }
  .story-buy-card--featured .story-buy-card-icon {
    width: 32px;
    height: 32px;
  }
  .story-buy-card--featured .story-buy-card-icon svg { width: 16px; height: 16px; }
  .story-buy-card--featured .story-buy-card-label {
    display: flex;
    flex-direction: column-reverse;  /* badge sits above the label */
    align-items: flex-start;
    gap: 3px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
  }
  /* Badge sits above the label (matches desktop), not floated to a corner */
  .story-buy-card--featured .story-buy-badge {
    position: static;
    align-self: flex-start;
    margin: 0;
    padding: 1px 6px;
    font-size: 8px;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 6px -2px rgba(0,0,0,0.3);
  }
  /* Marquee strip */
  .story-buy-card--featured .story-buy-marquee { height: 18px; }
  .story-buy-card--featured .story-buy-marquee-track {
    animation-duration: 11s;         /* a touch faster so it reads on mobile */
  }
  .story-buy-card--featured .story-buy-marquee-track span {
    font-size: 9px;
    padding: 0 12px;
    font-weight: 600;
  }
  /* Hover/tap reveal text — tuned to wrap into a tidy 3 lines inside the
     narrow card (arrow is hidden on mobile, so use the full width). */
  .story-buy-card--featured .story-buy-reveal {
    left: 11px;
    right: 11px;
    margin-top: -8px;                /* clear the marquee strip */
    font-size: 11px;
    line-height: 1.22;
    text-wrap: balance;
  }

  /* Seals: explicit small size from JS — drop the global mobile scale
     so they don't shrink further, keep them tight & horizontal. */
  .story-seal { transform: none; }
  .story-seal-main { font-size: 15px; }
  .story-seal-sub { font-size: 6px; }
}

/* ─────────────────────────────────────────────────────────────────
   Footer + misc tightening on the smallest screens
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .s9-cols { grid-template-columns: 1fr 1fr; gap: 20px; }
  .s9-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Remove the organic SVG wave dividers on mobile — they read as an odd
   beige band under the buy cards on small screens. Flat edge instead. */
@media (max-width: 760px) {
  .story-divider { display: none !important; }
}