/* ============================================================
   PrimeShine AutoCare — Mobile CSS  (complete rewrite v3)
   Load order: site.css → mobile.css → brand.css
   Breakpoints: 768 | 480 | 360
   ============================================================ */

/* ============================================================
   0. GLOBAL BASELINE — applies at ALL widths
   ============================================================ */

/* FIX #3 — prevent horizontal scroll on both html AND body */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* FIX #2 — clean single vh variable; no duplicate min-height */
:root { --vh: 1vh; }   /* JS in site.js sets this per actual viewport */

/* ============================================================
   1. TABLET + PHONE  ≤ 768px
   ============================================================ */
@media (max-width: 768px) {

  /* ---- spacing tokens ---- */
  :root {
    --pad:  20px;
    --r:    14px;
    --r-lg: 20px;
  }
  body { font-size: 16px; }
  .section { padding-block: clamp(44px, 7vh, 72px); }

  /* --------------------------------------------------
     NAV
  -------------------------------------------------- */
  .nav-inner {
    padding-block: 0.7rem;
    gap: 0.75rem;
  }

  /* Logo on mobile: PrimeShine transparent PNG */
  .logo-chip img {
    height: 70px !important;
    width: auto;
  }

  /* hide desktop nav, show hamburger */
  .nav-links { display: none; }
  .nav-cta .btn:not(.menu-btn) { display: none; }
  .menu-btn {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5em;
    margin: -0.5em -0.3em -0.5em 0;
    align-items: center;
    justify-content: center;
  }
  .menu-btn svg { width: 26px; height: 26px; }

  /* drawer links */
  .drawer a {
    font-size: 1.65rem;
    padding: 0.45em 0;
    min-height: 54px;
    display: flex;
    align-items: center;
  }
  .drawer .btn {
    width: 100%;
    justify-content: center;
    margin-top: 1.8rem;
    font-size: 1rem;
  }

  /* --------------------------------------------------
     HERO  (index.html)
  -------------------------------------------------- */
  .hero {
    /* FIX #2 — one clean rule, no conflict */
    min-height: calc(var(--vh, 1vh) * 100);
    padding-top: 86px;
    padding-bottom: 48px;
    align-items: flex-start;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    width: 100%;
  }

  /* stage (image) on top */
  .hero .stage {
    order: -1;
    max-width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-lg);
  }

  /* float cards pinned inside the image */
  .stage .float-card {
    padding: 0.6rem 0.8rem;
    animation: none;
    /* FIX #5 — use brand vars not hardcoded oklch */
    background: rgba(9, 10, 12, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    max-width: 60%;
    border: 1px solid rgba(255,255,255,0.08);
  }
  .stage .fc-1 { top: 10px; left: 10px; right: auto; bottom: auto; }
  .stage .fc-2 { bottom: 10px; right: 10px; top: auto; left: auto; }
  .stage .fc-ic { width: 30px; height: 30px; border-radius: 7px; }
  .stage .fc-ic svg { width: 15px; height: 15px; }
  .fc-t { font-size: 0.8rem; }
  .fc-s { font-size: 0.56rem; }

  /* hero text */
  .display { font-size: clamp(2.4rem, 11vw, 3.4rem); line-height: 1.0; }
  .hero h1 { margin: 0.4rem 0 1rem; }
  .lead  { font-size: 1rem; max-width: 100%; }

  /* FIX #4 — hero-actions: stacked, full-width, no center conflict */
  .hero-actions {
    display: flex;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.7rem;
    width: 100%;
    margin-top: 0.4rem;
  }
  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 50px;
  }
  .btn-lg { font-size: 1rem; padding: 1em 1.4em; }

  /* stats strip */
  .hero-meta {
    gap: 1rem 1.8rem;
    margin-top: 1.8rem;
    flex-wrap: wrap;
  }
  .hero-meta .num { font-size: 1.65rem; }
  .hero-meta .lbl { font-size: 0.62rem; margin-top: 0.3rem; }
  .scroll-cue { display: none; }

  /* --------------------------------------------------
     MARQUEE
  -------------------------------------------------- */
  .marquee { padding-block: 1rem; }
  .marquee-track { gap: 2.2rem; }
  .marquee-item { font-size: 0.9rem; gap: 0.7rem; }

  /* --------------------------------------------------
     SERVICE CARDS  (index.html)
  -------------------------------------------------- */
  .svc-grid { grid-template-columns: 1fr; gap: 14px; }
  .svc {
    min-height: 0 !important;   /* FIX #9 — override any desktop inline min-height */
    padding: 22px 20px;
    transform: none !important;
  }
  .svc h3 { margin: 1.1rem 0 0.45rem; }
  .svc-ic { width: 46px; height: 46px; border-radius: 12px; }
  .svc-ic svg { width: 23px; height: 23px; }

  /* --------------------------------------------------
     PROCESS STEPS
  -------------------------------------------------- */
  .steps { grid-template-columns: 1fr 1fr; gap: 12px; }
  .step { padding: 20px 16px; }
  .step h4 { font-size: 1rem; margin: 0.7rem 0 0.3rem; }
  .step .line { display: none; }

  /* --------------------------------------------------
     WHY US SPLIT
  -------------------------------------------------- */
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split > [data-reveal="left"] {
    order: -1;
    aspect-ratio: 4 / 3 !important;
  }
  .feat-list { gap: 0.9rem; margin-top: 1.4rem; }
  .feat { gap: 0.7rem; }
  .feat h4 { font-size: 0.98rem; margin-bottom: 0.12rem; }
  .feat .ck { width: 26px; height: 26px; border-radius: 7px; }
  .feat .ck svg { width: 13px; height: 13px; }
  .h-xl { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
  .h-lg { font-size: clamp(1.5rem, 6.5vw, 2rem); }
  .h-md { font-size: 1.15rem; }

  /* --------------------------------------------------
     GALLERY TEASER (index.html)
  -------------------------------------------------- */
  .flex.between.center.wrap-f.gap {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
  }
  .gal-teaser { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gal-teaser .tall  { grid-row: span 1; aspect-ratio: 4 / 3; }
  .gal-teaser .ph    { aspect-ratio: 4 / 3; border-radius: var(--r); }

  /* --------------------------------------------------
     CTA BAND  (index + services)
  -------------------------------------------------- */
  .cta-band { padding: clamp(28px, 5vw, 48px) clamp(18px, 4vw, 36px); border-radius: var(--r-lg); }
  /* FIX #4 — same stacked override for cta-band's hero-actions */
  .cta-band .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.7rem;
    margin-top: 1.4rem;
    width: 100%;
  }
  .cta-band .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .cta-band .display { font-size: clamp(1.9rem, 8.5vw, 2.8rem); }

  /* --------------------------------------------------
     FOOTER
  -------------------------------------------------- */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
  /* FIX #10 — footer logo width safe for 2-col at 768 */
  .logo-badge img { height: 90px !important; width: auto !important; }
  .footer-bottom { flex-direction: column; gap: 0.4rem; font-size: 0.78rem; }

  /* --------------------------------------------------
     SERVICES PAGE  (services.html)
  -------------------------------------------------- */
  .page-hero { padding-top: 116px; padding-bottom: clamp(24px, 4vh, 48px); }
  .page-hero h1 { margin: 0.7rem 0 0.8rem; }

  /* FIX #6 — cat-tabs scroll horizontally instead of wrapping */
  .cat-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    margin-top: 1.4rem;
    padding-bottom: 4px;
  }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-tab { flex: none; padding: 0.7em 1.2em; font-size: 0.85rem; }

  /* tier cards: 1-column */
  .tier-grid  { grid-template-columns: 1fr !important; gap: 12px; }
  .tier-card  { padding: 22px 18px 18px; border-radius: 16px; }
  .tier-name  { font-size: 1.5rem; }
  .tier-icon  { width: 40px; height: 40px; border-radius: 10px; margin-bottom: 0.9rem; }
  .tier-icon svg { width: 19px; height: 19px; }
  .tier-tagline { font-size: 0.8rem; }
  .tier-includes li { font-size: 0.84rem; gap: 0.5rem; }

  /* exterior 5-card scroll */
  .tier-grid-5 {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 14px;
    scrollbar-width: none;
  }
  .tier-grid-5::-webkit-scrollbar { display: none; }
  .tier-grid-5 .tier-card {
    min-width: 80vw;
    scroll-snap-align: start;
    flex: none;
  }
  .scroll-hint { display: flex; }

  /* addons */
  .addons-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 1.4rem; }
  .addon-card  { padding: 14px 14px; gap: 0.7rem; border-radius: 12px; }
  .addon-ic    { width: 34px; height: 34px; border-radius: 8px; }
  .addon-ic svg { width: 16px; height: 16px; }
  .addon-name  { font-size: 0.88rem; }
  .addon-desc  { font-size: 0.73rem; }

  .tiers-label { font-size: clamp(1.85rem, 8vw, 2.6rem); }
  .tiers-sub   { font-size: 0.93rem; margin-bottom: 1rem; }

  /* --------------------------------------------------
     BOOK PAGE  (book.html)
  -------------------------------------------------- */
  .book-grid  { grid-template-columns: 1fr; gap: 24px; }
  .summary    { position: static; padding: 20px 16px; }
  .opt-grid   { grid-template-columns: 1fr; gap: 10px; }
  .opt        { padding: 0.8rem 0.9rem; gap: 0.7rem; }
  .opt .oic   { width: 34px; height: 34px; border-radius: 9px; }
  .opt .oic svg { width: 17px; height: 17px; }
  /* FIX — iOS: font-size must be ≥16px to prevent auto-zoom */
  .input, .ta, select.input { font-size: 16px !important; padding: 0.8em 0.95em; }
  .two        { grid-template-columns: 1fr; gap: 0; }
  .pills      { gap: 8px; }
  .pill       { padding: 0.65em 0.95em; font-size: 0.88rem; }
  .form-card  { padding: 20px 16px; }
  .fieldset   { margin-bottom: 1.8rem; }
  /* FIX #7 — contact-bar missing 768px breakpoint */
  .contact-bar { grid-template-columns: 1fr !important; gap: 12px; }
  .cbox { padding: 1.1rem 1rem; }

  /* --------------------------------------------------
     GALLERY PAGE  (gallery.html)
  -------------------------------------------------- */
  .masonry  { columns: 2 !important; column-gap: 10px; }
  .gal-item { margin-bottom: 10px; }
}

