/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   mobile.css — Mobile Oven Clean
   STRUCTURE:
   1. Global styles (applied all screen sizes)
   2. @media (max-width: 768px)  — Mobile only
   3. @media (max-width: 1024px) — Mobile + Tablet hero layout
   4. @media (min-width: 769px) and (max-width: 1024px) — Tablet nav
   5. Trust blocks — show/hide rules
   6. @media (min-width: 1025px) — Desktop overrides
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 1. Global (all sizes) ──────────────────────────────────── */
body { padding-bottom: 80px }

/* Mob nav */
.mob-nav {
  display: none; position: fixed;
  top: 68px; right: 0; left: auto;
  max-width: 320px; z-index: 99999;
  background: #fff; border-radius: 0 0 0 16px;
  box-shadow: -4px 4px 24px rgba(0,0,0,.18);
  padding: 20px;
}
.mob-nav.open { display: flex; flex-direction: column; gap: 0 }
.mob-nav a {
  display: block; padding: 13px 0;
  border-bottom: 1px solid #f5f0f7;
  font-size: .95rem; font-weight: 700;
  color: #1a1a1a; text-decoration: none;
}
.mob-nav a:last-child { border-bottom: none }
.mob-nav-cta {
  display: flex; flex-direction: column;
  gap: 10px; border-top: 2px solid #f5e8f0
}
.mob-nav-cta .btn { width: 100%; justify-content: center; min-height: 52px; border-radius: 14px }

/* ── 2. Mobile only (≤768px) ────────────────────────────────── */
@media (max-width: 768px) {
  .mob-quick-quote { display: block }

  /* Hero BA panel images */
  #hero-slots { margin-bottom: 10px; margin-top: 4px }
  .hero-ba-panel img { height: 130px !important }
  .mob-quick-quote { border-top: 1px solid rgba(255,255,255,.1); padding-top: 0 }

  /* ═══════════════════════════════════════════════════
     MOBILE OPTIMISATIONS
  ═══════════════════════════════════════════════════ */

  /* Global section spacing */
  section { padding: 40px 0 !important }
  .container { padding-left: 16px !important; padding-right: 16px !important }

  /* Hero */
  .hero { padding: 20px 16px 0 !important }
  .hero h1 { font-size: 1.75rem !important; line-height: 1.1 !important }
  .hero-sub { font-size: .875rem !important; margin-bottom: 16px !important; max-width: 100% !important }
  .hero-btns { flex-direction: column !important; gap: 8px !important }
  .hero-btns .btn { width: 100% !important; min-height: 52px !important; border-radius: 14px !important; font-size: .95rem !important }

  /* Why Choose Us — 3-col grid → vertical cards with icon left */
  .why-section-wrap div[style*="grid-template-columns:repeat(3"] {
    display: flex !important; flex-direction: column !important; gap: 10px !important
  }
  .why-section-wrap div[style*="border:1.5px solid #f0e8f4;border-radius:20px"] {
    flex-direction: row !important; align-items: flex-start !important;
    padding: 14px !important; gap: 12px !important
  }
  .why-section-wrap div[style*="width:52px;height:52px"] {
    width: 40px !important; height: 40px !important; flex-shrink: 0 !important
  }
  .why-section-wrap h4 { font-size: .85rem !important; margin-bottom: 3px !important }
  .why-section-wrap p { font-size: .82rem !important }
  .why-section-wrap div[style*="margin-top:48px"] {
    padding: 18px 16px !important; flex-direction: column !important; gap: 14px !important
  }
  .why-section-wrap div[style*="margin-top:48px"] > div:first-child {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; width: 100% !important
  }
  .why-section-wrap div[style*="margin-top:48px"] button { width: 100% !important }

  /* Services — 3-col → 2-col */
  .services-section-wrap div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr 1fr !important; gap: 10px !important
  }
  .services-section-wrap div[style*="height:120px"] { height: 80px !important }
  .services-section-wrap div[style*="padding:20px 22px"] { padding: 10px 12px !important }
  .services-section-wrap h3 { font-size: .8rem !important; margin-bottom: 4px !important }
  .services-section-wrap p { font-size: .76rem !important; margin-bottom: 6px !important }

  /* Pricing — 5-col → 2-col */
  .pricing-section-wrap div[style*="grid-template-columns:repeat(5"] {
    grid-template-columns: 1fr 1fr !important; gap: 10px !important
  }
  .pricing-section-wrap div[style*="font-size:2rem;font-weight:900;color:#ff2d8f"] {
    font-size: 1.5rem !important
  }
  .pricing-section-wrap div[style*="grid-template-columns:1fr 1fr;gap:32px"] {
    grid-template-columns: 1fr !important; gap: 16px !important
  }

  /* Reviews — 3-col → 1-col */
  .reviews-section-wrap div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important; gap: 12px !important
  }

  /* Real Results — 3 cards → 1-col stacked */
  .reviews-section-wrap div[style*="margin-bottom:40px"] { margin-bottom: 16px !important }
  div[style*="grid-template-columns:repeat(3,1fr);gap:20px"] {
    grid-template-columns: 1fr !important; gap: 12px !important
  }

  /* Result cards — image height */
  div[style*="display:grid;grid-template-columns:1fr 1fr;position:relative"] [style*="height:220px"] {
    height: 160px !important
  }

  /* Pricing 2-col info → 1-col */
  .pricing-section-wrap div[style*="display:grid;grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important
  }

  /* How It Works 4-col horizontal → 2x2 grid */
  div[style*="grid-template-columns:repeat(4,1fr);gap:0;position:relative"] {
    grid-template-columns: 1fr 1fr !important; gap: 14px 10px !important
  }
  /* Hide the connector line on mobile */
  div[style*="top:40px;left:calc(12.5%"] { display: none !important }
  /* Step circles — slightly smaller */
  div[style*="width:80px;height:80px;background:linear-gradient(135deg,#ff2d8f"] {
    width: 56px !important; height: 56px !important; margin-bottom: 12px !important
  }
  div[style*="width:80px;height:80px;background:rgba(255,45,143,.12)"] {
    width: 56px !important; height: 56px !important; margin-bottom: 12px !important
  }

  /* How it works 4-step grid in SEO section → 2x2 */
  div[style*="grid-template-columns:repeat(4,1fr);gap:12px"] {
    grid-template-columns: 1fr 1fr !important; gap: 8px !important
  }

  /* Book Your Clean form — name+phone side by side → stacked */
  div[style*="grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px"] {
    grid-template-columns: 1fr !important; gap: 10px !important
  }
  section[style*="background:#f8fafc;padding:72px 0"] div[style*="max-width:680px"] {
    max-width: 100% !important
  }

  /* SEO Content block — hide on mobile (too long, not needed) */
  .seo-content-section { display: none !important }

  /* FAQ items */
  .faq-q { padding: 14px 16px !important; font-size: .88rem !important }

  /* SEO Internal links 4-col → 2-col */
  .seo-links-section div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important
  }

  /* Areas cards — 3-col → 2-col */
  .areas-sec div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr 1fr !important; gap: 10px !important
  }

  /* Area cards min height */
  .areas-sec a[style*="min-height:110px"] {
    min-height: 90px !important
  }

  /* Final CTA buttons → stacked */
  section[style*="padding:80px 0;position:relative;overflow:hidden"] div[style*="display:flex;align-items:center;justify-content:center;gap:14px"] {
    flex-direction: column !important; gap: 8px !important
  }
  .final-cta .final-cta-btns { flex-direction: column !important; gap: 8px !important }
  .final-cta-btns .btn { width: 100% !important }

  /* Section headings tighter */
  div[style*="margin-bottom:52px"] { margin-bottom: 26px !important }
  div[style*="margin-bottom:40px"] { margin-bottom: 20px !important }

  /* Section tag pills */
  div[style*="border-radius:50px;font-size:.75rem;font-weight:800;letter-spacing:1.2px"] {
    font-size: .7rem !important; padding: 5px 12px !important
  }

  /* BA section before/after images */
  .ba-section div[style*="height:360px"],
  .ba-section img[style*="height:360px"] { height: 200px !important }
  .ba-section div[style*="max-width:900px"] { max-width: 100% !important }

  /* Hero section padding bottom */
  .hero { padding-bottom: 0 !important }
}

