/* moliving.com — phone layouts.
   The Claude Design pages are drawn for desktop with inline styles. On phones this
   sheet re-flows them: one column, tighter margins and spacing, image mosaics as a
   simple stack. Desktop is untouched (everything sits inside the media query).
   Selectors match the pages' inline styles, so a re-export keeps working. */
@media (max-width: 900px) {
  /* ── margins and vertical rhythm ───────────────────────────── */
  section, header, footer, nav { padding-left: 22px !important; padding-right: 22px !important; }
  section[style*="padding: 1"], header[style*="padding: 1"] { padding-top: 96px !important; }
  section[style*="padding: 1"], section[style*="48px 1"], header[style*="48px 1"] { padding-bottom: 96px !important; }
  header[style*="padding: 190px"] { padding-top: 136px !important; }
  /* inner page containers already sit inside the section's margin */
  div[style*="max-width"][style*="padding"][style*=" 48px"] { padding-left: 0 !important; padding-right: 0 !important; }
  div[style*="padding"][style*=" 48px"]:not([style*="max-width"]), div[style*="padding: 40px 44px"], div[style*="padding: 40px 38px"], div[style*="padding: 44px"] { padding-left: 24px !important; padding-right: 24px !important; }

  /* ── nav: the wordmark and one call to action ─────────────── */
  nav { gap: 12px !important; }
  nav > a:first-child { font-size: 18px !important; letter-spacing: 0.22em !important; }
  nav > div { gap: 12px !important; }
  nav > div > *:not(:last-child) { display: none !important; }
  nav > div > a:last-child { padding: 9px 14px !important; letter-spacing: 0.18em !important; font-size: 10.5px !important; }

  /* ── grids: one column, except the small marker/number columns ── */
  [style*="grid-template-columns"]:not([style*="grid-template-columns: 26px"]):not([style*="grid-template-columns: 14px"]):not([style*="grid-template-columns: 8px"]):not([style*="repeat(4"]):not([style*="repeat(5"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="repeat(4, 1fr)"], [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-column:"] { grid-column: auto !important; }
  [style*="grid-row:"] { grid-row: auto !important; }
  [style*="grid-area:"] { grid-area: auto !important; }
  /* image mosaics with fixed row heights become a stack of equal frames */
  [style*="grid-template-rows"] { grid-template-rows: none !important; grid-auto-rows: 250px !important; gap: 10px !important; }

  /* ── big desktop gaps ──────────────────────────────────────── */
  [style*="gap: 52px"], [style*="gap: 56px"], [style*="gap: 64px"], [style*="gap: 72px"], [style*="gap: 80px"], [style*="gap: 96px"], [style*="gap: 100px"] { gap: 28px !important; }
  [style*="gap: 44px"], [style*="gap: 40px"] { gap: 24px !important; }

  /* rows of buttons, steps and controls wrap instead of squeezing */
  [style*="display: flex"]:not([style*="max-content"]):not(summary):not(nav):not(nav > div):not([data-hero-content] > div:first-child) { flex-wrap: wrap; }
  /* column rules between stacked items are dropped */
  section [style*="border-left: 1px"]:not([style*="padding-left: 80px"]) { border-left: none !important; padding-left: 0 !important; }

  /* a column that sat beside another behind a rule now sits below it */
  [style*="padding-left: 80px"] { padding-left: 0 !important; border-left: none !important; padding-top: 52px !important; border-top: 1px solid rgba(237,230,214,.16) !important; }

  /* long single words (emails, labels) wrap instead of pushing the page wide */
  p, h1, h2, h3, a, span, div { overflow-wrap: break-word; }
  img, video, iframe { max-width: 100%; }

  /* ── type: the big display lines fit the screen; tracked labels get air ── */
  [style*="font-size: clamp(54px, 8vw"] { font-size: clamp(36px, 10vw, 64px) !important; letter-spacing: 0.04em !important; }
  [style*="letter-spacing: 0.3"], [style*="letter-spacing: 0.4"] { line-height: 1.7 !important; }
  /* hero eyebrow: drop the short rules either side, let the words wrap */
  [data-hero-content] > div:first-child > div[style*="height: 1px"] { display: none !important; }

  /* ── footer: three columns stacked and centred ─────────────── */
  footer > div > div:first-child { grid-template-columns: 1fr !important; justify-items: center; text-align: center; gap: 32px !important; }
  footer > div > div:first-child > div { align-items: center !important; justify-self: center !important; }
  footer img { height: 120px !important; }
}