/* ──────────────────────────────────────────────────────────────
   Mobile compatibility overrides — applies below 900px.
   Targets inline styles via !important. Touch-first.
   ────────────────────────────────────────────────────────────── */

/* Scroll-lock while the fullscreen nav overlay is open. NavProvider toggles
   the .bde-nav-open class on body. Required for mobile because the document
   body itself is the scroller there (mobile.css disables #bde-scroll's
   overflow), and the !important is needed to beat that override. */
html:has(body.bde-nav-open),
body.bde-nav-open {
  overflow: hidden !important;
}

/* Touch devices: restore native cursor, kill custom cursor */
@media (hover: none), (pointer: coarse) {
  * { cursor: auto !important; }
  body, html, #root { cursor: auto !important; }
  /* No ESC key on phones/tablets — hide the hint at the bottom of the nav overlay */
  .bde-esc-hint { display: none !important; }
  /* Hide the magnetic cursor element entirely. It is actually rendered inside
     #root, not directly under body, so the `body > ...` selector that used to
     be here never matched — leaving the green "MENU" cursor blob visible on
     touch devices on top of the rest of the UI (incl. the open overlay). */
  div[style*="z-index: 99999"][style*="pointer-events: none"],
  div[style*="z-index: 2500"][style*="pointer-events: none"][style*="inset: 0"] {
    display: none !important;
  }
}

