/* ============================================================
   PMCK — Locations: a map beside a list, linked both ways.
   Shared by the homepage and the contact page so the two
   cannot drift apart. Each page still styles its own cards;
   this file only owns the arrangement and the selected state.
   ============================================================ */

.pmck-loc{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:26px;align-items:start;
}
.pmck-loc.is-nomap{grid-template-columns:1fr;}

/* The map stays put while the list scrolls, so a place can be read
   without losing sight of where it is. */
.pmck-loc__mapwrap{position:sticky;top:24px;}
.pmck-loc__map{
  height:560px;border-radius:14px;overflow:hidden;background:var(--brand-pale);
}
.pmck-loc__map .leaflet-container{height:100%;width:100%;font:inherit;}

.pmck-loc__list{
  list-style:none;margin:0;display:grid;grid-template-columns:1fr;gap:14px;
  max-height:560px;overflow-y:auto;scroll-behavior:smooth;
  /* Room for the focus ring and the hover shadow, which a flush edge clips. */
  padding:2px 4px 2px 2px;
}

/* The selected state, whatever the card itself looks like. */
.pmck-loc [data-pmck-loc]{
  cursor:pointer;border-left:4px solid transparent;
  transition:border-color .15s, box-shadow .15s;
}
.pmck-loc [data-pmck-loc]:hover{border-color:var(--brand);}
.pmck-loc [data-pmck-loc]:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.pmck-loc [data-pmck-loc].is-active{
  border-left-color:var(--accent);box-shadow:0 4px 16px rgba(0,0,0,.09);
}

/* A centre that has not opened yet. */
.pmck-loc__soon{
  display:inline-block;vertical-align:middle;margin-left:10px;
  background:var(--accent);color:#fff;border-radius:999px;
  padding:3px 12px;font-size:16px;font-weight:700;letter-spacing:.02em;
}
.pmck-loc__soonnote{margin:14px 0 0;font-size:18px;line-height:1.55;color:var(--body);}

@media (max-width:900px){
  /* One column: the map stops sticking and the list stops being its own
     scroller, or you get a scrollbar inside a scrollbar on a phone. */
  .pmck-loc{grid-template-columns:1fr;gap:20px;}
  .pmck-loc__mapwrap{position:static;}
  .pmck-loc__map{height:340px;}
  .pmck-loc__list{max-height:none;overflow:visible;}
}