/* ============================================================
   Neighborhoods page — Mapbox GL JS version
   ============================================================ */

/* Import Mapbox GL CSS via CDN in the HTML head */

/* ── Page head ───────────────────────────────────────────── */
.nbhd-head{
  background:var(--ink); color:var(--on-dark);
  padding-top:calc(74px + clamp(3rem,7vw,5.5rem));
  padding-bottom:clamp(2rem,4vw,3.5rem);
  position:relative;
}
.nbhd-head::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--moss), transparent 60%);
}
.nbhd-head h1{ font-size:var(--step-4); margin:0 0 .7rem; }
.nbhd-head p{ font-size:var(--step-0); color:var(--on-dark-mute); max-width:52ch; margin:0; }

/* ── Main layout ─────────────────────────────────────────── */
.nbhd-layout{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  height:calc(100svh - 74px);
  position:sticky; top:74px;
  overflow:hidden;
}
@media (max-width:960px){
  .nbhd-layout{
    grid-template-columns:1fr;
    height:auto;
    position:static;
    overflow:visible;
  }
}

/* ── Sidebar ─────────────────────────────────────────────── */
.nbhd-sidebar{
  background:var(--ink); color:var(--on-dark);
  padding:1.5rem 1.25rem;
  overflow-y:auto;
  border-right:1px solid var(--line-dark);
  display:flex; flex-direction:column; gap:1.5rem;
  z-index:2;
}
@media (max-width:960px){
  .nbhd-sidebar{
    border-right:none; border-bottom:1px solid var(--line-dark);
    max-height:340px;
  }
}

.nbhd-tier__label{
  font-family:var(--ui); font-size:.68rem; font-weight:700;
  letter-spacing:0.07em; text-transform:uppercase;
  margin:0 0 .6rem; padding-bottom:.45rem;
  border-bottom:1px solid var(--line-dark);
}
.nbhd-tier__btns{
  display:flex; flex-direction:column; gap:.22rem;
}
@media (max-width:960px){
  .nbhd-tier__btns{ flex-direction:row; flex-wrap:wrap; }
}

.nbhd-btn{
  display:flex; align-items:center; gap:.6rem;
  padding:.58rem .8rem; border-radius:9px; border:none;
  background:rgba(239,238,230,0.04);
  color:var(--on-dark-mute);
  font-family:var(--ui); font-size:.8rem; font-weight:600;
  text-align:left; cursor:pointer; width:100%;
  transition:background-color .25s var(--ease-out), color .25s var(--ease-out),
             transform .2s var(--ease-out);
}
.nbhd-btn::before{
  content:''; width:7px; height:7px; border-radius:50%; flex:0 0 7px;
  background:currentColor; opacity:.45;
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.nbhd-btn:hover,.nbhd-btn:focus-visible{
  background:rgba(239,238,230,0.09); color:var(--on-dark); outline:none;
}
.nbhd-btn:hover::before,.nbhd-btn:focus-visible::before{ opacity:1; }
.nbhd-btn.is-active{
  color:var(--on-dark); transform:translateX(3px);
}
.nbhd-btn.is-active::before{ opacity:1; transform:scale(1.35); }

/* ── Map container ───────────────────────────────────────── */
.nbhd-map-col{
  position:relative; display:flex; flex-direction:column;
}
#nbhdMap{
  flex:1 1 auto;
  min-height:420px;
}
/* Mapbox attribution: keep visible but style to fit dark theme */
.mapboxgl-ctrl-attrib{
  background:rgba(10,26,32,0.75) !important;
  color:rgba(239,238,230,0.55) !important;
  font-size:.6rem !important;
}
.mapboxgl-ctrl-attrib a{ color:var(--moss-lt) !important; }
.mapboxgl-ctrl-logo{ opacity:.45 !important; filter:brightness(1.5) !important; }

/* ── Info panel ──────────────────────────────────────────── */
.nbhd-info{
  background:var(--paper);
  border-top:1px solid var(--line-light);
  padding:1.4rem 1.75rem;
  min-height:200px; max-height:260px;
  overflow-y:auto;
  display:flex; flex-direction:column; justify-content:center;
  transition:opacity .3s var(--ease-out);
  flex:0 0 auto;
}
.nbhd-info.is-empty{
  align-items:center; text-align:center; color:var(--on-light-mute);
}
.nbhd-info.is-empty p{
  font-family:var(--ui); font-size:var(--step--1);
  color:var(--on-light-mute); margin:0; max-width:38ch;
}
.nbhd-info__tier{
  font-family:var(--ui); font-size:.68rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; margin:0 0 .3rem;
}
.nbhd-info h2{ font-size:var(--step-2); margin:0 0 .5rem; line-height:1.05; }
.nbhd-info__blurb{
  font-size:var(--step--1); color:var(--on-light-mute);
  line-height:1.65; margin:0 0 .85rem; max-width:66ch;
}
.nbhd-info__notable{
  display:flex; flex-wrap:wrap; gap:.35rem;
  list-style:none; margin:0; padding:0;
}
.nbhd-info__notable li{
  font-family:var(--ui); font-size:.7rem; font-weight:600;
  padding:.22rem .6rem; border-radius:999px;
  background:var(--paper-2); border:1px solid var(--line-light);
  color:var(--on-light-mute);
}
.nbhd-info__disclaimer{
  font-family:var(--ui); font-size:.66rem; color:var(--on-light-mute);
  margin-top:.75rem; opacity:.6;
}

/* ── Disclaimer bar ──────────────────────────────────────── */
.nbhd-disclaimer-bar{
  background:var(--ink); color:var(--on-dark-mute);
  font-family:var(--ui); font-size:.7rem; line-height:1.5;
  padding:.5rem var(--gutter);
  display:flex; align-items:center; justify-content:center;
  text-align:center; border-bottom:1px solid var(--line-dark);
}

/* ── Mapbox popup override ───────────────────────────────── */
.mapboxgl-popup-content{
  background:var(--ink) !important;
  color:var(--on-dark) !important;
  border:1px solid var(--line-dark) !important;
  border-radius:10px !important;
  padding:.65rem .9rem !important;
  font-family:var(--ui) !important;
  font-size:.78rem !important;
  font-weight:600 !important;
  box-shadow:0 8px 24px -8px rgba(0,0,0,0.8) !important;
  cursor:pointer;
}
.mapboxgl-popup-tip{ border-top-color:var(--ink) !important; }
.mapboxgl-popup-close-button{ display:none !important; }

@media (max-width:960px){
  .nbhd-info{ max-height:none; min-height:180px; }
  #nbhdMap{ min-height:380px; flex:0 0 380px; }
}