/* ================================================================
   RESPONSIVE.CSS — Full breakpoint coverage
   Covers: phones, tablets, iPads, Windows tablets, laptops, iMacs
   Loads after styles_u1.css — overrides where needed
   ================================================================ */

/* ── Base: ensure proper box model everywhere ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── iMac / Large desktop (1440px+) ── */
@media (min-width: 1440px) {
  .container { max-width: 1280px; padding: 0 48px; }
  .hero-grid { gap: 60px; }
  .hero-content h1 { font-size: clamp(2.2rem, 3vw, 3rem); }
  .services-grid { grid-template-columns: repeat(4, 1fr); }
  .stats-grid { gap: 0; }
}

/* ── Standard laptop (1281–1439px) ── */
@media (min-width: 1281px) and (max-width: 1439px) {
  .container { max-width: 1200px; padding: 0 40px; }
}

/* ── Medium: 13" laptops, iPad Pro landscape, 1025–1280px ── */
@media (min-width: 1025px) and (max-width: 1280px) {
  .container { max-width: 1000px; padding: 0 32px; }
  .hero-grid { grid-template-columns: 1fr 360px; gap: 32px; }
  .hero-content h1 { font-size: clamp(1.8rem, 2.5vw, 2.4rem); }
  .hero-form-card { display: flex !important; }
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .why-features { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { gap: 0; }
  .ba-grid { grid-template-columns: repeat(3, 1fr); }
  nav ul { gap: 16px; }
  nav ul li a { font-size: 0.82rem; }
  .nav-cta .btn { padding: 8px 14px; font-size: 0.82rem; }
  .process-grid { grid-template-columns: repeat(4, 1fr); }
  .faq-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  #info-cards-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Tablet / iPad landscape / Windows tablet: 769–1024px ── */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Container */
  .container { max-width: 100%; padding: 0 24px; }

  /* Topbar */
  .topbar .tb-right a[href^="mailto"] { display: none; }

  /* Nav — collapse hamburger at this size */
  nav { display: none; }
  .hamburger { display: flex !important; }
  .nav-cta { display: flex; gap: 8px; }
  .nav-cta .btn { padding: 8px 14px; font-size: 0.82rem; }

  /* Hero — single column, centred */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
    text-align: center;
  }
  .hero-content { max-width: 640px; margin: 0 auto; }
  .hero-content h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); text-align: center; }
  .hero-sub { text-align: center; margin: 0 auto 20px; }
  .hero-btns { justify-content: center; flex-wrap: wrap; }
  .hero-form-card { display: none !important; } /* too cramped at this size */
  #hero-avail-slots { justify-content: center; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .stat-num { font-size: 1.6rem; }

  /* Services — 2 column grid */
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .service-card { flex-direction: column; }

  /* Why us features — 2 cols */
  .why-features { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* Process — 2x2 */
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* Before/After */
  .ba-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }

  /* Areas */
  .areas-grid { grid-template-columns: repeat(2, 1fr); }

  /* Reviews */
  .reviews-section .container { overflow: visible; }

  /* FAQ */
  .faq-grid { grid-template-columns: 1fr; gap: 24px; }
  .faq-list { width: 100%; }

  /* CTA band */
  .cta-inner { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
  .cta-btns { justify-content: center; flex-wrap: wrap; }

  /* Info cards */
  #info-cards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }

  /* Services + Areas grid */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:24px"] { grid-template-columns: 1fr !important; }

  /* Blog */
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }

  /* Mini quote strip */
  .mqs-fields { flex-direction: column; }
  .mqs-select, .mqs-input { width: 100%; }

  /* Area page specific */
  .area-intro-grid { grid-template-columns: 1fr; }
  .area-content-grid { grid-template-columns: 1fr; }
  .area-quote-sidebar { position: static; }
  .area-services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Section padding tighter */
  section, .services-section, .why-section, .reviews-section { padding: 48px 0; }

  /* Trust strip — scrollable on tablet if needed */
  [style*="justify-content:center"][style*="gap:32px"] { gap: 16px !important; flex-wrap: wrap !important; }
}

/* ── Small tablet / large phone: 481–768px ── */
@media (min-width: 481px) and (max-width: 768px) {
  /* Services 2-col instead of single */
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Blog 2-col */
  .blog-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Areas 2-col */
  .areas-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Why features 2-col */
  .why-features { grid-template-columns: repeat(2, 1fr) !important; }

  /* Process 2x2 */
  .process-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── iPad (force mobile layout regardless of viewport) ── */
/* iPads report 768px even in landscape — treat 768px as mobile */
@media (max-width: 768px) {
  /* Existing mobile CSS handles this via mobile-v2.css */
}

/* ── Windows tablet detection via pointer ── */
/* Fine pointer = mouse/trackpad (laptop/desktop) */
/* Coarse pointer = touch (tablet/phone) */
@media (min-width: 769px) and (max-width: 1200px) and (pointer: coarse) {
  /* Touch device with "desktop" viewport — likely Windows tablet or iPad */
  nav { display: none !important; }
  .hamburger { display: flex !important; }
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-form-card { display: none !important; }
  .hero-content { text-align: center !important; margin: 0 auto !important; }
  .hero-btns { justify-content: center !important; }
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .why-features { grid-template-columns: repeat(2, 1fr) !important; }
  .process-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* Increase tap targets */
  .wq-chip, .mob-bar-wa, button, .btn, a.btn { min-height: 48px !important; }
}

/* ── Print / accessibility ── */
@media print {
  .mob-bar, .topbar, header, .quote-widget, #moc-wq2, .cta-band { display: none !important; }
  body { font-size: 12pt; color: #000; }
}

/* ── 15" laptop / medium desktop: 1025–1366px ── */
@media (min-width: 1025px) and (max-width: 1366px) {
  /* Nav: tighter gaps to prevent overflow */
  nav ul { gap: 0; }
  nav ul li a { padding: 7px 9px; font-size: 0.82rem; }
  .nav-cta { gap: 6px; }
  .nav-cta .btn { padding: 7px 12px; font-size: 0.82rem; }
  .nav-wrap { gap: 16px; }

  /* Hero: show form card, tighter layout */
  .hero-form-card { display: flex !important; }
  .hero-grid { grid-template-columns: 1fr 360px !important; gap: 24px !important; }
  .hero-content h1 { font-size: clamp(1.6rem, 2.2vw, 2.2rem); }
  .hero-sub { font-size: 0.9rem; }

  /* Container */
  .container { padding: 0 28px; }

  /* Services: 3 cols */
  .services-grid { grid-template-columns: repeat(3, 1fr); }

  /* Stats: 4 cols tight */
  .stats-grid { gap: 0; }
  .stat-num { font-size: 1.8rem; }
  .stat-label { font-size: 0.72rem; }

  /* Trust strip: wrap if needed */
  [style*="gap:32px"][style*="justify-content:center"] { gap: 20px !important; }
}

/* ── Large laptop / external monitor: 1440px–1920px ── */
@media (min-width: 1440px) and (max-width: 1920px) {
  .container { max-width: 1320px; }
  .hero-grid { grid-template-columns: 1fr 420px; gap: 60px; }
  .hero-content h1 { font-size: clamp(2.4rem, 2.8vw, 3.2rem); }
  .services-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Ultra-wide / 4K / iMac 27": 1920px+ ── */
@media (min-width: 1920px) {
  .container { max-width: 1600px; }
  .hero-grid { grid-template-columns: 1fr 480px; gap: 80px; }
  .services-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .why-features { grid-template-columns: repeat(3, 1fr); }
  .stats-grid .stat-num { font-size: 2.8rem; }
}