/* ───── ≤900px: tablet/phone unified breakpoint ───── */
@media (max-width: 900px) {
  /* Allow the page to scroll naturally on mobile (was 100vh fixed).
     overflow-x:hidden specifically — any wider-than-viewport element (e.g. the
     fullscreen nav overlay during its slide-in animation) would otherwise create
     a horizontal scrollbar and the whole page would feel like it's drifting
     left/right as the menu opens. */
  html, body, #root {
    height: auto !important; min-height: 100vh;
    overflow-x: hidden !important; overflow-y: visible !important;
  }
  #bde-scroll {
    height: auto !important; min-height: 100vh;
    overflow-x: hidden !important; overflow-y: visible !important;
  }

  /* Generic section padding tightening — overrides inline `padding: 'XXpx 32px ...'` */
  section { padding-left: 18px !important; padding-right: 18px !important; }
  section > div[style*="max-width"], section > div[style*="maxWidth"] { padding-left: 0 !important; padding-right: 0 !important; }

  /* Footer */
  footer { padding-left: 18px !important; padding-right: 18px !important; }
  footer > div { flex-wrap: wrap !important; gap: 18px !important; }

  /* ───────────── NAVBAR ───────────── */
  header > div:first-child { padding: 14px 18px !important; }
  /* Hide the secondary primary-nav row on phones — hamburger only */
  header nav { display: none !important; }

  /* ───────────── NAV OVERLAY ───────────── */
  /* Collapse from 2-col to 1-col, hide right detail panel */
  div[style*="grid-template-columns: 1fr 520px"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns: 1fr 520px"] > div:last-child { display: none !important; }
  /* Reduce overlay padding & link sizes */
  div[style*="grid-template-columns: 1fr 520px"] > div:first-child {
    padding: 90px 24px 40px !important;
  }
  div[style*="grid-template-columns: 1fr 520px"] a[style*="font-size: clamp(48px"],
  div[style*="grid-template-columns: 1fr 520px"] a {
    font-size: 36px !important;
    gap: 18px !important;
  }
  /* Hide the "BUILDERDECK" wordmark inside the overlay on phones — the icon
     alone is enough branding, and the wordmark + CLOSE button together overflow
     360-375px viewports, clipping CLOSE off the right edge. */
  div[style*="grid-template-columns: 1fr 520px"] img[alt="Builder Deck"] + div {
    display: none !important;
  }
  /* Compact the CLOSE pill so it always fits even on 320px phones. */
  div[style*="grid-template-columns: 1fr 520px"] button[data-cursor="CLOSE"] {
    padding: 10px 16px !important;
    gap: 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
  }

  /* ───────────── HERO ───────────── */
  #top h1, section[id="top"] h1 { font-size: 44px !important; line-height: 0.95 !important; }
  #top p { font-size: 15px !important; margin-top: 22px !important; }
  /* Hero CTA row */
  #top a[href="portfolio.html"], #top a[href*="quote"] { padding: 16px 22px !important; font-size: 12px !important; }
  /* Hero bottom strip — stack */
  #top > div[style*="bottom: 32px"][style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    bottom: 32px !important; left: 18px !important; right: 18px !important;
  }

  /* Now-showing strip after hero */
  section > div[style*="grid-template-columns: 1.3fr auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* About page: "What makes us the partner brands keep coming back to" 6-card
     grid. Desktop is repeat(2, 1fr) which leaves ~80px text width on a 360px
     phone — words wrap individually. Stack to one column and drop the
     inter-card border/padding that only made sense in 2-column mode. */
  div[style*="grid-template-columns: repeat(2, minmax(0px, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns: repeat(2, minmax(0px, 1fr)"] > div > div {
    border-right: none !important;
    padding-left: 0 !important;
  }

  /* ───────────── STUDIO / ABOUT ───────────── */
  #about > div > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-top: 36px !important;
  }
  #about h2 { font-size: 36px !important; }

  /* About page hero + the 3 "pillar" sections all use the same 2-column layout.
     On a 360px phone each column is ~150px wide, so headlines wrap every word
     and the body paragraph reads in a narrow stripe. Stack to 1 column. */
  div[style*="grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Service-detail pages (3d-visuals, country-pavilion, double-decker,
     exhibition-stand, rental-booths, store-reuse) all share the same hero +
     CTA layout — both stack on phones.  */
  div[style*="grid-template-columns: minmax(0px, 1.05fr) minmax(0px, 0.95fr)"],
  div[style*="grid-template-columns: minmax(0px, 1.4fr) minmax(0px, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Service-detail "process strip" — 6 steps in a row. 6×50px makes each step
     unreadable on a 360px phone. Go to 2-up × 3 rows. */
  div[style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  /* Portfolio + Trade-shows page intros are 4-column "headline + 3 stats" rows.
     The first column gets squashed to ~80px on phones — headline shows one word
     per line. Stack to 1 column; the inner stats remain side by side via their
     own children. */
  div[style*="grid-template-columns: 1.2fr 1fr 1fr 1fr"],
  div[style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* "THE FLOOR NOTES / Subscribe..." newsletter block on index + contact. */
  div[style*="grid-template-columns: 1fr 1.4fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* About hero "stats strip" (600+ / 6 / 4 / 10+). At 4-up on a 360px phone each
     cell is ~80px — number and label both crush. Go 2x2 on phones. */
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  div[style*="grid-template-columns: repeat(4, 1fr)"] > div:nth-child(3) {
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
  }
  div[style*="grid-template-columns: repeat(4, 1fr)"] > div:nth-child(4) {
    border-top: 1px solid rgba(255,255,255,0.12) !important;
  }

  /* ───────────── SERVICES ───────────── */
  #services h2 { font-size: 36px !important; }
  #services div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  #services .bde-svc { padding: 28px 20px !important; min-height: auto !important; }
  #services .bde-svc h3 { font-size: 26px !important; margin-bottom: 18px !important; }
  #services .bde-svc h3 + p { font-size: 14px !important; }
  #services .bde-svc > div:first-child { margin-bottom: 24px !important; }

  /* ───────────── CLIENTS / LOGO TICKER ───────────── */
  #clients h2 { font-size: 32px !important; }
  /* Remove the side-fade overlays entirely on phones — they read as a big
     distracting white-to-dark band when only one tile fits the viewport. */
  #clients div[style*="linear-gradient(90deg, var(--bde-ink)"],
  #clients div[style*="linear-gradient(-90deg, var(--bde-ink)"] {
    display: none !important;
  }

  /* ───────────── PORTFOLIO ───────────── */
  #portfolio h2 { font-size: 38px !important; margin-bottom: 36px !important; }
  /* The carousel is sticky 100vh — make it shorter on phones */
  #portfolio div[style*="height: 100vh"][style*="sticky"] { height: 70vh !important; }

  /* ───────────── WHY ───────────── */
  #why h2 { font-size: 32px !important; }
  #why p { font-size: 15px !important; }

  /* ───────────── REVIEWS ───────────── */
  .bde-reviews-section h2 { font-size: 36px !important; }
  /* Marquee cards too wide */
  .bde-reviews-track > div { width: 280px !important; min-width: 280px !important; padding: 24px !important; }

  /* ───────────── BLOG / JOURNAL ───────────── */
  #blog h2 { font-size: 44px !important; }
  #blog div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  #blog .bde-journal {
    grid-column: 1 !important;
    grid-row: auto !important;
    padding: 24px 20px !important;
  }
  #blog .bde-journal h3 { font-size: 26px !important; }
  /* Drop the 2-column body in the lead article */
  #blog .bde-journal p[style*="column-count"] { column-count: 1 !important; }

  /* Blog post "Also on the Floor Notes" related-reads grid — was 3 narrow columns
     on phones, the third card was getting clipped off the right edge. Stack to
     one column per card. */
  .bde-next-reads {
    grid-template-columns: 1fr !important;
  }
  .bde-next-reads > a {
    border-right: 1px solid var(--bde-line) !important;
  }

  /* ───────────── CONTACT ───────────── */
  #contact { padding: 72px 18px 44px !important; }
  #contact h2 { font-size: 38px !important; }
  /* Top split (info + form) */
  #contact div[style*="grid-template-columns: minmax(0, 5fr) minmax(0, 7fr)"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    margin-top: 36px !important;
  }
  /* Form internal grid 2-col → 1-col */
  #contact form[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
  /* Map + active office card */
  .bde-map-grid { grid-template-columns: 1fr !important; }
  .bde-map-grid > div:first-child { min-height: 280px !important; }

  /* Office tabs row */
  #contact div[style*="grid-template-columns: repeat("] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ───────────── QUOTE FORM DRAWER ───────────── */
  /* Already responsive via min(780px, 96vw); just tighten interior padding */
  div[style*="width: min(780px, 96vw)"] > div { padding-left: 24px !important; padding-right: 24px !important; }

  /* ───────────── GENERIC ───────────── */
  /* Clamp all giant headlines */
  h1[style*="font-size: clamp"],
  h2[style*="font-size: clamp"],
  h3[style*="font-size: clamp"] {
    /* let inline overrides above per-section win, but cap loose ones */
  }

  /* Big section titles inside random eyebrow rows wrap nicely */
  div[style*="display: flex"][style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
    gap: 8px !important;
  }
}

/* ───── ≤560px: extra-tight phone ───── */
@media (max-width: 560px) {
  section { padding-left: 14px !important; padding-right: 14px !important; }
  #top h1, section[id="top"] h1 { font-size: 38px !important; }
  #about h2, #services h2, #portfolio h2, #why h2, #reviews h2, #blog h2, #contact h2 { font-size: 30px !important; }
  #blog h2 { font-size: 36px !important; }
  /* Stack hero CTA row */
  #top div[style*="display: 'flex'"], #top div[style*="display:flex"] { flex-wrap: wrap !important; }
  /* Office tabs single column on tiny screens */
  #contact div[style*="grid-template-columns: repeat("] {
    grid-template-columns: 1fr !important;
  }
  /* Footer links wrap individually */
  footer > div { flex-direction: column !important; align-items: flex-start !important; }
  footer > div > div:last-child { flex-wrap: wrap !important; gap: 16px !important; }
}