/* Mobile layer.
   The Claude Design export is fixed-width desktop artboards with no breakpoints,
   and the pages are built from inline styles — so these overrides need
   !important and attribute selectors to reach them. Desktop is untouched. */

@media (max-width: 860px) {
  /* Collapse every fractional multi-column grid to one column. Written as a
     catch-all rather than a list of known values so new layouts from the design
     are covered too. "1fr auto" is exempt: it is a label/value spec row that
     still reads correctly at 375px. */
  [style*="grid-template-columns:"]:not([style*="1fr auto"]) {
    grid-template-columns: 1fr !important;
  }

  /* The Project Builder's receipt is a sticky sidebar on desktop; once stacked
     it would sit on top of the rooms it summarises. */
  aside[style*="position:sticky"] { position: static !important; }

  /* Sticky nav: wrap the links and drop the spacer that forces one long row */
  nav > div {
    flex-wrap: wrap !important;
    gap: 4px 16px !important;
    padding: 10px 20px !important;
  }
  nav > div > span[style*="flex:1"] { display: none !important; }
  /* Touch targets: the design system sets --tap-min 44px; the nav links are 14px */
  nav a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: var(--tap-min) !important;
  }

  /* Section rhythm: 128px desktop -> 64px mobile, 32px gutter -> 20px */
  [style*="padding:128px 32px"] { padding: 64px 20px !important; }
  [style*="padding:96px 32px 128px"] { padding: 56px 20px 64px !important; }
  [style*="padding:96px 32px 64px"] { padding: 56px 20px 48px !important; }
  [style*="padding:96px 32px"]:not([style*="128px"]):not([style*="64px"]) { padding: 56px 20px !important; }
  [style*="padding:64px 32px 64px"] { padding: 48px 20px !important; }
  [style*="padding:0 32px 128px"] { padding: 0 20px 64px !important; }
  [style*="padding:16px 32px"] { padding: 16px 20px !important; }
  [style*="padding:18px 32px"] { padding: 18px 20px !important; }

  /* Display type: the 64/44 scale is too large below 860px */
  h1[style*="64px"] { font-size: 40px !important; }
  h2[style*="44px"] { font-size: 32px !important; }
  h3[style*="32px"] { font-size: 26px !important; }

  /* Full-bleed imagery */
  img[style*="height:720px"] { height: 380px !important; }
  img[style*="height:620px"] { height: 340px !important; }
  img[style*="height:560px"] { height: 300px !important; }
}

@media (max-width: 480px) {
  h1[style*="64px"] { font-size: 34px !important; }
  h2[style*="44px"] { font-size: 28px !important; }
}