/* Workspace Property Management — responsive layer.
   Desktop is unchanged: every rule lives inside a max-width media query.
   The site is authored with inline styles, so overrides match on the inline
   declaration itself and need !important to win. Breakpoints: 1024 / 900 /
   768 / 480 / 380. */

/* ---------- global foundation ---------- */
html, body { max-width: 100%; }
img { max-width: 100%; }

@media (max-width: 1024px) {
  /* homepage stats band: three uneven columns over a right-hand photo */
  div[style*="0.92fr"] { grid-template-columns: 1fr !important; }
  div[style*="0.92fr"] > div { grid-column: 1 !important; grid-row: auto !important; }
  /* the photo is a 62%-wide absolute panel; at tablet it fights the copy */
  section[data-stats] > div[style*="62%"] { width: 100% !important; opacity: .35; }
}

@media (max-width: 900px) {
  /* about.html three-across blocks */
  div[style*="repeat(3,1fr)"], div[style*="repeat(3, 1fr)"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  }
}

@media (max-width: 768px) {
  /* homepage collage: a 6-column grid whose children carry explicit grid-area
     spans — the spans must be released before the column count drops */
  div[style*="repeat(6,1fr)"], div[style*="repeat(6, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  div[style*="repeat(6,1fr)"] > div, div[style*="repeat(6, 1fr)"] > div { grid-area: auto !important; }

  /* elements given a fixed px box by direct editing in the host */
  [style*="width: 420px"], [style*="width:420px"],
  [style*="width: 609px"], [style*="width:609px"],
  [style*="width: 665px"], [style*="width:665px"] {
    width: auto !important; max-width: 100% !important;
  }
  [style*="width: 420px"][style*="height:"], [style*="width:420px"][style*="height:"],
  [style*="width: 609px"][style*="height:"], [style*="width:609px"][style*="height:"] {
    height: auto !important; min-height: 44px;
  }

  /* shared footer */
  footer#footer > div[style*="1.4fr"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  div[style*="repeat(6,1fr)"], div[style*="repeat(6, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* footer Explore list flows down two columns; give it a single readable one */
  footer#footer div[style*="grid-auto-flow:column"], footer#footer div[style*="grid-auto-flow: column"] {
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  footer#footer a[style*="nowrap"] { white-space: normal !important; }
  /* the hero reserves 640px before the fold on a 667px-tall phone */
  section#top { min-height: 560px !important; }
}

/* ---------- Leaflet: popups and controls ---------- */
@media (max-width: 480px) {
  /* higher specificity than the page's own .leaflet-popup-content rule */
  .leaflet-container .leaflet-popup .leaflet-popup-content {
    width: min(330px, calc(100vw - 96px)) !important;
  }
}
@media (max-width: 380px) {
  /* below this the 118px thumbnail leaves too little room for the address */
  .leaflet-popup .wsp-pop { flex-direction: column !important; }
  .wsp-pop > img, .wsp-pop > div:first-child { width: 100% !important; height: 120px !important; }
}

/* ---------- property detail ---------- */
@media (max-width: 768px) {
  /* the availability table's columns have fixed px widths by design; on a
     phone it scrolls inside its own frame rather than widening the page */
  .wsp-availability { overflow-x: auto !important; }
  .wsp-availability > div,
  .wsp-availability > a { min-width: 480px; }
}

/* ---------- touch targets ---------- */
@media (max-width: 768px) {
  /* lightbox close sat at 34px; 44px is the practical minimum for a thumb */
  button[style*="width: 34px"], button[style*="width:34px"] {
    width: 44px !important; height: 44px !important;
  }
}