/* ═══════════════════════════════════════════════════════════
   Puget Sound Moving — responsive.css
   Loaded last on every page. Fixes inline-style overrides
   and fills gaps across all templates.
   Breakpoints: 1200 tablet-wide / 900 tablet / 640 mobile / 420 xs
═══════════════════════════════════════════════════════════ */

/* ── GLOBAL SECTION PADDING ────────────────────────────────── */
@media (max-width: 900px) {
  .section-wrap { padding-left: 5%; padding-right: 5%; }
}

/* ── HEADER / NAV ───────────────────────────────────────────── */
/* Mobile overrides are in mobile.css */

/* ── HERO BUTTONS (all templates) ──────────────────────────── */
@media (max-width: 640px) {
  .hero-buttons,
  .home-hero-buttons,
  .cta-buttons { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .hero-buttons a,
  .home-hero-buttons a,
  .cta-buttons a { clip-path: none !important; text-align: center !important; justify-content: center !important; }
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — front-page.php
═══════════════════════════════════════════════════════════ */

/* Hero: single column on tablet */
@media (max-width: 1100px) {
  .home-hero-inner { grid-template-columns: 1fr !important; }
  /* hero quote form hidden on tablet — bottom form used instead */
}

/* Services — override inline !important */
@media (max-width: 900px) {
  .home-services-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 540px) {
  .home-services-grid { grid-template-columns: 1fr !important; }
}

/* Process steps — override inline style */
@media (max-width: 900px) {
  .home-process-steps { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 540px) {
  .home-process-steps { grid-template-columns: 1fr !important; max-width: 300px; margin-left: auto; margin-right: auto; }
}

/* Reviews */
@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: 1fr 1fr !important; }
  .home-reviews-header { flex-direction: column; gap: 16px; }
}
@media (max-width: 560px) {
  .reviews-grid { grid-template-columns: 1fr !important; }
}

/* Areas / city chips */
@media (max-width: 900px) {
  .home-areas-layout { grid-template-columns: 1fr !important; }
  .areas-map { height: 280px !important; min-height: 0; }
}

/* Why us */
@media (max-width: 900px) {
  .home-why-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 540px) {
  .home-why-grid { grid-template-columns: 1fr !important; }
}

/* FAQ */
@media (max-width: 900px) {
  .home-faq-layout { grid-template-columns: 1fr !important; }
  .home-faq-sticky { position: static !important; }
}

/* Pricing cards */
@media (max-width: 900px) {
  .home-pricing-grid { grid-template-columns: 1fr !important; max-width: 400px; margin: 0 auto; }
}

/* Trust strip */
@media (max-width: 640px) {
  .home-hero-trust { flex-wrap: wrap; gap: 16px !important; }
  .hero-trust-item { flex: 1 1 calc(50% - 8px); border: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   CITY PAGES — template-city.php
═══════════════════════════════════════════════════════════ */

/* Hero */
@media (max-width: 1100px) {
  .city-hero-inner { grid-template-columns: 1fr !important; }
  .city-hero-inner > div[id="quote"] { display: none; }
  .city-hero-inner > div:last-child { display: none; }
}

/* Intro section */
@media (max-width: 900px) {
  .local-intro-grid { grid-template-columns: 1fr !important; }
}

/* Services grid — override inline style */
@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 540px) {
  .services-grid { grid-template-columns: 1fr !important; }
}

/* Neighborhoods */
@media (max-width: 900px) {
  .neighborhoods-grid { grid-template-columns: 1fr !important; }
  .neighborhoods-map-panel { height: 300px !important; }
}

/* Testimonials */
@media (max-width: 900px) {
  .testimonials-grid  { grid-template-columns: 1fr 1fr !important; }
  .testimonials-header { flex-direction: column; gap: 16px; }
}
@media (max-width: 560px) {
  .testimonials-grid  { grid-template-columns: 1fr !important; }
}

/* Why local */
@media (max-width: 900px) {
  .why-local-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 540px) {
  .why-local-grid { grid-template-columns: 1fr !important; }
}

/* Photos */
@media (max-width: 900px) {
  .photos-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 200px 200px 200px !important;
  }
  .photos-grid .photo-slot:first-child { grid-column: auto !important; grid-row: auto !important; }
}
@media (max-width: 540px) {
  .photos-grid { grid-template-columns: 1fr !important; }
}

/* Reviews repeater */
@media (max-width: 900px) {
  .city-reviews-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .city-reviews-grid { grid-template-columns: 1fr !important; }
}

/* SEO / FAQ / Business card */
@media (max-width: 900px) {
  .seo-grid           { grid-template-columns: 1fr !important; }
  .city-faq-inner     { grid-template-columns: 1fr !important; }
  .faq-sticky         { position: static !important; }
}

/* Trusted logos */
@media (max-width: 640px) {
  .psm-trusted-logos  { flex-wrap: wrap; gap: 16px; }
  .psm-trusted-logo   { flex: 1 1 calc(50% - 8px); }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE — template-contact.php
═══════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  /* 5 office cards: 3 → 2 columns */
  .contact-offices-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 640px) {
  /* Contact offices: 2 → 1 */
  .contact-offices-grid,
  [style*="grid-template-columns:repeat(3,1fr)"][style*="D8D5CC"] {
    grid-template-columns: 1fr !important;
  }
  /* Form + FAQ two-col */
  .contact-bottom-grid,
  [style*="grid-template-columns:1.1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   LOCATIONS PAGE — template-locations.php
═══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* Office map+info blocks: side by side → stacked */
  .loc-office-block { grid-template-columns: 1fr !important; }
  .loc-office-map   { height: 280px !important; position: relative !important; }
  .loc-map-frame    { position: absolute !important; inset: 0 !important; }
  .loc-office-map--right { order: 0 !important; }
  .loc-office-map--right + .loc-office-info { order: 0 !important; }
  .loc-office-info  { padding: 32px 24px !important; }
  /* City cards: 4 → 2 */
  .loc-city-grid    { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 540px) {
  .loc-city-grid    { grid-template-columns: 1fr !important; }
  .loc-office-actions { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════
   QUOTE PAGE — template-quote.php
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Hero: quote card + phone side by side → stack */
  [style*="display:flex"][style*="justify-content:space-between"] {
    flex-direction: column !important;
    gap: 28px !important;
  }
  /* Why us: 4 → 2 cols */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
}
@media (max-width: 540px) {
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   REVIEWS PAGE — template-reviews.php
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .reviews-video-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 540px) {
  .reviews-video-grid { grid-template-columns: 1fr !important; }
  /* Rating summary: flex row → column */
  [style*="display:flex"][style*="47.2529"] { flex-direction: column !important; }
}

/* ═══════════════════════════════════════════════════════════
   404 PAGE
═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(3,1fr)"][style*="860px"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
}
@media (max-width: 420px) {
  [style*="grid-template-columns:repeat(3,1fr)"][style*="860px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .footer-locations-grid { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 760px) {
  .footer-locations-grid { grid-template-columns: repeat(2,1fr) !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px; }
}
@media (max-width: 480px) {
  .footer-locations-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-bottom { flex-direction: column !important; text-align: center; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   SMART FORM PLUGIN
═══════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
  .psm-sf-row { grid-template-columns: 1fr !important; }
  .psm-sf-form { padding: 18px 18px 16px !important; }
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL UTILITY RESETS FOR MOBILE
═══════════════════════════════════════════════════════════ */

/* Remove clip-path on mobile — it clips buttons weirdly */
@media (max-width: 640px) {
  .btn-primary, .btn-secondary, .btn-dark, .btn-outline-dark,
  .n-chip, .city-tag, .loc-chip { clip-path: none !important; }
}

/* iOS: prevent zoom on input focus */
@media (max-width: 768px) {
  input, select, textarea { font-size: max(16px, 1em) !important; }
}

/* Horizontal scroll prevention */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Images never overflow */
img, iframe, video, svg { max-width: 100%; height: auto; }
iframe { border: 0; }

/* Banner marquee — reduce speed and font size on mobile */
@media (max-width: 640px) {
  .banner-track { animation-duration: 18s !important; }
  .banner-item  { font-size: 13px !important; padding: 0 24px !important; }
}

/* Stats strip: 4 → 2 cols on mobile */
@media (max-width: 640px) {
  .stats-strip-inner { grid-template-columns: 1fr 1fr !important; }
  .stat-block { border-left: none; border-bottom: 1px solid rgba(255,255,255,.08); }
}

/* Safe area insets for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer .footer-bottom { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .site-header .nav-inner     { padding-top:    env(safe-area-inset-top); }
  .mobile-drawer-inner         { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Touch: kill hover transforms that feel laggy */
@media (hover: none) and (pointer: coarse) {
  [class*="card"]:hover,
  [class*="chip"]:hover,
  [class*="btn"]:hover { transform: none !important; box-shadow: inherit; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE STICKY BOTTOM CTA BAR
   Shown on mobile only — sticks to bottom of viewport.
   Contains "Get Free Quote" button + phone tap link.
═══════════════════════════════════════════════════════════ */
.mobile-quote-cta {
  display: none; /* hidden by default — shown below 900px */
}
@media (max-width: 900px) {
  .mobile-quote-cta {
    display: flex;
    align-items: center;
    gap: 0;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 990;
    box-shadow: 0 -4px 24px rgba(13,31,74,.18);
  }
  /* Supports iPhone home indicator */
  @supports (padding: env(safe-area-inset-bottom)) {
    .mobile-quote-cta { padding-bottom: env(safe-area-inset-bottom); }
  }
  .mobile-quote-cta a:first-child {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--gold);
    color: var(--navy);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 17px; letter-spacing: 2px;
    padding: 16px 20px;
    text-decoration: none;
    white-space: nowrap;
  }
  .mobile-quote-cta .mq-phone {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--navy);
    padding: 16px 20px;
    white-space: nowrap;
  }
  .mobile-quote-cta .mq-phone a {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 17px; letter-spacing: 1px;
    color: rgba(255,255,255,.85);
    text-decoration: none;
  }
  /* Push page content up so footer isn't hidden behind bar */
  body { padding-bottom: 60px; }
}
@media (max-width: 380px) {
  .mobile-quote-cta a:first-child { font-size: 14px; padding: 15px 14px; }
  .mobile-quote-cta .mq-phone     { padding: 15px 14px; }
  .mobile-quote-cta .mq-phone a   { font-size: 14px; }
}