/* ============================================================
   2. SMALL PHONES  ≤ 480px
   ============================================================ */
@media (max-width: 480px) {

  :root { --pad: 16px; }

  /* logo */
  .logo-chip img { height: 58px !important; width: auto; }

  /* hero */
  .hero  { padding-top: 78px; padding-bottom: 40px; }
  .hero .stage { aspect-ratio: 16 / 11; }
  .display { font-size: clamp(2rem, 11.5vw, 2.8rem); }

  /* steps: single column */
  .steps { grid-template-columns: 1fr; gap: 10px; }
  .step  { padding: 18px 14px; }

  /* footer: single column */
  .footer-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .logo-badge img { height: 70px !important; width: auto !important; }

  /* gallery teaser: single column */
  .gal-teaser { grid-template-columns: 1fr; gap: 8px; }
  /* FIX #8 — gallery page masonry: 1 col at 480 not just 520 */
  .masonry { columns: 1 !important; }

  /* hide nav CTA button entirely */
  .nav-cta .btn { display: none !important; }

  /* drawer */
  .drawer a { font-size: 1.4rem; min-height: 50px; }

  /* services tier cards wider snap */
  .tier-grid-5 .tier-card { min-width: 85vw; }

  /* addons: single column */
  .addons-grid { grid-template-columns: 1fr; gap: 8px; }

  /* page hero */
  .page-hero { padding-top: 104px; }

  /* section-head */
  .section-head { max-width: 100%; }
}