/* ── 3. Mobile + Tablet hero layout (≤1024px) ───────────────── */
@media (max-width: 1024px) {
  .hero { padding: 44px 18px 52px }
  .hero-layout { display: block }
  .hero-quote-card { display: none }
  .hero h1 { font-size: 2.1rem }
  .hero-sub { max-width: 100%; margin-bottom: 26px }
  .hero-trust-chips { margin-bottom: 28px }
  .hero-btns { flex-direction: column; gap: 12px }
  .hero-btns .btn { width: 100%; min-height: 56px; border-radius: 16px }
  .hero-ba-panel img { height: 155px !important }
  /* Quick quote hidden on tablet — desktop card shows at ≥1025px */
  /* (mobile ≤768px shows it via separate rule) */
}

/* ── 4. Tablet nav (769–1024px) ─────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  nav ul, .nav-cta { display: none }
  header .hamburger { display: flex }
  .mob-nav {
    display: none; position: fixed;
    top: 68px; right: 0; left: auto;
    max-width: 320px; z-index: 99999;
    background: #fff; border-radius: 0 0 0 16px;
    box-shadow: -4px 4px 24px rgba(0,0,0,.18);
    padding: 20px;
  }
  .mob-nav.open { display: flex; flex-direction: column; gap: 0 }
  .mob-nav a { display: block; padding: 13px 0; border-bottom: 1px solid #f5f0f7; font-size: .95rem; font-weight: 700; color: #1a1a1a; text-decoration: none }
  .mob-nav a:last-child { border-bottom: none }
  .mob-nav-cta { display: flex; flex-direction: column; gap: 10px; border-top: 2px solid #f5e8f0 }
  .mob-nav-cta .btn { display: flex; width: 100%; justify-content: center; min-height: 48px; border-radius: 12px }
}

/* ── 5. Trust blocks ────────────────────────────────────────── */
/* Trust blocks — desktop shows desktop, mobile shows mobile */
.mob-trust-block { display: none }
.trust-desktop-block { display: block }
@media (max-width: 1024px) {
  .mob-trust-block { display: block }
  .trust-desktop-block { display: none }
}

/* ── 6. Desktop (≥1025px) ───────────────────────────────────── */
@media (min-width: 1025px) {
  .hero-layout { display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: start }
  .hero-quote-card { display: block }
  /* Mobile-only elements hidden on desktop */
  .mob-quick-quote { display: none }
  .mob-bar { display: none }
  header .hamburger { display: none }
  .mob-nav { display: none !important }
  /* Trust blocks — force correct versions on desktop */
  .mob-trust-block { display: none !important }
  .trust-desktop-block { display: block !important }
}