/* Location (mobile-first) */
.location {
  display: grid;
  grid-template-columns: 1fr;   /* stack on small screens */
  gap: 1rem;
}

/* Map pane */
.map-display {
  width: 100%;
  min-height: clamp(280px, 40vh, 420px); /* flexible height that feels good on phones too */
  border: 1px solid #b9b9b9;
  overflow: hidden;
}

/* Make common map embeds fill the box */
.map-display iframe,
.map-display > div {
  width: 100%;
  height: 100%;
  display: block;
}

/* Neighbourhood pane */
.neighbourhood {
  width: 100%;
  display: block;           /* simple block flow on mobile */
  padding: 10px 0;
  margin-top: 0;            /* no forced spacing on mobile; grid gap handles it */
}

.neighbourhood h3 { display: block; }

/* --------- Breakpoints (progressive enhancement) --------- */

/* ~640px (optional small bump) */
@media (min-width: 40rem) {
  .map-display { min-height: clamp(320px, 45vh, 460px); }
}

/* ~768px: switch to 2 columns (map 2/3, copy 1/3) */
@media (min-width: 48rem) {
  .location {
    grid-template-columns: 2fr 1fr;
    align-items: stretch;
  }
  .neighbourhood {
    padding: 20px;          /* add breathing room when we have space */
    margin-top: 0;          /* grid layout handles spacing */
    display: flex;          /* center content nicely */
    flex-direction: column;
    justify-content: center;
  }
}

/* ~1024px: comfortable desktop */
@media (min-width: 64rem) {
  .map-display { min-height: 420px; }
}