/* ============================================================
   MuurX — RESPONSIVE OVERRIDES
   The site uses inline React styles (desktop-first). This sheet
   adapts every page for tablet & mobile via !important overrides
   on class hooks set in site-core.jsx / site-pages.jsx.
   ============================================================ */

/* overflow-x: clip (not hidden) — clips horizontal overflow WITHOUT turning
   the element into a scroll container, so in-page #anchor scrolling keeps working. */
html, body { overflow-x: clip; }
img, svg, video { max-width: 100%; }

/* Anchored homepage sections should clear the sticky header when jumped to */
section[id], footer[id] { scroll-margin-top: 78px; }

/* Mobile-only helpers (hidden on desktop by default) */
.mx-show-mobile { display: none; }
.mx-hero-bg-mobile { display: none; }

/* Mobile nav elements — hidden on desktop */
.mx-burger { display: none; background: none; border: 1px solid var(--hairline); border-radius: var(--radius-sm); width: 42px; height: 42px; place-items: center; cursor: pointer; flex: none; }
.mx-mobile-menu { display: none !important; }

/* ---------------- Navigation (≤ 900px) ---------------- */
@media (max-width: 900px) {
  .mx-nav-desktop { display: none !important; }
  .mx-login-top { display: none !important; }
  .mx-burger { display: grid !important; }
  .mx-mobile-menu { display: flex !important; }
  .mx-header { padding: 12px 18px !important; }
}

/* ---------------- Layout (≤ 820px) ---------------- */
@media (max-width: 820px) {
  h1 { font-size: clamp(30px, 8.6vw, 42px) !important; line-height: 1.12 !important; overflow-wrap: break-word; }
  h2 { font-size: clamp(23px, 6.6vw, 29px) !important; line-height: 1.2 !important; }

  /* mobile-only helper toggles */
  .mx-show-mobile { display: block !important; }
  .mx-hide-mobile { display: none !important; }

  /* horizontal breathing room: sections carry their own inline 40px padding */
  section, footer { padding-left: 20px !important; padding-right: 20px !important; }
  .mx-pad-x { padding-left: 20px !important; padding-right: 20px !important; }

  /* stack every multi-column grid */
  .mx-hero-grid,
  .mx-2col,
  .mx-contact-grid,
  .mx-svc-grid,
  .mx-footer-grid,
  .mx-cards-3,
  .mx-pkg-grid,
  .mx-hero-trust,
  .mx-form-row { grid-template-columns: 1fr !important; }

  /* ---- Hero (mobile) ---- */
  .mx-hero-bg { display: none !important; }            /* hide desktop bg photo + overlay */
  .mx-hero-bg-mobile { display: block !important; }    /* van photo as hero background */
  .mx-hero-form { display: none !important; }          /* remove offerteformulier */
  .mx-hero-grid { padding: 56px 20px 60px !important; gap: 28px !important; }
  .mx-hero-btns { flex-direction: column !important; align-items: stretch !important; }
  .mx-hero-btn { width: 100% !important; }
  .mx-hero-btn > * { width: 100% !important; justify-content: center !important; }

  .mx-svc-grid > * { grid-column: auto !important; grid-row: auto !important; }
  .mx-footer-grid { gap: 36px !important; }

  /* trustbar / benefits: 4 across, compact */
  .mx-trustbar { grid-template-columns: repeat(4, 1fr) !important; }
  .mx-trust-item { padding: 16px 5px !important; border-left: 1px solid var(--border-subtle) !important; }
  .mx-trust-item:first-child { border-left: none !important; }
  .mx-trust-val { height: 26px !important; font-size: 19px !important; }
  .mx-trust-val svg { width: 22px !important; height: 22px !important; }
  .mx-trust-label { font-size: 9px !important; letter-spacing: 0 !important; line-height: 1.25 !important; margin-top: 5px !important; }

  /* ---- Reviews (mobile) ---- */
  .mx-reviews { padding-left: 0 !important; padding-right: 0 !important; }
  .mx-reviews-head { flex-direction: column !important; align-items: center !important; text-align: center; gap: 26px !important; padding: 0 20px !important; }
  .mx-reviews-title { text-align: center; }
  .mx-trustoo-link { flex-direction: column-reverse !important; align-items: center !important; gap: 10px !important; }
  .mx-trustoo-rating { text-align: center !important; }
  .mx-trustoo-score { justify-content: center !important; }
  .mx-trustoo-badge { height: 80px !important; }
  .mx-marquee-fade { width: 40px !important; }
  .muurx-marquee-track { padding-left: 20px !important; padding-right: 20px !important; }
  .mx-review-card { width: min(320px, 84vw) !important; }

  /* package carousel: swipe instead of arrows */
  .mx-carousel-arrow { display: none !important; }
  .mx-pkg-card { width: min(300px, 84vw) !important; }
  .mx-pkg-grid .mx-pkg-card { width: 100% !important; }

  /* werkgebied: NL-kaart als vervaagd watermerk achter de tekst */
  .mx-locatie-bg { display: flex !important; }
  .mx-locatie-map { display: none !important; }

  /* contact page: portrait no longer sticky */
  .mx-sticky-side { position: static !important; }

  /* decorative sketches interfere with text on small screens */
  .mx-decor { display: none !important; }

  /* boekingskalender: slots onder de kalender in 2 kolommen */
  .mx-cal-wrap { flex-direction: column !important; }
  .mx-slot-col { width: 100% !important; border-left: none !important; border-top: 1px solid var(--border-subtle); }
  .mx-slot-scroll { grid-template-columns: 1fr 1fr !important; max-height: 190px !important; }

  /* dashboard + admin */
  .mx-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .mx-table-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .mx-table-inner { min-width: 620px; }
  .mx-table-inner-wide { min-width: 780px; }
  .mx-admin-ref-form { grid-template-columns: 1fr !important; }
  .mx-dash-header { padding: 12px 18px !important; }
  .mx-dash-wrap { padding: 32px 20px 64px !important; }
  .mx-ref-link { min-width: 0 !important; width: 100%; }
}

/* ---------------- Projecten (50/50-grid, 1 kolom op mobiel) ---------------- */
@media (max-width: 700px) {
  .mx-proj-grid { grid-template-columns: 1fr !important; }
}

/* ---------------- Small phones (≤ 480px) ---------------- */
@media (max-width: 480px) {
  .mx-stats-grid { grid-template-columns: 1fr !important; }
  .mx-hero-grid { padding: 48px 16px 52px !important; }
  section, footer { padding-left: 16px !important; padding-right: 16px !important; }
  .mx-pad-x { padding-left: 16px !important; padding-right: 16px !important; }
  .mx-reviews { padding-left: 0 !important; padding-right: 0 !important; }
  .mx-reviews-head { padding: 0 16px !important; }

  /* trustbar labels a touch smaller so 4 columns stay tidy */
  .mx-trust-item { padding: 14px 3px !important; }
  .mx-trust-val { font-size: 17px !important; }
  .mx-trust-val svg { width: 20px !important; height: 20px !important; }
  .mx-trust-label { font-size: 8px !important; }
}