/* ============================================================
   Catyobi Studio — responsive layer
   Desktop (>1024px) is untouched: every rule lives inside a
   media query and overrides inline styles via [style*=…] + !important.
   Mobile:  320–640px  → single column, wrapped nav, tighter padding
   Tablet:  641–1024px → two-column layouts, proportional spacing
   ============================================================ */

/* never allow sideways scroll on small screens */
@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img { max-width: 100%; }
}

/* ---------- MOBILE : 320–640px ---------- */
@media (max-width: 640px) {

  /* --- Navigation: wrap instead of overflow --- */
  nav[style*="padding: 1.1rem 2.5rem"] {
    padding: 0.85rem 1.15rem !important;
    flex-wrap: wrap !important;
    row-gap: 0.6rem !important;
  }
  nav[style*="padding: 1.1rem 2.5rem"] ul {
    gap: 1.05rem !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  /* --- Section padding: reduce horizontal insets --- */
  [style*="rem 2.5rem"],
  [style*="padding: 2.5rem"] {
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
  }
  /* tame the tall hero top/bottom */
  [style*="padding: 7rem 2.5rem 5rem"] {
    padding-top: 3.25rem !important;
    padding-bottom: 2.75rem !important;
  }

  /* --- Grids collapse to a single column --- */
  [style*="repeat(2, minmax(0"],
  [style*="repeat(3, minmax(0"],
  [style*="repeat(4, minmax(0"] {
    grid-template-columns: 1fr !important;
  }
  /* six-up image gallery → two-up */
  [style*="repeat(6, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* meta bars read better as two short columns than one */
  [style*="repeat(4, minmax(0"][style*="border-top"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* space-between rows stack cleanly */
  header [style*="justify-content: space-between"],
  section [style*="justify-content: space-between"],
  footer [style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
  }

  /* --- Footer link columns --- */
  footer [style*="1.5fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
  footer { padding-left: 1.15rem !important; padding-right: 1.15rem !important; }

  /* tall fixed-height process/gallery images shrink on phones */
  figure img[style*="height: 520px"] { height: 300px !important; }
  figure img[style*="height: 420px"] { height: 300px !important; }
}

/* ---------- TABLET : 641–1024px ---------- */
@media (min-width: 641px) and (max-width: 1024px) {

  nav[style*="padding: 1.1rem 2.5rem"] { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

  /* three- and four-up grids → two columns */
  [style*="repeat(3, minmax(0"],
  [style*="repeat(4, minmax(0"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* six-up gallery → three-up */
  [style*="repeat(6, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* footer: 2×2 columns */
  footer [style*="1.5fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }

  /* trim section padding a touch */
  [style*="rem 2.5rem"],
  [style*="padding: 2.5rem"] {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
  }
}

/* ---------- MOBILE : bespoke fr / fixed-column grids ---------- */
/* These use custom track sizes (7fr 5fr, 6fr 5fr, 5fr 6fr, 6rem 12rem 1fr)
   that the repeat(N, minmax(0 rules above don't match — collapse them too. */
@media (max-width: 640px) {
  /* About header portrait, Contact form + scheduler columns */
  [style*="7fr)"],
  [style*="6fr)"],
  [style*="5fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* About "path so far" timeline rows: label / title / description stack */
  [style*="6rem 12rem 1fr"] {
    grid-template-columns: 1fr !important;
    row-gap: 0.25rem !important;
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
  }
  /* Contact: full-width submit button on mobile */
  main form button[type="submit"] {
    width: 100% !important;
    text-align: center !important;
  }
}