/* =============================================================
   MOBILE-FIX.CSS v2 — Comprehensive mobile overrides
   DESKTOP IS COMPLETELY UNTOUCHED (all rules inside @media)
   ============================================================= */

/* ── 768px and below ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* === GLOBAL SAFETY ======================================= */
  *, *::before, *::after { box-sizing: border-box !important; }
  html, body               { overflow-x: hidden !important; max-width: 100vw !important; }
  img, video, iframe       { max-width: 100% !important; }
  body                     { padding-bottom: 80px !important; }

  /* === CONTAINERS ========================================== */
  .container, .w,
  [style*="max-width:1100px"],
  [style*="max-width:1000px"],
  [style*="max-width:900px"],
  [style*="max-width:860px"],
  [style*="max-width:780px"],
  [style*="max-width:700px"],
  [style*="max-width:640px"],
  [style*="max-width: 1100px"],
  [style*="max-width: 1000px"],
  [style*="max-width: 900px"]  {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* === SECTION PADDING — reduce aggressively =============== */
  [style*="padding:72px 0"],
  [style*="padding:64px 0"],
  [style*="padding:60px 0"],
  [style*="padding:56px 0"],
  [style*="padding:52px 0"] {
    padding-top:    32px !important;
    padding-bottom: 28px !important;
  }
  [style*="padding:48px 0"] {
    padding-top:    24px !important;
    padding-bottom: 20px !important;
  }

  /* === COLLAPSE INLINE 2-COL GRIDS ======================== */
  /* Note: ordered so that specific overrides below WIN */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns:1fr 360px"],
  [style*="grid-template-columns:1fr 400px"],
  [style*="grid-template-columns:1fr 440px"],
  [style*="grid-template-columns: 1fr 380px"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns: 1fr 440px"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── CRITICAL: Restore mobile action bars to 3-col ────── */
  /* Must come AFTER the general 2-col rule to override it   */
  #mobBar,
  #mobBar[style]           { grid-template-columns: 1fr 1fr 1.7fr !important; display: grid !important; }
  div.mob-bar,
  .mob-bar                 { grid-template-columns: 1fr 1fr 1.7fr !important; }

  /* === COLLAPSE INLINE 3-COL GRIDS ======================== */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* === COLLAPSE INLINE 4-COL GRIDS → 2×2 ================= */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* === STATS SECTION AFTER BEFORE/AFTER → 2×2 ============ */
  #stats-after-ba > .container > div {
    grid-template-columns: 1fr 1fr !important;
  }
  #stats-after-ba > .container > div > div {
    border-right: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 14px 8px !important;
    font-size: 1.6rem !important;
  }
  /* Remove border on last row items */
  #stats-after-ba > .container > div > div:nth-child(3),
  #stats-after-ba > .container > div > div:nth-child(4) {
    border-bottom: none !important;
  }

  /* === 5+ COL GRIDS → 2-col ================================ */
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"],
  [style*="grid-template-columns:repeat(5, 1fr)"],
  [style*="grid-template-columns:repeat(6, 1fr)"] {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
  }

  /* === FLEX ROWS — WRAP ==================================== */
  [style*="display:flex"][style*="gap:28px"],
  [style*="display:flex"][style*="gap:24px"],
  [style*="display:flex"][style*="gap:20px"],
  [style*="display: flex"][style*="gap: 28px"] {
    flex-wrap: wrap !important;
  }

  /* === BEFORE/AFTER SECTION ================================ */
  /* ── Before/after: side-by-side compact ── */
  #before-after [style*="grid-template-columns:1fr 1fr"],
  #before-after [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #before-after img {
    height: 150px !important;
    object-fit: cover !important;
    object-position: center 15% !important;
  }
  #before-after [style*="gap:28px"] {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  #before-after [style*="width:1px"] {
    display: none !important;
  }
  /* Trust pills 2×2 on mobile */
  #before-after > div > div:has([style*="⏱"]),
  #before-after .container > div[style*="justify-content:center"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* === TRUST STRIP (after before/after) — tighter ========= */
  #trust-strip-after-ba,
  div[style*="background:#1a1a1a"][style*="padding:14px 0"] {
    padding: 6px 0 !important;
  }
  div[style*="background:#1a1a1a"] > div > div[style*="border-right:1px solid rgba"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 8px 16px !important;
  }
  div[style*="background:#1a1a1a"] > div > div:last-child {
    border-bottom: none !important;
  }

  /* === IMAGE HEIGHTS ======================================= */
  [style*="height:340px"],
  [style*="height: 340px"],
  [style*="height:300px"],
  [style*="height:280px"],
  [style*="height:260px"] {
    height: 220px !important;
  }

  /* === STICKY → STATIC (sidebars, form cards) ============= */
  [style*="position:sticky"],
  [style*="position: sticky"] {
    position: static !important;
  }

  /* === HUB PAGE CONTENT SECTIONS ========================== */
  #hub-final-content [style*="grid-template-columns"],
  #hub-spec-content  [style*="grid-template-columns"],
  #hub-seo-intro     [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Service card grid in hub — keep 2-col on mobile */
  #hub-final-content [style*="minmax(175px"],
  #hub-spec-content  [style*="minmax(175px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* Hub sections — tighter padding */
  #hub-final-content[style*="padding:64px 0"],
  #hub-spec-content[style*="padding:64px 0"],
  #hub-seo-intro[style*="padding:64px 0"] {
    padding-top: 28px !important;
    padding-bottom: 24px !important;
  }

  /* === SEO CONTENT SECTIONS (service+location pages) ====== */
  #seo-intro [style*="grid-template-columns"],
  #seo-inclusions [style*="grid-template-columns"],
  #seo-why-choose [style*="grid-template-columns"],
  #seo-areas [style*="grid-template-columns"],
  #seo-close [style*="grid-template-columns"],
  #kitchen-extractor-fan-cleaning [style*="grid-template-columns"],
  #cooker-hood-filter-cleaning [style*="grid-template-columns"],
  #extractor-fan-filter-degreasing [style*="grid-template-columns"],
  #catering-extractor-fan-cleaning [style*="grid-template-columns"],
  #kitchen-exhaust-fan-cleaning [style*="grid-template-columns"],
  #our-strengths [style*="grid-template-columns"],
  #areas-we-cover [style*="grid-template-columns"],
  #deep-cleaning-domestic-single-ovens [style*="grid-template-columns"],
  #why-choose-single-oven-cleaning [style*="grid-template-columns"],
  #single-oven-strengths [style*="grid-template-columns"],
  #professional-gas-electric-hob-cleaning [style*="grid-template-columns"],
  #ceramic-glass-hob-cleaning-specialists [style*="grid-template-columns"],
  #hob-cleaning-strengths-areas [style*="grid-template-columns"],
  #double-oven-cleaning-service [style*="grid-template-columns"],
  #double-oven-cleaning-cost [style*="grid-template-columns"],
  #professional-vs-self-cleaning [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Keep why-choose 2×2 */
  #seo-why-choose > .container > div > div,
  #why-choose-single-oven-cleaning > .container > div {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Strengths 3-col → 2-col */
  #our-strengths > .container > div[style*="repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* === INTERNAL LINKS BLOCK ================================ */
  .seo-internal-links ul,
  #seo-internal-links ul {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .seo-internal-links li a,
  #seo-internal-links li a {
    font-size: 0.78rem !important;
    padding: 6px 12px !important;
  }

  /* === AREA CHIPS / LOCATION PILLS ======================== */
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(5, 1fr)"] {
    grid-template-columns: repeat(3,1fr) !important;
    gap: 8px !important;
  }

  /* === TEXT SIZE ADJUSTMENTS ============================== */
  [style*="font-size:clamp(1.4rem,2.5vw,1.9rem)"],
  [style*="font-size:clamp(1.5rem,3vw,2rem)"],
  [style*="font-size:clamp(1.3rem,2.2vw,1.7rem)"],
  [style*="font-size: clamp(1.4rem,2.5vw,1.9rem)"] {
    font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
  }

  /* === DETAILS/SUMMARY (FAQ accordions) =================== */
  details { width: 100% !important; }

  /* === COMPARISON TABLES ================================== */
  .compare-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  /* === AREA PAGES (area-styles.css pages) ================= */
  /* Hub content in area pages */
  [id^="hub-"] .container { padding-left: 16px !important; padding-right: 16px !important; }

}

