/* ============================================================================
   eVocal Landing — Mobile responsive overrides
   Scoped under @media (max-width: 720px). All rules use !important because the
   underlying components apply inline styles via React.
   ============================================================================ */

@media (max-width: 720px) {

  /* ─────────────────────────────────────────────────────────────────
     0. Global stage overrides
     ───────────────────────────────────────────────────────────────── */
  body { overflow-x: hidden !important; }
  section[id] { scroll-margin-top: 80px !important; }

  /* Squeeze every ev-stage to viewport, kill big horizontal padding */
  .ev-stage {
    padding-left: 18px !important;
    padding-right: 18px !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     1. NAV
     ───────────────────────────────────────────────────────────────── */
  nav {
    padding: 12px 16px !important;
  }
  nav img[alt="eVocal"] {
    height: 56px !important;
  }
  /* desktop links already hidden by existing styles */

  .mobile-menu {
    top: 70px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     2. HERO  (#top)
     ───────────────────────────────────────────────────────────────── */
  #top {
    padding-top: 90px !important;
    padding-bottom: 32px !important;
    min-height: auto !important;
  }
  /* Hero inner grid → single column. The grid is the first <div> child. */
  #top > div[style*="grid-template-columns"],
  #top > div[style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding: 24px 4px 0 !important;
  }
  #top h1 {
    font-size: 42px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
  }
  #top p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  /* CTA buttons stack full-width */
  #top .ev-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 22px !important;
    font-size: 16px !important;
  }
  #top a {
    flex: 1 1 100% !important;
  }
  /* Trust strip */
  #top [style*="0.18em"] {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
  }
  /* Phone container in hero — PhoneAnim wraps with width:520 hardcoded.
     Force the right grid track to allow shrink, and scale the phone down. */
  #top > div[style*="grid-template-columns"] > div {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* PhoneAnim outer stage (min-height:720 + perspective) → keep as flex-center
     so the inner 520px anchor stays horizontally centered when scaled. */
  #top div[style*="perspective: 1200"],
  #top div[style*="perspective:1200"] {
    min-height: auto !important;
    height: 540px !important; /* room for phone (408) + hint card (~110) below */
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    position: relative !important;
    align-items: flex-start !important;
  }

  /* Inner 520x680 anchor — scale down + manually re-center using absolute positioning.
     Box is 520wide (overflows parent 334w). Position at left:50% with translateX(-50%)
     after scaling, so the visual 312px center matches the parent's 50% line. */
  #top div[style*="perspective: 1200"] > div[style*="width: 520"],
  #top div[style*="perspective:1200"] > div[style*="width: 520"] {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) scale(0.6) !important;
    transform-origin: center top !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  /* Kill 3D rotation on inner phone-stage children (they have rotateX/Y/Z) */
  #top div[style*="perspective: 1200"] > div[style*="width: 520"] > div[style*="rotate"] {
    transform: none !important;
  }

  /* Ambient glow blobs — keep but reduce */
  #top div[style*="perspective: 1200"] > div[style*="blur(70px)"] {
    inset: 30% 20% !important;
  }

  /* Hint card "Apel primit" — was absolute right of phone. On mobile,
     reposition to BELOW the phone, centered. The persp container is 460px tall
     (set above), so put hint at bottom of it. */
  #top div[style*="perspective: 1200"] > div[style*="right: calc(50% - 360px)"] {
    position: absolute !important;
    right: auto !important;
    left: 50% !important;
    top: auto !important;
    bottom: -10px !important;
    transform: translateX(-50%) !important;
    max-width: 280px !important;
    width: calc(100% - 32px) !important;
    margin: 0 !important;
    z-index: 7 !important;
  }
  /* Pointer triangle — flip from left-pointing to up-pointing */
  #top div[style*="perspective: 1200"] > div[style*="right: calc(50% - 360px)"] > div > div[style*="left: -7px"] {
    left: 50% !important;
    top: -7px !important;
    transform: translateX(-50%) rotate(45deg) !important;
    border-bottom: none !important;
    border-right: none !important;
    border-top: 1px solid rgba(34,197,94,0.45) !important;
    border-left: 1px solid rgba(34,197,94,0.45) !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     3. PROBLEMA
     ───────────────────────────────────────────────────────────────── */
  [data-screen-label="02 Problema"] .ev-stage {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  /* Headline "Coșurile abandonate sunt banii care…" — was 56px, way too big */
  [data-screen-label="02 Problema"] h2 {
    font-size: 30px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 24px !important;
    max-width: 100% !important;
  }
  /* Hero panel: "70% / coșuri abandonate" + body text → stack vertical */
  [data-screen-label="02 Problema"] [style*="grid-template-columns: auto 1fr"],
  [data-screen-label="02 Problema"] [style*="gridTemplateColumns: \"auto 1fr\""] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: left !important;
  }
  /* Hero panel container — reduce padding 32px 36px → 20px */
  [data-screen-label="02 Problema"] .ev-glass {
    padding: 20px 16px !important;
  }
  /* "70%" big number — 96 → 56 */
  [data-screen-label="02 Problema"] [style*="font-size: 96"],
  [data-screen-label="02 Problema"] [style*="fontSize: 96"] {
    font-size: 56px !important;
  }
  /* "Clientul a pus în coș" — 28 → 18 */
  [data-screen-label="02 Problema"] [style*="font-size: 28"],
  [data-screen-label="02 Problema"] [style*="fontSize: 28"] {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }
  /* Body paragraph — kill maxWidth */
  [data-screen-label="02 Problema"] [style*="max-width: 580"],
  [data-screen-label="02 Problema"] [style*="maxWidth: 580"] {
    max-width: 100% !important;
    font-size: 14px !important;
  }
  /* The 3 sub-cards grid 1fr 1fr 1fr → 1 col */
  [data-screen-label="02 Problema"] [style*="grid-template-columns: 1fr 1fr 1fr"],
  [data-screen-label="02 Problema"] [style*="gridTemplateColumns: \"1fr 1fr 1fr\""] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Sub-card big numbers (44px) keep, but reduce padding */
  [data-screen-label="02 Problema"] [style*="font-size: 44"],
  [data-screen-label="02 Problema"] [style*="fontSize: 44"] {
    font-size: 36px !important;
  }
  /* Bottom red callout strip — wrap text */
  [data-screen-label="02 Problema"] [style*="font-size: 16"][style*="font-weight: 700"] {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* Bridge band wordmark "eVocal" between Problema (dark) and Solutia (light).
     Desktop uses min(32vw, 320px) which is 124px on 390 viewport →
     letter-spacing -0.07em × 6 chars overflows. Reduce to 18vw. */
  section[aria-hidden="true"] {
    padding-top: 32px !important;
  }
  section[aria-hidden="true"] [style*="32vw"] {
    font-size: 23vw !important;
    letter-spacing: -0.05em !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     4. SOLUTIA V4 — 3 piloni romani
     ───────────────────────────────────────────────────────────────── */
  [data-screen-label="03 Solutia"] .ev-stage {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  [data-screen-label="03 Solutia"] h2 {
    font-size: 36px !important;
    line-height: 1.04 !important;
    letter-spacing: -0.02em !important;
  }
  [data-screen-label="03 Solutia"] [style*="repeat(3"],
  [data-screen-label="03 Solutia"] [style*="1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  /* Roman numerals */
  [data-screen-label="03 Solutia"] [style*="Georgia"] {
    font-size: 64px !important;
  }
  [data-screen-label="03 Solutia"] [style*="font-size: 22"],
  [data-screen-label="03 Solutia"] [style*="fontSize: 22"] {
    font-size: 19px !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     5. HOW IT WORKS V7 — phone simulation
     ───────────────────────────────────────────────────────────────── */
  [data-screen-label="04 Cum functioneaza"] .ev-stage {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  [data-screen-label="04 Cum functioneaza"] h2 {
    font-size: 34px !important;
    line-height: 1.06 !important;
  }
  [data-screen-label="04 Cum functioneaza"] [style*="grid-template-columns"],
  [data-screen-label="04 Cum functioneaza"] [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     6. STATS V2 — 4 numere
     ───────────────────────────────────────────────────────────────── */
  [data-screen-label="05 Stats"] .ev-stage {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  [data-screen-label="05 Stats"] [style*="repeat(4"],
  [data-screen-label="05 Stats"] [style*="grid-template-columns"],
  [data-screen-label="05 Stats"] [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }
  [data-screen-label="05 Stats"] [style*="font-size: 96"],
  [data-screen-label="05 Stats"] [style*="fontSize: 96"],
  [data-screen-label="05 Stats"] [style*="font-size: 88"],
  [data-screen-label="05 Stats"] [style*="fontSize: 88"],
  [data-screen-label="05 Stats"] [style*="font-size: 72"],
  [data-screen-label="05 Stats"] [style*="fontSize: 72"] {
    font-size: 42px !important;
    line-height: 1 !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     7. COMPARATIE — Call-center vs eVocal
     ───────────────────────────────────────────────────────────────── */
  #comparatie .ev-stage {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  #comparatie h2 {
    font-size: 28px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
  }
  /* Tighten table */
  #comparatie [style*="grid-template-columns: 1.4fr 1fr 1fr"],
  #comparatie [style*="grid-template-columns: 1.2fr 1fr 1fr"] {
    grid-template-columns: 1.1fr 0.9fr 1fr !important;
  }
  #comparatie [style*="padding: 18px 28px"],
  #comparatie [style*="padding: 22px 28px"],
  #comparatie [style*="padding: 20px 28px"],
  #comparatie [style*="padding: 28px 28px"] {
    padding: 12px 8px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  #comparatie img[alt="eVocal"] {
    height: 28px !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     8. ECOSISTEM (label "08 Ecosistem")
     ───────────────────────────────────────────────────────────────── */
  [data-screen-label="08 Ecosistem"] .ev-stage {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  [data-screen-label="08 Ecosistem"] h2 {
    font-size: 36px !important;
    line-height: 1.04 !important;
  }
  [data-screen-label="08 Ecosistem"] [style*="repeat(3"],
  [data-screen-label="08 Ecosistem"] [style*="1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  [data-screen-label="08 Ecosistem"] img[alt="eVocal"] {
    height: 72px !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     9. FAQ
     ───────────────────────────────────────────────────────────────── */
  #faq .ev-stage {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  #faq h2 {
    font-size: 36px !important;
    line-height: 1.05 !important;
  }
  .faq-q {
    font-size: 16px !important;
    padding: 22px 0 !important;
    gap: 14px !important;
  }
  .faq-a-inner {
    font-size: 15px !important;
    padding: 0 0 22px !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     10. FINAL CTA
     ───────────────────────────────────────────────────────────────── */
  #contact .ev-stage {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  #contact h2,
  #contact [style*="font-size: 96"],
  #contact [style*="fontSize: 96"],
  #contact [style*="font-size: 88"],
  #contact [style*="fontSize: 88"] {
    font-size: 44px !important;
    line-height: 1.02 !important;
  }
  #contact p {
    font-size: 16px !important;
    margin: 16px auto 24px !important;
  }
  #contact .ev-btn,
  #contact button {
    width: 100% !important;
    justify-content: center !important;
    font-size: 15px !important;
    padding: 16px 18px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }
  #contact [style*="display: flex"][style*="gap"] {
    flex-direction: column !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     11. FOOTER
     ───────────────────────────────────────────────────────────────── */
  [data-screen-label="11 Footer"] .ev-stage {
    padding-top: 32px !important;
    padding-bottom: 24px !important;
  }
  [data-screen-label="11 Footer"] [style*="32vw"],
  [data-screen-label="11 Footer"] [style*="28vw"],
  [data-screen-label="11 Footer"] [style*="24vw"] {
    font-size: 26vw !important;
  }
  [data-screen-label="11 Footer"] [style*="space-between"] {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
    align-items: center !important;
  }
}

/* iPhone SE 375px and tighter */
@media (max-width: 400px) {
  #top h1 { font-size: 36px !important; }
  [data-screen-label="02 Problema"] h2,
  [data-screen-label="03 Solutia"] h2,
  [data-screen-label="08 Ecosistem"] h2 { font-size: 30px !important; }
  #contact h2 { font-size: 36px !important; }
  #comparatie h2 { font-size: 24px !important; }
}