/* ==========================================================================
   beale horton — Care Locations
   Patterned on carbonhealth.com/locations (finder: list + map split)
   and cityofhope.org/locations (browse by type / region).
   Reuses tokens from home.css.
   ========================================================================== */

/* active nav link */
.site-nav__link[aria-current="page"]{ color:var(--accent); opacity:1; }
.site-nav__link[aria-current="page"]::after{
  content:''; display:block; height:2px; margin-top:2px;
  background:var(--gold); border-radius:2px;
}

/* ---------- hero ---------- */
.loc-hero{ background:var(--cream); padding:72px 0 56px; }
.loc-hero h1{
  font-size:calc(clamp(36px, 4.4vw, 58px) * var(--type-scale));
  line-height:1.05; max-width:760px;
}
.loc-hero__sub{ margin-top:20px; max-width:600px; font-size:17px; line-height:1.7; color:var(--ink-soft); }

.loc-finder{ margin-top:36px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.loc-search{
  flex:1 1 320px; display:flex; align-items:center; gap:12px;
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-pill);
  padding:0 8px 0 20px; height:56px;
}
.loc-search svg{ width:20px; height:20px; color:var(--ink-soft); flex:none; }
.loc-search input{
  flex:1; border:0; outline:0; background:transparent;
  font-family:var(--font-body); font-size:16px; color:var(--ink); min-width:0;
}
.loc-search input::placeholder{ color:var(--ink-soft); opacity:.7; }
.loc-search select{
  border:0; outline:0; background:var(--tint); color:var(--ink);
  font-family:var(--font-body); font-size:14px; font-weight:600;
  border-radius:var(--r-pill); height:40px; padding:0 14px; cursor:pointer;
}

/* type filter chips */
.loc-types{ display:flex; flex-wrap:wrap; gap:10px; }
.loc-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--white); border:1.5px solid var(--line); border-radius:10px;
  padding:0 20px; height:44px; font-size:14px; font-weight:600; color:var(--ink);
  cursor:pointer; transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.loc-chip:hover{ border-color:var(--accent); color:var(--accent); }
.loc-chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--white); }

/* ---------- location cards (City of Hope-style centered grid) ---------- */
.loc-body{ padding:72px 0 40px; }
.loc-body__title{
  text-align:center; margin-bottom:48px;
  font-size:calc(clamp(30px, 3.6vw, 44px) * var(--type-scale));
}
.loc-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px;
  max-width:1160px; margin:0 auto;
}
.loc-card{
  display:grid; grid-template-columns:200px minmax(0,1fr); gap:26px; align-items:center;
  background:var(--white); border:1.5px solid var(--line); border-radius:14px;
  padding:22px; transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.loc-card:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 28px rgba(13,43,107,.08); }
.loc-card__photo{ border-radius:10px; overflow:hidden; height:150px; }
.loc-card__photo image-slot, .loc-card__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.loc-card__body{ min-width:0; }
.loc-card h3{ font-size:23px; }
.loc-card__addr{ margin-top:4px; font-size:15px; color:var(--ink-soft); }
.loc-card__kind{ margin-top:10px; font-size:15px; font-weight:700; color:var(--ink); }
.loc-card__tel{ display:inline-block; margin-top:12px; font-size:16px; font-weight:600; color:var(--accent); }
.loc-card__tel:hover{ color:var(--accent-dark); text-decoration:underline; }

