/* Mobile/tablet adaptive layer for the C-Space prototype.
 *
 * The page is a design-tool export: everything is inline-styled for a 1440px
 * desktop with zero media queries. Stylesheet rules with !important outrank
 * plain inline styles, so this file reshapes the layout on small screens
 * without touching the exported markup.
 *
 * NOTE: selectors match on style-attribute substrings, and the support.js
 * runtime may re-serialize attributes with a space after the colon — every
 * value-based selector therefore appears in both spellings.
 */

img { max-width: 100%; height: auto; }

/* --- tablet and below ------------------------------------------------------- */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }

  /* gutters: 1440px containers use 32px side padding — tighten it */
  section[style*="max-width:1440px"], section[style*="max-width: 1440px"],
  div[style*="max-width:1440px"], div[style*="max-width: 1440px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* every multi-column grid collapses to a single column */
  section[style*="grid-template-columns"],
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-column"] { grid-column: auto !important; }

  /* rows of cards/buttons wrap instead of overflowing */
  div[style*="display:flex"], div[style*="display: flex"] { flex-wrap: wrap; }

  /* display type scales down */
  [style*="font-size:64px"], [style*="font-size: 64px"] {
    font-size: 38px !important;
    line-height: 1.12 !important;
  }
  [style*="font-size:44px"], [style*="font-size: 44px"] {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }
  [style*="font-size:28px"], [style*="font-size: 28px"] {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  /* header: logo + CTA first row, nav scrolls on its own row */
  header { height: auto !important; }
  header > div {
    height: auto !important;
    flex-wrap: wrap;
    padding: 10px 16px !important;
    gap: 10px 16px !important;
  }
  header nav {
    order: 10;
    flex: 1 1 100% !important;
    overflow-x: auto;
    white-space: nowrap;
    gap: 20px !important;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  header nav::-webkit-scrollbar { display: none; }
}

/* --- phones ------------------------------------------------------------------ */
@media (max-width: 640px) {
  section[style*="max-width:1440px"], section[style*="max-width: 1440px"],
  div[style*="max-width:1440px"], div[style*="max-width: 1440px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* heavy vertical paddings shrink */
  [style*="padding:96px"], [style*="padding: 96px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  [style*="padding:128px"], [style*="padding: 128px"] {
    padding-top: 72px !important;
    padding-bottom: 56px !important;
  }
  [style*="padding:0 32px 96px"], [style*="padding: 0 32px 96px"] {
    padding-bottom: 56px !important;
  }

  /* full-width tap targets */
  button { width: 100%; }
  header button { width: auto; }

  /* tall fixed-height photos take half the screen on phones — trim them */
  img[style*="height:440px"], img[style*="height: 440px"],
  img[style*="height:480px"], img[style*="height: 480px"],
  img[style*="height:420px"], img[style*="height: 420px"],
  img[style*="height:400px"], img[style*="height: 400px"] {
    height: 240px !important;
  }

  [style*="font-size:64px"], [style*="font-size: 64px"] { font-size: 32px !important; }
  [style*="font-size:44px"], [style*="font-size: 44px"] { font-size: 26px !important; }
}