/* ══════════════════════════════════════════════
   CACTUS AUTO SPA — SHARED MOBILE RESPONSIVE
   Linked from all pages. Overrides inline styles
   via !important where needed.
══════════════════════════════════════════════ */

/* Prevent horizontal scroll on every page */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

* { box-sizing: border-box; }

img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ── Eyebrow pills — mobile centering ───────
   inline-flex pills wider than the viewport
   can't be centered by text-align alone; they
   clip to the left edge and overflow right.
   Switch to flex + margin:auto so they always
   center within the screen without overflowing.
──────────────────────────────────────────── */
@media (max-width: 600px) {
  .eyebrow, .sec-eyebrow, .hero-eyebrow, .eyebrow-pill, .mem-eyebrow {
    display: flex !important;
    width: fit-content !important;
    max-width: calc(100vw - 60px) !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── Hero padding ────────────────────────────
   Several pages set 6rem or 80px top padding on
   .hero, creating a large gap under the nav on
   mobile. Reduce to match ceramic coating spacing.
──────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero {
    padding-top: 3rem !important;
  }
}

/* ── Footer ──────────────────────────────────
   Collapse 4-column grid to single column.
   Works even with inline grid styles because
   !important beats inline specificity.
──────────────────────────────────────────── */
@media (max-width: 768px) {
  footer > div:first-child {
    grid-template-columns: 1fr !important;
    padding: 40px 20px !important;
    gap: 32px !important;
  }
  /* Bottom bar — reduce side padding */
  footer > div:last-child {
    padding: 16px 20px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ── Section / general padding ───────────────
   Prevent over-padded sections on small screens
──────────────────────────────────────────── */
@media (max-width: 480px) {
  section {
    overflow-x: hidden;
  }
  /* Reduce large horizontal padding on wrapper divs */
  [style*="padding:56px 52px"],
  [style*="padding: 56px 52px"] {
    padding: 36px 20px !important;
  }
  [style*="padding:48px 52px"],
  [style*="padding: 48px 52px"] {
    padding: 32px 20px !important;
  }
}

/* ── Contact page title ──────────────────────
   Fixed 40px → responsive clamp
──────────────────────────────────────────── */
.page-title {
  font-size: clamp(26px, 5vw, 40px) !important;
}

/* ── Services page — card grid ───────────────
   At 768px collapse from 4→2 cols
──────────────────────────────────────────── */
@media (max-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .cards {
    grid-template-columns: 1fr !important;
  }
}

/* ── Membership page — pricing cols ─────────
──────────────────────────────────────────── */
@media (max-width: 768px) {
  .pcols {
    grid-template-columns: 1fr 1fr !important;
    overflow-x: auto !important;
  }
}
@media (max-width: 560px) {
  .pcols {
    grid-template-columns: 1fr !important;
  }
}

/* ── CTA band — reduce padding on mobile ────
──────────────────────────────────────────── */
@media (max-width: 600px) {
  .cta-band, .section-cta {
    flex-direction: column !important;
    text-align: center !important;
    padding: 36px 20px !important;
    align-items: center !important;
  }
}

/* ── Before/After grid (portfolio) ──────────
──────────────────────────────────────────── */
@media (max-width: 600px) {
  .ba-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
}

/* ── Hood / neighborhood grid ───────────────
──────────────────────────────────────────── */
@media (max-width: 600px) {
  .hood-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Stat grid ───────────────────────────── */
@media (max-width: 480px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Privacy / Terms content padding ────────
──────────────────────────────────────────── */
@media (max-width: 480px) {
  .content-wrap {
    padding: 2rem 1rem 4rem !important;
  }
}