/* ————————————————————————————————————————————————
   Responsive overrides for S&P Signature Homes
   Handles inline grid layouts via attribute selectors.
   Breakpoints:
     ≤1024px  iPad portrait & smaller
     ≤860px   mobile drawer + cramped nav
     ≤768px   small tablet / large phone
     ≤480px   phone
   ———————————————————————————————————————————————— */

/* ===== TABLET (≤1024px) ===== */
@media (max-width: 1024px) {
  :root {
    --gutter: 24px;
  }

  /* Collapse 4-col grids to 2-col */
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(6"],
  [style*="grid-template-columns:repeat(6"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Footer: 4 cols → 2 */
  [style*="grid-template-columns: 1.3fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  /* Sidebar+content layouts collapse */
  [style*="grid-template-columns: 280px"],
  [style*="grid-template-columns:280px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ===== DESKTOP NAV (>860px) =====
   Nav links sit in a row to the right of the wordmark. */
.sp-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sp-nav-link {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  text-decoration: none;
}
.sp-nav-link.is-active { color: var(--ink); }
.sp-nav-underline {
  position: absolute; bottom: 4px; left: 14px; right: 14px;
  height: 1px; background: var(--accent);
}
.sp-nav-cta {
  margin-left: 16px;
  padding: 12px 18px !important;
  font-size: 13px !important;
}
.sp-nav-scrim { display: none; }

/* Logo active state — a single hairline accent underline, matching the
   underline used on the other active nav items. No bullet, no badge. */
.sp-logo { text-decoration: none; }
.sp-logo-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
}

/* ===== PHONE / SMALL TABLET (≤768px) ===== */
@media (max-width: 768px) {
  :root {
    --gutter: 20px;
  }

  body { font-size: 16px; line-height: 1.55; }

  /* Headings — tighter scale on phones */
  h1 { font-size: clamp(38px, 9vw, 56px) !important; line-height: 1.05 !important; }
  h2 { font-size: clamp(28px, 6.5vw, 40px) !important; }
  h3 { font-size: clamp(20px, 4.5vw, 26px) !important; }

  .lead { font-size: 17px !important; line-height: 1.55 !important; }

  /* Eyebrow / mono — slightly larger so they're legible */
  .eyebrow { font-size: 12px !important; letter-spacing: 0.12em !important; }
  .mono { letter-spacing: 0 !important; }

  /* Reduce section padding */
  .section { padding: 48px 0 !important; }
  .section-tight { padding: 32px 0 !important; }

  /* Common hero/section inline padding pairs — React serializes inline JSX
     style props to CSS-form on the DOM ("paddingTop: 48" → "padding-top: 48px"),
     so the attribute selectors below match the actual rendered HTML.  */
  [style*="padding-top: 48px"][style*="padding-bottom: 64px"],
  [style*="padding-top: 48px"][style*="padding-bottom: 72px"],
  [style*="padding-top: 48px"][style*="padding-bottom: 56px"],
  [style*="padding-top: 32px"][style*="padding-bottom: 16px"],
  [style*="padding-top: 56px"][style*="padding-bottom: 80px"],
  [style*="padding-top: 64px"][style*="padding-bottom: 16px"] {
    padding-top: 28px !important;
    padding-bottom: 24px !important;
  }

  /* Only override horizontal padding so inline vertical padding survives */
  .wide, .container {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }

  /* Collapse ALL multi-column inline grids to single column */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr)"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Services page sidebar (280px aside) → on mobile hide the entire sidebar
     (rendering the full service list twice was the source of bug #7) and use
     the mobile chip-strip inside the content panel as the switcher. */
  [style*="grid-template-columns: 280px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .sp-services-aside {
    display: none !important;
  }
  .sp-services-content {
    padding: 32px 0 48px 0 !important;
  }
}

/* Desktop only: hide the mobile chip switcher */
@media (min-width: 769px) {
  .sp-services-mobile-switcher { display: none !important; }
}

@media (max-width: 768px) {
  .sp-services-mobile-switcher {
    display: block !important;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
  }

  /* Work page: 2×2 stat grid stays as 2 columns on mobile (was collapsing
     to one). Match by the wrapper class so the inner stat cells lay out
     cleanly. */
  .sp-work-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }

  /* Work page: kill the dead-zone gap above the first project card */
  .sp-work-list {
    padding-top: 16px !important;
    padding-bottom: 8px !important;
  }
  .sp-work-entry { padding: 32px 0 !important; }
  .sp-work-entry-first { padding: 16px 0 32px !important; }

  /* But keep 2-up for image strips (work page befores/thumbs) */
  .img-strip-2 [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Three-column home stat strip stays as 3-col but tighter */
  [style*="grid-template-columns: 1fr 1fr auto"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Buttons: full-width on mobile */
  .btn {
    padding: 14px 20px !important;
    font-size: 14px !important;
    justify-content: center !important;
  }

  /* Tone down the noise grain so text isn't washed out */
  body::before { opacity: 0.25 !important; }

  /* Aside panels lose right-border + heavy padding when stacked */
  aside[style*="border-right"] {
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 32px 0 !important;
  }

  /* Form fields stack natively now — but make textareas reasonable */
  textarea { min-height: 120px !important; }

  /* Reduce big inline paddings — match by horizontal component only */
  [style*="padding: 64px 48px"],
  [style*="padding: 48px 32px"],
  [style*="padding: \"64px 0 64px 48px\""],
  [style*="64px 0 64px 48px"],
  [style*="64px 48px 64px 0"],
  [style*="padding: 96px 32px"] {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }

  /* TeamCard side-by-side image+text — stack */
  [style*="grid-template-columns: 180px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Pricing/process side-by-side */
  [style*="grid-template-columns: 1fr 1.05fr"],
  [style*="grid-template-columns: 1.05fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ===== TINY PHONE (≤480px) ===== */
@media (max-width: 480px) {
  :root {
    --gutter: 16px;
  }

  h1 { font-size: clamp(32px, 9vw, 44px) !important; }
  h2 { font-size: clamp(24px, 7vw, 32px) !important; }

  .lead { font-size: 16px !important; }

  .btn { padding: 13px 18px !important; font-size: 13px !important; }

  /* Stat blocks: 2 columns instead of 4 */
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}

/* ===== GLOBAL ANTI-OVERFLOW SAFEGUARDS ===== */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  img, svg, video { max-width: 100%; height: auto; }
  /* Long words and emails wrap */
  p, h1, h2, h3, h4, li, a, span { overflow-wrap: anywhere; word-wrap: break-word; }
  /* Tighten nav padding */
  nav .wide { padding: 14px 16px !important; }
  /* Hero CTAs stack & take full width */
  .btn { width: auto; }

  /* Pull-in any element using negative left/right margins that overflow viewport */
  [style*="left: -16"],
  [style*="left:-16"] { left: 0 !important; }
  [style*="bottom: -24"],
  [style*="bottom:-24"] { bottom: -8px !important; }

  /* Caption / badge overlays — keep within bounds */
  [style*="position: absolute"][style*="top: 16"][style*="left: 16"],
  [style*="position: absolute"][style*="top: 16"][style*="right: 16"],
  [style*="position: absolute"][style*="top: 20"][style*="left: 20"],
  [style*="position: absolute"][style*="top: 20"][style*="right: 20"] {
    top: 10px !important;
  }

  /* Fixed-width business card preview — let it scale */
  .card { width: 100% !important; max-width: 360px !important; height: auto !important; min-height: 200px; }
  .stage { padding: 0 16px !important; }

  /* Marquee — keep nowrap but constrain container */
  [style*="whiteSpace"][style*="nowrap"] { font-size: 16px !important; }

  /* Disable hover scale animations that look jittery on tap */
  [style*="transform"][style*="scale(1.03)"] { transform: scale(1) !important; }

  /* Sticky elements often break on mobile — release them */
  [style*="position: sticky"][style*="top: 100"],
  [style*="position: sticky"][style*="top: 80"] {
    position: static !important;
    top: auto !important;
    max-height: none !important;
  }

  /* Hero negative margin clip */
  section [style*="margin-top: -"] { margin-top: 0 !important; }

  /* Increase tap target on small mono links in lists */
  ul .link-inline, li .link-inline { padding: 6px 0; display: inline-block; }
}

/* ===== TABLET PORTRAIT (≤900px but >768px) — secondary safety net ===== */
@media (min-width: 769px) and (max-width: 900px) {
  /* Many 2-col layouts at this width are too cramped — force single */
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

@media (max-width: 860px) {
  /* Hide the logo underline on mobile — it's redundant with the page label
     and crowds the wordmark on a narrow row. */
  .sp-logo-underline { display: none !important; }
}

/* ===== NAV (mobile menu) =====
   Hamburger is hidden by default and revealed at ≤860px (covers iPad portrait
   and all phones — the nav row is too cramped before this even though body text
   is still fine). */
.sp-nav-toggle { display: none !important; }

@media (max-width: 860px) {
  /* Mobile drawer — explicit display:flex via the SAME selector that styles
     the desktop nav. Every direct child anchor is forced to display:flex so
     no item can be silently swallowed (previous bug: only the first link
     rendered). */
  .sp-nav-links {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(86vw, 360px) !important;
    /* Explicit full-viewport height — top:0 + bottom:0 alone wasn't winning
       against an older inline/computed height that clipped the drawer to a
       single nav row. 100dvh handles mobile browser UI chrome correctly. */
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 88px 28px 40px !important;
    /* HARD-CODED opaque hex — not a CSS variable — so even with a malformed
       tokens.css this can never resolve to "transparent". */
    background-color: #FAF8F4 !important;
    background-image: none !important;
    transform: translateX(100%) !important;
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.24, 1) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border-left: 1px solid var(--line) !important;
    box-shadow: -20px 0 60px -20px rgba(26,23,20,0.25) !important;
    /* Above the body::before grain overlay (z-index 9999) so the noise
       texture doesn't sit on top of the drawer. */
    z-index: 10000 !important;
    /* belt-and-braces: kill any inline grid/columns */
    grid-template-columns: none !important;
  }
  .sp-nav-links.is-open {
    transform: translateX(0) !important;
  }
  .sp-nav-scrim {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background-color: rgba(26,23,20,0.42) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: 9998 !important;
    animation: sp-fadein 0.28s ease both;
  }
  @keyframes sp-fadein { from { opacity: 0; } to { opacity: 1; } }

  /* Every nav link — explicit display + width so none collapse */
  .sp-nav-links > a,
  .sp-nav-links > .sp-nav-link {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 18px 4px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--line) !important;
    text-decoration: none !important;
    position: relative !important;
  }
  .sp-nav-links > a .sp-nav-link-label { flex: 1 1 auto; }
  .sp-nav-links > a.is-active { color: var(--accent) !important; }
  .sp-nav-links > a.is-active::after {
    content: "•";
    color: var(--accent);
    margin-left: 8px;
    font-size: 12px;
  }
  /* On mobile, drop the underline span — we use color + dot for "active". */
  .sp-nav-links .sp-nav-underline { display: none !important; }

  .sp-nav-links > a.btn-accent,
  .sp-nav-links > a.sp-nav-cta {
    margin: 24px 0 0 !important;
    padding: 16px 18px !important;
    border-bottom: none !important;
    justify-content: center !important;
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  .sp-nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: var(--bg);
    border: 1px solid var(--line);
    cursor: pointer;
    padding: 0;
    z-index: 10001;
    position: relative;
  }
  .sp-nav-toggle span,
  .sp-nav-toggle span::before,
  .sp-nav-toggle span::after {
    display: block;
    width: 18px; height: 1.5px;
    background: var(--ink);
    position: relative;
    transition: transform .25s ease, top .25s ease;
  }
  .sp-nav-toggle span::before,
  .sp-nav-toggle span::after {
    content: "";
    position: absolute; left: 0;
  }
  .sp-nav-toggle span::before { top: -6px; }
  .sp-nav-toggle span::after  { top:  6px; }
  .sp-nav-toggle.is-open span { background: transparent; }
  .sp-nav-toggle.is-open span::before { top: 0; transform: rotate(45deg); }
  .sp-nav-toggle.is-open span::after  { top: 0; transform: rotate(-45deg); }

  /* The nav .wide row uses flex; make sure logo stays left, hamburger right
     even when the drawer is rendered into the same row. */
  .sp-nav-row {
    position: relative;
  }
}