/* ── 480px and below ─────────────────────────────────────── */
@media (max-width: 480px) {

  .container, .w {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* All 2-col inline grids → 1-col at 480 */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* KEEP mob-bar as 3-col even at 480 */
  #mobBar,
  #mobBar[style],
  div.mob-bar { grid-template-columns: 1fr 1fr 1.7fr !important; }

  /* Stats 2×2 stays at 480 */
  #stats-after-ba > .container > div {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Service/appliance grids → 2-col */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Before/after image height at 480 — keep compact */
  #before-after img {
    height: 140px !important;
  }

  /* Hub service cards — 2-col at 480 */
  #hub-final-content [style*="minmax(175px"],
  #hub-spec-content  [style*="minmax(175px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  /* Reduce large font sizes on very small screens */
  [style*="font-size:2rem"] { font-size: 1.6rem !important; }
  [style*="font-size:2.5rem"] { font-size: 1.9rem !important; }

  /* Area chips — 2-col at 480 */
  [style*="repeat(3,1fr)"] { grid-template-columns: 1fr 1fr !important; }

}

/* ── 360px and below ─────────────────────────────────────── */
@media (max-width: 360px) {
  .container, .w { padding-left: 10px !important; padding-right: 10px !important; }
  [style*="font-size:2rem"] { font-size: 1.4rem !important; }
}