/* full-width network map */
.loc-network{ padding:40px 0 var(--section-y); }
.loc-network__grid{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:32px; align-items:start; }
.loc-filter h4{ margin-top:26px; font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.loc-filter__head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:14px; border-bottom:1.5px solid var(--line);
  font-size:15px; color:var(--ink-soft);
}
.loc-filter__head b{ color:var(--ink); }
.loc-filter__reset{
  border:0; background:none; color:var(--accent); font-family:var(--font-body);
  font-size:15px; font-weight:600; cursor:pointer; padding:0;
}
.loc-filter__reset:hover{ color:var(--accent-dark); text-decoration:underline; }
.loc-types{ display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.loc-check{ display:flex; align-items:center; gap:12px; font-size:15px; color:var(--ink); cursor:pointer; }
.loc-check input{ width:18px; height:18px; accent-color:var(--accent); cursor:pointer; }
.loc-map__frame{
  border-radius:14px; overflow:hidden; border:1.5px solid var(--line);
  height:520px; background:var(--tint); position:relative;
}
#loc-map-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; font-family:var(--font-body); }
.leaflet-popup-content-wrapper{ border-radius:12px; font-family:var(--font-body); }
.leaflet-popup-content{ font-size:13.5px; line-height:1.5; color:var(--ink); }

/* map pins */
.loc-pin{
  display:block; width:22px; height:22px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); transform-origin:center;
  border:2.5px solid var(--white); box-shadow:0 2px 8px rgba(13,43,107,.35);
}
.loc-pin--clinic{ background:var(--accent); }
.loc-pin--school{ background:#1a7f4e; }
.loc-pin--community{ background:#d24b6a; }

.loc-map__legend{
  display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; margin-top:14px;
  font-size:13px; color:var(--ink-soft);
}
.loc-map__legend span{ display:inline-flex; align-items:center; gap:7px; }
.loc-map__legend .pin{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.loc-map__legend .pin--clinic{ background:var(--accent); }
.loc-map__legend .pin--school{ background:#1a7f4e; }
.loc-map__legend .pin--community{ background:#d24b6a; }
.loc-map__note{ margin-top:10px; font-size:13px; color:var(--ink-soft); text-align:center; }
.loc-card.is-hidden{ display:none; }

/* region group headers (City of Hope-style browse) */
.loc-region{ margin:34px 0 14px; display:flex; align-items:baseline; gap:12px; }
.loc-region:first-of-type{ margin-top:0; }
.loc-region h2{ font-size:24px; }
.loc-region span{ font-size:13.5px; color:var(--ink-soft); }
.loc-region.is-hidden{ display:none; }

/* empty state */
.loc-empty{
  display:none; text-align:center; padding:64px 24px;
  background:var(--cream); border-radius:var(--r-card);
}
.loc-empty.is-visible{ display:block; }
.loc-empty h3{ font-size:22px; }
.loc-empty p{ margin-top:10px; color:var(--ink-soft); font-size:15px; }

/* ---------- existing patients ---------- */
.loc-existing__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.loc-existing__head p{ margin-top:14px; max-width:620px; font-size:16px; line-height:1.7; color:var(--ink-soft); }
.loc-existing__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:44px; }
.loc-pcard{
  display:flex; flex-direction:column; background:var(--white);
  border:1.5px solid var(--line); border-radius:var(--r-card); padding:28px;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.loc-pcard:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 28px rgba(13,43,107,.08); }
.loc-pcard__icon{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:46px; height:46px; border-radius:12px; background:var(--tint); color:var(--accent);
}
.loc-pcard__icon svg{ width:23px; height:23px; }
.loc-pcard h3{ margin-top:18px; font-size:20px; }
.loc-pcard p{ margin-top:8px; font-size:14.5px; line-height:1.65; color:var(--ink-soft); }
.loc-pcard .text-link{ margin-top:16px; align-self:flex-start; }

@media (max-width:820px){
  .loc-existing__grid{ grid-template-columns:1fr; }
}

/* ---------- how a referral works strip ---------- */
.loc-refer{ background:var(--cream); }
.loc-refer__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:44px; }
.loc-step{ background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-card); padding:28px; }
.loc-step b{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:var(--tint); color:var(--accent);
  font-size:15px; font-weight:700;
}
.loc-step h3{ margin-top:16px; font-size:19px; }
.loc-step p{ margin-top:8px; font-size:14.5px; line-height:1.65; color:var(--ink-soft); }

/* ---------- join the network band ---------- */
.loc-join{ background:var(--deep); color:var(--white); }
.loc-join .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.loc-join h2{ color:var(--white); }
.loc-join p{ margin-top:16px; color:var(--deep-tint); font-size:16px; line-height:1.7; }
.loc-join__ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.loc-join__photo{ border-radius:var(--r-card); overflow:hidden; height:340px; }
.loc-join__photo image-slot, .loc-join__photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .loc-grid{ grid-template-columns:1fr; }
  .loc-network__grid{ grid-template-columns:1fr; }
  .loc-map__frame{ height:360px; }
}
@media (max-width:820px){
  .loc-refer__grid{ grid-template-columns:1fr; }
  .loc-join .wrap{ grid-template-columns:1fr; }
  .loc-join__photo{ height:240px; }
}
@media (max-width:640px){
  .loc-card{ grid-template-columns:1fr; }
  .loc-card__photo{ height:170px; }
}