/* ============================================================
   Simple Realty Northwest — Mobile Responsive Layer
   responsive.css · loaded LAST, after each page's inline <style>
   ------------------------------------------------------------
   EVERY rule is gated inside a max-width media query, so the
   desktop layout (>760px) is never touched. The site's layout is
   built with inline style="" attributes (which outrank an external
   sheet), so phones are corrected with !important — the correct
   technique for this architecture, scoped to phone widths only.
   ============================================================ */

/* ================= PHONES & PHABLETS (≤760px) ================= */
@media (max-width:760px){

  /* ---------- global guards ---------- */
  html,body{overflow-x:hidden!important}
  img,svg,video{max-width:100%!important;height:auto}

  /* ---------- universal: collapse every multi-column inline grid to one column ---------- */
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}

  /* =========================================================
     HERO  (#top)
     ========================================================= */
  /* drop the fixed 150px padding + 100vh min-height (the dead space);
     block flow so the content + trust strip stack instead of centering */
  #top{display:block!important;min-height:auto!important;
       padding:104px clamp(18px,5vw,40px) 56px!important}
  #top > div[style*="max-width:1280px"]{max-width:100%!important}
  #top > div[style*="max-width:1280px"] > div[style*="max-width:640px"]{max-width:100%!important}
  #top h1{font-size:clamp(33px,8.6vw,44px)!important}

  /* hero fold: trim to H1 + the punchy guarantee line + a full-width CTA */
  #top .hero-sub-long{display:none!important}
  #top .hero-cta-row{flex-direction:column!important;align-items:stretch!important;gap:12px!important;margin-top:4px!important}
  #top .hero-cta-row > a.hv2{width:100%!important;justify-content:center!important}
  #top .hero-cta-row > a.hv3{justify-content:center!important;border-bottom:0!important;padding:8px 0 0!important}

  /* hero eyebrow pill — center its text + drop the decorative dot so the 2-line wrap reads cleanly */
  #top div[style*="border-radius:100px"][style*="margin-bottom:30px"]{justify-content:center!important}
  #top div[style*="border-radius:100px"][style*="margin-bottom:30px"] > span:first-child{display:none!important}
  #top div[style*="border-radius:100px"][style*="margin-bottom:30px"] > span:last-child{text-align:center!important;letter-spacing:1.5px!important}

  /* the Risk-Free seal: redundant on phones (the Guarantee section + "see the
     guarantee" link follow immediately) — hide it so it can't crowd the headline */
  #top a.hv4{display:none!important}

  /* trust strip ($750M / 1,000+ / 96% / 20+): absolute bottom-pin → in-flow 2×2 card,
     SOLID background so the stats read clearly instead of washing into the video */
  #top div[style*="bottom:0"]{position:relative!important;z-index:2;margin-top:34px;
       background:#0A1722!important;border:1px solid rgba(194,160,107,.18)!important;border-radius:12px}
  #top div[style*="bottom:0"] [style*="repeat(4,1fr)"]{grid-template-columns:1fr 1fr!important;gap:0!important}
  #top div[style*="bottom:0"] [style*="border-left"]{border-left:0!important}
  #top div[style*="bottom:0"] [style*="text-align:center"]{padding:15px 6px}

  /* ===== CITY / PROPERTY hero (#main) — same fix as #top: block flow + the stats
     strip in-flow, so the absolute bottom strip can't paint over the hero CTA ===== */
  #main{display:block!important;min-height:auto!important;padding:118px clamp(18px,5vw,40px) 50px!important}
  #main > div[style*="max-width:1240px"]{max-width:100%!important}
  #main > div[style*="bottom:0"]{position:relative!important;z-index:2;margin-top:30px;
       background:#0A1722!important;border:1px solid rgba(194,160,107,.18)!important;border-radius:12px}
  #main > div[style*="bottom:0"] [style*="repeat(4,1fr)"]{grid-template-columns:1fr 1fr!important;gap:0!important}
  #main > div[style*="bottom:0"] [style*="border-left"]{border-left:0!important}
  #main > div[style*="bottom:0"] [style*="text-align:center"]{padding:14px 6px}

  /* =========================================================
     GUARANTEE  (#guarantee) — stack the split, tighten margins
     ========================================================= */
  #guarantee [style*="margin-bottom:56px"]{margin-bottom:30px!important}
  #guarantee [style*="margin-top:48px"]{margin-top:26px!important}

  /* =========================================================
     FOOTER — keep the city links readable as 2-up (overrides the
     universal 1-col above for this one grid)
     ========================================================= */
  footer .ft-cities{grid-template-columns:1fr 1fr!important}
}

/* ================= SMALL PHONES (≤430px) ================= */
@media (max-width:430px){
  #top h1{font-size:37px!important}
  #top div[style*="bottom:0"] [style*="repeat(4,1fr)"]{grid-template-columns:1fr 1fr!important}
  footer .ft-cities{grid-template-columns:1fr!important}
}