/* ============================================================================
   GREENTECH REAL ESTATE — „Viața la 15 minute" (css/neighborhood.css)
   Scoped to .gt-nbh (+ its Leaflet divIcon/tooltip classes, which live inside
   the map container). Recreates the noir & gold Leaflet skin locally: the
   project pages don't carry dezvoltari.html's inline map styles.
   ============================================================================ */

/* ---- Split layout: editorial list | mini-map ------------------------------ */
.gt-nbh {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 4vw, 3.75rem);
  align-items: start;
}

/* ---- Left: the list -------------------------------------------------------- */
.gt-nbh__list { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.gt-nbh__group { margin: 0; }

.gt-nbh__cat {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 var(--space-2);
  font: 600 11px/1 var(--font-sans);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}
/* category dot — same tint as its map pins (--c set inline) */
.gt-nbh__cat::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c, var(--gold));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c, var(--gold)) 18%, transparent);
}

.gt-nbh__rows { list-style: none; margin: 0; padding: 0; }
.gt-nbh__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-5);
  padding: 14px 12px;              /* comfortable hover/tap zone */
  margin: 0 -12px;
  border-bottom: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: background var(--dur-1);
}
.gt-nbh__group .gt-nbh__rows li:last-child { border-bottom: 0; }
.gt-nbh__row:hover { background: color-mix(in oklab, var(--bone) 4%, transparent); }

.gt-nbh__txt { min-width: 0; }
.gt-nbh__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
  color: var(--text);
}
.gt-nbh__note {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-300);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 44ch;
}

/* time — mono gold, right-aligned, with the little walker/car pictogram */
.gt-nbh__time {
  display: inline-flex; align-items: center; justify-content: flex-end;
  gap: 6px; flex-wrap: wrap;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  color: var(--gold);
  white-space: nowrap;
  text-align: right;
}
.gt-nbh__time svg { opacity: 0.8; flex: none; }
.gt-nbh__by {
  flex-basis: 100%;
  font: 500 9px/1.4 var(--font-sans);
  font-style: normal;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint);
  text-align: right;
}

/* ---- Right: the map -------------------------------------------------------- */
.gt-nbh__mapcol { min-width: 0; }
.gt-nbh__map {
  height: 420px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  background: var(--onyx);
  /* contain Leaflet's z-index:1000 controls below the fixed site header (z:90) */
  position: relative; z-index: 0; isolation: isolate;
}
.gt-nbh__disclaimer {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-300);
  color: var(--text-faint);
}

/* ---- Collapse ≤900px: map on top, list below ------------------------------ */
@media (max-width: 900px) {
  .gt-nbh { grid-template-columns: 1fr; }
  .gt-nbh__mapcol { order: -1; margin-bottom: var(--space-5); }
  .gt-nbh__map { height: 340px; }
  .gt-nbh__row { padding: 12px 10px; margin: 0 -10px; }
}

/* ---- Leaflet skin, noir & gold (scoped) ------------------------------------ */
.gt-nbh .leaflet-container { background: var(--onyx); font-family: var(--font-sans); }
.gt-nbh .leaflet-control-zoom a { background: var(--bg-elev); color: var(--bone-soft); border-color: var(--line-soft); }
.gt-nbh .leaflet-control-zoom a:hover { background: var(--onyx-2); color: var(--gold-light); }
.gt-nbh .leaflet-control-attribution { background: color-mix(in oklab, var(--obsidian) 72%, transparent); color: var(--text-faint); }
.gt-nbh .leaflet-control-attribution a { color: var(--text-soft); }

/* popup (recreated .gt-pop, as on dezvoltari.html) */
.gt-nbh .leaflet-popup-content-wrapper, .gt-nbh .leaflet-popup-tip {
  background: var(--bg-elev); color: var(--bone);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line-soft);
}
.gt-nbh .leaflet-popup-content { margin: 12px 14px; }
.gt-nbh .gt-pop { display: flex; flex-direction: column; gap: 3px; max-width: 240px; }
.gt-nbh .gt-pop__loc {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-faint);
}
.gt-nbh .gt-pop__title { font-family: var(--font-display); font-size: var(--fs-500); color: var(--bone); }
.gt-nbh .gt-pop__meta { font-size: var(--fs-300); line-height: 1.5; color: var(--text-soft); }

/* ---- Pins ------------------------------------------------------------------ */
/* the tower — large gold pin with a subtle pulse */
.gt-nbh .gt-nbh-tower-wrap { background: none; border: 0; display: grid; place-items: center; }
.gt-nbh-tower {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold); border: 1px solid var(--obsidian);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--gold) 26%, transparent), 0 2px 10px rgba(0, 0, 0, 0.6);
  position: relative;
}
.gt-nbh-tower::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--gold) 60%, transparent);
  animation: gt-nbh-pulse 2.8s var(--ease-out) infinite;
}
@keyframes gt-nbh-pulse {
  0%   { transform: scale(0.55); opacity: 0.9; }
  70%  { transform: scale(1.5);  opacity: 0; }
  100% { transform: scale(1.5);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-nbh-tower::after { animation: none; opacity: 0; }
}

/* POI dots — tinted per category via --c (set inline by js/neighborhood.js) */
.gt-nbh .gt-nbh-poi-wrap { background: none; border: 0; display: grid; place-items: center; }
.gt-nbh-dot {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c, var(--gold));
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c, var(--gold)) 22%, transparent), 0 1px 5px rgba(0, 0, 0, 0.5);
  transition: transform var(--dur-1) var(--ease-lux);
}
/* row hover / pin hover → bump */
.gt-nbh .gt-nbh-poi-wrap.is-active .gt-nbh-dot,
.gt-nbh .gt-nbh-poi-wrap:hover .gt-nbh-dot { transform: scale(1.7); }

/* ---- Ring labels (permanent tooltips on the 5/10/15-min circles) ----------- */
.gt-nbh .gt-nbh-ringlab {
  background: color-mix(in oklab, var(--obsidian) 78%, transparent);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  box-shadow: none;
  padding: 3px 9px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}
.gt-nbh .gt-nbh-ringlab::before { display: none; } /* no tooltip arrow */