/* ============================================================
   3. TINY PHONES  ≤ 360px
   ============================================================ */
@media (max-width: 360px) {

  :root { --pad: 14px; }

  .logo-chip img { height: 52px !important; width: auto; }
  .display { font-size: clamp(1.85rem, 12vw, 2.4rem); }

  .hero { padding-top: 72px; }

  /* float cards a bit wider since screen is tiny */
  .stage .float-card { max-width: 72%; padding: 0.5rem 0.65rem; }

  .hero-meta { gap: 0.8rem 1.4rem; }
  .hero-meta .num { font-size: 1.45rem; }

  .drawer a { font-size: 1.2rem; }

  .tier-grid-5 .tier-card { min-width: 90vw; }
}

/* ============================================================
   4. TOUCH DEVICE — pointer: coarse
   ============================================================ */
@media (pointer: coarse) {

  /* Disable 3D tilt — no mousemove on touch */
  [data-tilt] { transform: none !important; }

  /* No sheen sweep — triggered only by :hover */
  .sheen::after { display: none; }

  /* Minimum tap targets */
  .btn         { min-height: 48px; }
  .svc-arrow   { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-links a    { min-height: 44px; display: inline-flex; align-items: center; }

  /* Disable magnetic effect residue */
  [data-magnetic] { --bx: 0px !important; --by: 0px !important; }
}

/* ============================================================
   5. SAFE AREA  (iPhone notch / Dynamic Island / home bar)
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
  .nav-inner {
    padding-left:  max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
  }
  .footer {
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
  .drawer {
    padding-top:    max(var(--pad), env(safe-area-inset-top));
    padding-bottom: max(var(--pad), env(safe-area-inset-bottom));
  }
}

/* ============================================================
   HIDE float cards on mobile — they overlap hero text
   ============================================================ */
@media (max-width: 768px) {
  .stage .float-card { display: none !important; }
}