/* HOUSE-OLOGY — mobile & tablet shim
   Layout-only overrides; nothing here affects desktop (>1024px).
   Targets the site's existing inline-style patterns, so no page markup changes.
   Loaded from each page's <helmet>: <link rel="stylesheet" href="assets/mobile.css">

   NOTE: inline styles are re-serialised by the render layer, so a declaration
   authored as `font:400 58px/1` appears in the DOM as `font: 400 58px / 1`.
   Every selector below matches BOTH forms (chained [style*=] fragments). */

/* ── Tablet and below: no sideways scroll, nothing wider than the screen ── */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  img, video, iframe, table, pre { max-width: 100%; }
  /* long single-line headlines, emails, phone numbers */
  [style*="nowrap"] { white-space: normal !important; }
  [style*="min-height"][style*="100vh"] { min-height: 100svh !important; }
  [style*="min-height"][style*="88vh"],  [style*="min-height"][style*="90vh"],
  [style*="min-height"][style*="80vh"] { min-height: 72svh !important; }

  /* fixed pixel widths authored for a desktop column */
  [style*="width"][style*="900px"]:not([style*="max-width: 900px"]):not([style*="max-width:900px"]),
  [style*="width"][style*="1080px"]:not([style*="max-width: 1080px"]):not([style*="max-width:1080px"]) { width: 100% !important; }

  /* Full-bleed photo heroes: a left-to-right scrim leaves the copy sitting on
     open photo once the frame narrows. Switch to a bottom-up scrim so type
     stays legible and the top of the frame (faces) stays clear. */
  [style*="to right"][style*="37, 51"],
  [style*="to right"][style*="26, 35"],
  [style*="to right"][style*="16, 23"],
  [style*="to right,rgba(45,37,51"],
  [style*="to right,rgba(31,26,35"],
  [style*="to right,rgba(20,16,23"] {
    background: linear-gradient(to bottom, rgba(35,29,40,0.3) 0%, rgba(35,29,40,0.66) 45%, rgba(35,29,40,0.92) 100%) !important;
  }
}

/* ── Tablet portrait and below: stack columns, tighten gutters ── */
@media (max-width: 900px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="gap"][style*="84px"],
  [style*="gap"][style*="64px"],
  [style*="gap"][style*="44px"],
  [style*="gap"][style*="40px"] { gap: 24px !important; }

  /* desktop side gutters (48 / 56 / 44 / 40px) become phone gutters */
  [style*="padding"][style*="px 48px"],
  [style*="padding"][style*="px 56px"],
  [style*="padding"][style*="px 44px"],
  [style*="padding"][style*="px 40px"],
  [style*="padding: 48px"], [style*="padding:48px"],
  [style*="padding: 40px"], [style*="padding:40px"] {
    padding-left: 22px !important; padding-right: 22px !important;
  }

  /* hero blocks: drop the desktop top inset and the fixed tall min-height */
  [style*="padding"][style*="260px"],
  [style*="padding"][style*="190px"],
  [style*="padding"][style*="170px"] { padding-top: 118px !important; }
  [style*="min-height"][style*="1020px"],
  [style*="min-height"][style*="680px"],
  [style*="min-height"][style*="640px"] { min-height: 0 !important; }

  /* button / meta rows wrap instead of squeezing */
  [style*="display: flex"]:not([style*="column"]):not([style*="wrap: nowrap"]),
  [style*="display:flex"]:not([style*="column"]):not([style*="wrap:nowrap"]) { flex-wrap: wrap; }

  /* form fields and email capture go full width */
  [style*="max-width"][style*="420px"],
  [style*="max-width"][style*="440px"] { max-width: 100% !important; }
}

/* ── Phone: bring display type down to a readable measure ── */
@media (max-width: 640px) {
  [style*="font"][style*=" 58px "], [style*="58px/"],
  [style*="font"][style*=" 56px "], [style*="56px/"],
  [style*="font"][style*=" 52px "], [style*="52px/"],
  [style*="font"][style*=" 51px "], [style*="51px/"],
  [style*="font"][style*=" 50px "], [style*="50px/"] { font-size: 34px !important; }

  [style*="font"][style*=" 48px "], [style*="48px/"],
  [style*="font"][style*=" 46px "], [style*="46px/"],
  [style*="font"][style*=" 44px "], [style*="44px/"],
  [style*="font"][style*=" 42px "], [style*="42px/"],
  [style*="font"][style*=" 40px "], [style*="40px/"] { font-size: 31px !important; }

  [style*="font"][style*=" 39px "], [style*="39px/"],
  [style*="font"][style*=" 37px "], [style*="37px/"],
  [style*="font"][style*=" 36px "], [style*="36px/"],
  [style*="font"][style*=" 34px "], [style*="34px/"] { font-size: 27px !important; }

  /* oversized body / quote text set for a wide column */
  [style*="font"][style*=" 30px "], [style*="30px/"],
  [style*="font"][style*=" 28px "], [style*="28px/"],
  [style*="font"][style*=" 27px "], [style*="27px/"] { font-size: 22px !important; }

  [style*="font"][style*=" 26px "], [style*="26px/"],
  [style*="font"][style*=" 25px "], [style*="25px/"],
  [style*="font"][style*=" 24px "], [style*="24px/"],
  [style*="font"][style*=" 23px "], [style*="23px/"],
  [style*="font"][style*=" 22px "], [style*="22px/"] { font-size: 18px !important; }

  /* tap targets: nothing under ~44px tall */
  a[style*="padding"][style*="9px"], button[style*="padding"][style*="9px"],
  a[style*="padding"][style*="8px 2"], a[style*="padding"][style*="7px 0"] {
    padding-top: 13px !important; padding-bottom: 13px !important;
  }

  /* iOS zooms the page on focus for any field under 16px */
  input[style*="15px"], input[style*="14px"], input[style*="13px"],
  textarea[style*="15px"], textarea[style*="14px"], select[style*="15px"] { font-size: 16px !important; }
}

/* ── Large desktop (e.g. 16" MacBook Pro): scale the whole page ~10% so body copy matches the banner ── */
@media (min-width:1500px){html{zoom:1.1}}
@media (min-width:1900px){html{zoom:1.18}}