/* /neighborhood: a full-viewport map under the nav, with the category rail
   and the place list laid over its left edge (the Aria at Idlewild layout),
   in Villa Montana's tokens from site.css. Loaded only on this page.

   Markers are MapLibre Markers. MapLibre positions each one with an inline
   transform on .nbx-mk itself, so that element must never get a transform or
   a transform transition of its own: that is what made pins trail the map
   while panning (5151apts commit 98794c4). Hover and active growth is on the
   .nbx-pin inside it. */

.nbx { --rail-w: 224px; --list-w: 300px; position: relative; display: grid; grid-template-columns: var(--rail-w) var(--list-w) minmax(0, 1fr); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); min-height: 560px; overflow: hidden; background: var(--linen); transition: grid-template-columns .75s var(--ease); }
.nbx[data-open="false"] { grid-template-columns: var(--rail-w) 0 minmax(0, 1fr); }

/* Rail */
.nbx__rail { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 30px 0 22px; background: var(--linen); border-right: 1px solid var(--hair); }
.nbx__head { padding: 0 22px 20px; }
.nbx__eyebrow { margin: 0; font: 400 10px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--blue); }
.nbx__head h1 { margin-top: 8px; font-size: 25px; line-height: 1.15; }
.nbx__cats { list-style: none; margin: 0; padding: 0; }
.nbx__cat { width: 100%; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 12px; min-height: 44px; padding: 10px 22px 10px 20px; background: transparent; border: 0; border-left: 2px solid transparent; text-align: left; font: 400 13px/1.3 var(--sans); letter-spacing: .02em; color: var(--taupe); transition: background-color .35s ease, border-color .35s ease, color .35s ease; }
.nbx__cat:hover { background: #EEE8DC; color: var(--ink); }
.nbx__cat[aria-pressed="true"] { background: var(--row-selected); border-left-color: var(--blue); color: var(--ink); }
.nbx__cat svg { width: 18px; height: 18px; color: var(--taupe-2); transition: color .35s ease; }
.nbx__cat[aria-pressed="true"] svg { color: var(--blue); }
.nbx__cn { font-size: 10.5px; letter-spacing: .14em; color: var(--taupe-2); font-variant-numeric: tabular-nums; }
.nbx__note { margin: auto 0 0; padding: 18px 22px 0; border-top: 1px solid var(--hair); font-size: 11px; line-height: 1.7; color: var(--taupe-2); }

/* Place list panel */
.nbx__list { grid-column: 2; grid-row: 1; width: var(--list-w); min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 30px 24px 26px; background: var(--blue); color: var(--cream); transition: opacity .5s ease .16s, transform .7s var(--ease), visibility 0s; }
.nbx[data-open="false"] .nbx__list { opacity: 0; transform: translateX(-14px); visibility: hidden; transition: opacity .3s ease, transform .7s var(--ease), visibility 0s linear .7s; }
.nbx__lh { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.nbx__lh h2 { font-size: 29px; line-height: 1.1; color: var(--cream); }
.nbx__x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 1px solid rgba(248, 245, 238, .5); color: var(--cream); transition: background-color .25s, color .25s; }
.nbx__x svg { width: 11px; height: 11px; }
.nbx__x:hover { background: var(--cream); color: var(--blue); }
.nbx__list :focus-visible { outline-color: var(--cream); }
.nbx__places { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(248, 245, 238, .2); }
.nbx__place { width: 100%; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px; min-height: 48px; padding: 11px 6px 11px 2px; background: transparent; border: 0; border-bottom: 1px solid rgba(248, 245, 238, .2); text-align: left; color: var(--cream); transition: background-color .3s ease; }
.nbx__place:hover, .nbx__place.is-on { background: rgba(248, 245, 238, .13); }
.nbx__pi { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(248, 245, 238, .16); color: var(--cream); transition: background-color .3s ease, color .3s ease; }
.nbx__pi svg { width: 13px; height: 13px; }
.nbx__place.is-on .nbx__pi, .nbx__place[aria-pressed="true"] .nbx__pi { background: var(--cream); color: var(--blue); }
.nbx__pn { font: 300 14px/1.35 var(--sans); letter-spacing: .01em; }
.nbx__pd { font: 400 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(248, 245, 238, .85); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Map */
.nbx__map { grid-column: 3; grid-row: 1; position: relative; min-width: 0; background: #F1ECE2; }
.nbx__map .nbx__canvas { position: absolute; inset: 0; } /* beats .maplibregl-map { position: relative } */
.nbx__badge, .nbx__recenter { position: absolute; top: 22px; z-index: 3; background: rgba(251, 249, 243, .94); border: 1px solid rgba(33, 29, 21, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.nbx__badge { left: 22px; margin: 0; padding: 13px 18px; box-shadow: 0 18px 40px -28px rgba(24, 20, 14, .4); pointer-events: none; font: 400 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); max-width: none; }
.nbx__badge small { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .14em; color: var(--taupe-2); }
.nbx__dot { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--blue); vertical-align: -1px; }
.nbx__recenter { right: 22px; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 14px; font: 400 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); transition: background-color .3s, color .3s, border-color .3s; }
.nbx__recenter .nbx__dot { width: 8px; height: 8px; margin: 0; }
.nbx__recenter:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.nbx__recenter:hover .nbx__dot { background: #fff; }
.nbx .map-fallback { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; margin: 0; max-width: none; padding: 24px; text-align: center; color: var(--taupe); }

/* Place card: a hover preview and the detail panel for a selected place */
.nbx__card { position: absolute; right: 64px; bottom: 34px; z-index: 6; width: 310px; max-width: calc(100% - 96px); padding: 18px 22px 18px; background: rgba(251, 249, 243, .97); border: 1px solid rgba(33, 29, 21, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 22px 50px -30px rgba(24, 20, 14, .45); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .22s ease, transform .3s var(--ease), visibility 0s linear .3s; }
.nbx__card.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .3s var(--ease), visibility 0s; }
.nbx__ch { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.nbx__card h3 { font-size: 23px; line-height: 1.15; }
.nbx__cx { flex: none; width: 32px; height: 32px; margin: -6px -10px 0 0; display: grid; place-items: center; background: none; border: 0; color: var(--taupe); }
.nbx__cx svg { width: 11px; height: 11px; }
.nbx__cx:hover { color: var(--ink); }
.nbx__cm { margin: 8px 0 0; font: 400 10px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.nbx__cb { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--taupe); }
.nbx__cl { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; }
.nbx__cl a { display: inline-flex; align-items: center; min-height: 28px; font: 400 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); text-decoration: none; border-bottom: 1px solid rgba(95, 87, 72, .35); }
.nbx__cl a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.nbx__cl a.nbx__dir { color: var(--blue); border-bottom-color: rgba(59, 88, 120, .5); }
.nbx__cl a.nbx__dir:hover { color: var(--night); border-bottom-color: var(--night); }
.nbx__cl a span[aria-hidden] { margin-left: 8px; }

/* Markers (positioned by MapLibre: no transform or transform transition here) */
.nbx-mk { display: block; width: 30px; height: 30px; padding: 0; margin: 0; background: none; border: 0; cursor: pointer; transition: opacity .2s; }
.nbx-mk:focus-visible { outline: none; }
.nbx-pin { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box; background: var(--night); color: var(--cream); border: 1.5px solid #fff; box-shadow: 0 2px 9px rgba(20, 20, 20, .3); transition: transform .45s var(--ease), background-color .35s ease, box-shadow .35s ease; }
.nbx-pin svg { width: 15px; height: 15px; }
.nbx-mk.is-on .nbx-pin { transform: scale(1.25); background: var(--blue); box-shadow: 0 0 0 6px rgba(59, 88, 120, .22), 0 4px 12px rgba(20, 20, 20, .3); }
.nbx-mk:focus-visible .nbx-pin { outline: 2px solid var(--blue); outline-offset: 3px; }
.nbx-home { display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.nbx-home__m { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); border: 2px solid var(--cream); box-shadow: 0 12px 26px -9px rgba(38, 44, 53, .6); }
.nbx-home__m img { width: 22px; height: auto; }
.nbx-home__g { width: 9px; height: 9px; border-radius: 50%; background: var(--night); box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); }

/* MapLibre chrome, themed */
.nbx .maplibregl-map { font-family: var(--sans); }
.nbx .maplibregl-canvas { outline: none; }
.nbx .maplibregl-ctrl-group { background: #fff; border: 1px solid rgba(33, 29, 21, .16); box-shadow: none; border-radius: 0; }
.nbx .maplibregl-ctrl-group button { width: 34px; height: 34px; border-radius: 0; }
.nbx .maplibregl-ctrl-group button:hover { background: var(--blue); }
.nbx .maplibregl-ctrl-group button:hover .maplibregl-ctrl-icon { filter: invert(1) brightness(1.6); }
.nbx .maplibregl-ctrl-bottom-right { right: 12px; bottom: 22px; }
.nbx .maplibregl-ctrl-attrib-inner { font-size: 10px; color: var(--taupe-2); }
.nbx .maplibregl-ctrl-attrib-inner a { color: var(--blue); }
.nbx .maplibregl-cooperative-gesture-screen { background: rgba(33, 29, 21, .42); font: 400 12px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); }

/* Driving directions, under the map */
.nbx-dir { padding: 22px 0 26px; border-top: 1px solid var(--hair); }
.nbx-dir p { max-width: none; margin: 0; font-size: 13px; line-height: 1.7; }
.nbx-dir b { font-weight: 400; color: var(--ink); }

/* Tablet: narrower columns */
@media (max-width: 1120px) and (min-width: 901px) {
  .nbx { --rail-w: 200px; --list-w: 270px; }
}

/* Phone (Aria's phone layout): map first, then the categories as a wrapped
   chip row, then the place list; the card is a bottom sheet. The list starts
   closed (data-open="auto") so the map owns the screen. */
@media (max-width: 900px) {
  .nbx, .nbx[data-open="false"] { display: flex; flex-direction: column; height: auto; min-height: 0; overflow: visible; }
  .nbx__map { order: 1; height: 64vh; height: 64svh; min-height: 360px; flex: none; }
  .nbx__rail { order: 2; flex-direction: row; flex-wrap: wrap; gap: 8px; overflow: visible; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--hair); }
  .nbx__head { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nbx__cats { display: flex; flex-wrap: wrap; gap: 8px; }
  .nbx__cat { width: auto; min-height: 48px; padding: 10px 13px; gap: 9px; grid-template-columns: 18px auto auto; border: 1px solid var(--hair); border-left-width: 1px; }
  .nbx__cat[aria-pressed="true"] { border-color: var(--blue); }
  .nbx__note { flex-basis: 100%; margin: 4px 0 0; padding: 0; border: 0; }
  .nbx__list { order: 3; width: 100%; max-height: 42vh; padding: 18px 16px 12px; }
  .nbx__list, .nbx[data-open="false"] .nbx__list { opacity: 1; transform: none; visibility: visible; transition: none; }
  .nbx[data-open="auto"] .nbx__list, .nbx[data-open="false"] .nbx__list { display: none; }
  .nbx__lh h2 { font-size: 23px; }
  .nbx__x { width: 44px; height: 44px; margin: -8px -8px 0 0; }
  .nbx__place { min-height: 44px; padding: 8px 4px 8px 2px; }
  .nbx__badge { left: 12px; top: 12px; padding: 10px 13px; font-size: 10px; }
  .nbx__recenter { right: 12px; top: 12px; min-height: 44px; }
  .nbx__card { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; width: auto; max-width: none; padding: 18px 20px calc(22px + env(safe-area-inset-bottom)); border: 0; border-top: 2px solid var(--blue); box-shadow: 0 -18px 44px -26px rgba(24, 20, 14, .5); }
  .nbx__cx { width: 44px; height: 44px; margin: -12px -14px 0 0; }
  .nbx__cl { gap: 10px; }
  .nbx__cl a { min-height: 44px; }
  .nbx__cl a.nbx__dir { flex-basis: 100%; justify-content: center; min-height: 46px; padding: 0 18px; background: var(--blue); color: #fff; border: 0; }
  .nbx .maplibregl-ctrl-group button { width: 40px; height: 40px; }
  .nbx__cat, .nbx__place { transition-duration: .12s; }
}

@media (prefers-reduced-motion: reduce) {
  .nbx, .nbx__list, .nbx__cat, .nbx__place, .nbx__pi, .nbx__card, .nbx-pin, .nbx__recenter { transition: none !important; }
}