/* HOMES by Jo — responsive layer
   The pages are built with inline styles, so these overrides need !important
   and attribute selectors. Desktop is untouched; everything here is ≤1024px. */

/* ---------- Tablet and below ---------- */
@media (max-width: 1024px) {
  [style*="padding:0 48px"]      { padding-left: 28px !important; padding-right: 28px !important; }
  [style*="padding:18px 48px"]   { padding-left: 22px !important; padding-right: 22px !important; }
  [style*="padding:16px 48px"]   { padding-left: 22px !important; padding-right: 22px !important; }
  [style*="padding:28px 48px"]   { padding-left: 22px !important; padding-right: 22px !important; }
  [style*="padding:12px 48px"]   { padding-left: 22px !important; padding-right: 22px !important; }
  [style*="padding:52px 48px"]   { padding-left: 22px !important; padding-right: 22px !important; }
  [style*="padding:36px 48px"]   { padding-left: 22px !important; padding-right: 22px !important; }
  [style*="grid-template-columns:1.6fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.3fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  [style*="padding:0 48px"]    { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="padding:18px 48px"] { padding: 12px 16px !important; }
  [style*="padding:16px 48px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding:28px 48px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding:12px 48px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding:52px 48px"] { padding: 30px 18px 0 !important; }
  [style*="padding:36px 48px"] { padding: 22px 18px 0 !important; }

  /* every multi-column layout collapses to one */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.6fr 1fr"],
  [style*="grid-template-columns:1.3fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* wide data tables scroll sideways rather than crushing */
  [style*="grid-template-columns:1.8fr .95fr"],
  [style*="grid-template-columns:1.7fr 1.2fr"] { min-width: 680px; }

  /* section rhythm tightens up */
  [style*="margin:48px auto 0"] { margin-top: 30px !important; }
  [style*="margin:48px auto"]   { margin-top: 30px !important; }

  /* headings step down */
  h1 { font-size: clamp(24px, 6.4vw, 30px) !important; line-height: 1.22 !important; }
  h2 { font-size: clamp(18px, 4.8vw, 21px) !important; }
  h3 { font-size: clamp(15px, 4.2vw, 17px) !important; }

  /* media blocks shrink */
  [style*="height:420px"] { height: 240px !important; }
  [style*="height:380px"] { height: 240px !important; }
  [style*="height:280px"] { height: 200px !important; }
  [style*="height:190px"] { height: 160px !important; }
  iframe { max-width: 100%; }
  img, svg, canvas, video { max-width: 100%; }

  /* the 3D tower explorer needs real height to stay usable */
  serra-tower { min-height: 420px !important; }

  /* tap targets */
  a, button, [onclick], [role="button"] { touch-action: manipulation; }
}

/* ---------- Small phones ---------- */
@media (max-width: 400px) {
  [style*="padding:0 48px"] { padding-left: 14px !important; padding-right: 14px !important; }
  [style*="gap:28px"] { gap: 18px !important; }
  [style*="gap:22px"] { gap: 14px !important; }
}