/* /neighborhood: the full-viewport map with its place card. Behaviour lives in
   assets/js/neighborhood.js. Loaded only on this page. */
.location-map-section{height:100vh;height:100svh;min-height:640px;position:relative;background:var(--panel);padding:calc(var(--nav-h) + 24px) 24px 24px;overflow-anchor:none}
.location-map-canvas{position:absolute;inset:0;z-index:0}
.location-map-section[data-interactive="false"] .location-map-canvas{pointer-events:none}
/* Before "Explore map" the page scrolls through the map, and the pins still answer. */
.location-map-marker{pointer-events:auto}

/* The same control invites and exits. */
.map-interaction-toggle{position:absolute;z-index:4;right:64px;top:calc(var(--nav-h) + 24px);width:210px;max-width:calc(100% - 44px);padding:14px 18px;border:1px solid var(--rule);text-align:left;background:var(--paper);color:var(--ink);box-shadow:var(--shadow-float);cursor:pointer;touch-action:manipulation;transition:background-color .3s ease}
.map-toggle-title{display:block;font-family:var(--serif);font-size:20px;line-height:1.1}
.map-interaction-toggle:hover{background:var(--mist)}

/* The card: the brand navy panel with the place list. */
.location-map-card{position:relative;z-index:2;width:386px;max-width:100%;max-height:calc(100svh - var(--nav-h) - 48px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:28px 24px 22px;background:var(--charcoal);color:var(--cream);filter:drop-shadow(0 8px 24px rgba(24,20,14,.18))}
.location-map-card :focus-visible,.map-drawer-toggle:focus-visible{outline-color:var(--sage-hover)}
.location-map-card h1{font-size:34px;line-height:1.1;color:var(--cream);margin:0 0 20px}
.location-map-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.location-map-filters button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--cream) 40%,transparent);background:transparent;color:var(--cream);font-size:12.5px;font-weight:400;line-height:1.2;cursor:pointer;transition:background-color .25s ease,color .25s ease}
.location-map-filters button svg{flex:none}
.location-map-filters button:hover{background:var(--accent-hover)}
.location-map-filters button[aria-pressed="true"]{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.location-map-search{display:block}
.location-map-search input{width:100%;border:0;border-bottom:1px solid color-mix(in srgb,var(--cream) 60%,transparent);border-radius:0;background:transparent;color:var(--cream);font:inherit;font-size:14px;padding:12px 0}
.location-map-search input::placeholder{color:color-mix(in srgb,var(--cream) 80%,transparent)}
.location-place-list{display:grid}
.location-place-list button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:11px 8px 11px 0;border:0;border-bottom:1px solid color-mix(in srgb,var(--cream) 14%,transparent);background:none;color:inherit;font-size:14px;font-weight:400;line-height:1.4;text-align:left;cursor:pointer;transition:background-color .2s ease}
.location-place-list button>span:first-child{display:grid;place-items:center;min-width:16px;color:color-mix(in srgb,var(--cream) 80%,transparent)}
.location-place-list button>span:first-child svg{display:block}
.location-place-list button:hover{background:var(--accent-hover)}
.location-place-list button[aria-pressed="true"]{font-weight:500}
.location-place-list button[aria-pressed="true"]>span:first-child{color:var(--cream)}
.location-place{margin-top:20px;animation:place-reveal .45s cubic-bezier(.4,0,.2,1)}
.location-place small{font-size:12px;color:color-mix(in srgb,var(--cream) 80%,transparent)}
.location-place h3{font-size:24px;line-height:1.2;color:var(--cream);margin:6px 0 8px}
.location-place p{font-size:13.5px;line-height:1.6;margin:0 0 6px}
.location-place a{display:inline-block;margin:8px 0;font-size:13px;border-bottom:1px solid currentColor}
.location-place-links{display:flex;flex-wrap:wrap;gap:0 20px}
@keyframes place-reveal{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.location-map-reset{min-height:44px;padding:10px 0;border:0;border-bottom:1px solid color-mix(in srgb,var(--cream) 60%,transparent);background:none;color:var(--cream);font-size:13px;cursor:pointer}
.location-map-note{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:color-mix(in srgb,var(--cream) 85%,transparent)}
.location-map-note:empty{display:none}

/* Pins */
.location-map-marker{width:40px;height:40px;padding:0;border:1px solid color-mix(in srgb,var(--white) 60%,transparent);border-radius:50%;background:var(--charcoal);color:var(--white);font-size:16px;font-family:var(--sans);cursor:pointer}
.location-map-marker:not(.is-home){display:grid;place-items:center}
.location-map-marker:not(.is-home) svg{display:block}
.location-map-marker.is-home{z-index:6;width:64px;height:44px;display:grid;place-items:center;border-radius:0;background:var(--pine);color:var(--cream)}
.location-map-marker.is-home svg{width:50px;height:auto;display:block}
.location-map-marker.is-selected{background:var(--white);color:var(--ink);outline:5px solid color-mix(in srgb,var(--white) 15%,transparent);z-index:5}
.location-map-marker.is-home.is-selected{background:var(--pine);color:var(--cream)}
.location-map-marker[hidden]{display:none}
/* MapLibre positions each marker with an inline transform on this element, so it
   must never get a transform or a transform transition of its own (that is what
   makes pins trail the map while panning). Hover grows the icon inside. */
.location-map-marker{transition:background-color .2s,border-color .2s,color .2s}
.location-map-marker svg{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.location-map-marker.is-hovered:not(.is-selected){background:var(--pine);border-color:var(--white);z-index:4}
.location-map-marker.is-hovered:not(.is-selected):not(.is-home) svg{transform:scale(1.15)}

/* Hover preview card: sits beside its pin. */
.map-peek{position:absolute;top:0;left:0;z-index:6;width:264px;padding:16px 18px 12px;background:var(--white);color:var(--ink);border:1px solid var(--rule);box-shadow:var(--shadow-float);opacity:0;transition:opacity .22s cubic-bezier(.16,1,.3,1)}
.map-peek[data-shown="true"]{opacity:1}
.map-peek[hidden]{display:none}
.map-peek small{font-size:12px;color:var(--muted)}
.map-peek h3{font-size:22px;line-height:1.2;margin:4px 0 6px}
.map-peek p{font-size:13px;line-height:1.55;margin:0;color:var(--muted)}
.map-peek-links{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:10px}
.map-peek-links a{padding:6px 0;font-size:13px;color:var(--pine);border-bottom:1px solid currentColor}
@media (hover:none){.map-peek{display:none}}
@media (prefers-reduced-motion:reduce){.map-peek,.location-map-marker,.location-map-marker svg,.map-interaction-toggle,.map-toggle-title,.map-drawer-content{transition:none}.location-place{animation:none}}
.location-map-section .maplibregl-ctrl-top-right{top:calc(var(--nav-h) + 24px);right:20px}
.maplibregl-canvas:focus-visible{outline:2px solid var(--pine);outline-offset:-2px}
.map-drawer-toggle,.map-mobile-selection{display:none}

/* Phones: the card is a drawer at the foot of the map. */
@media (max-width:900px){
  .location-map-section{padding:0;overflow:hidden}
  .location-map-canvas{height:100%;bottom:0}
  .map-interaction-toggle{top:calc(var(--nav-h) + 16px);right:64px;width:180px;padding:10px 14px}
  .map-toggle-title{font-size:17px}
  .location-map-card{position:absolute;z-index:3;left:16px;bottom:20px;width:calc(100% - 32px);max-height:62svh;padding:0;overflow:clip}
  .map-drawer-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:16px 20px;border:0;background:var(--pine);color:var(--cream);font-family:var(--serif);font-size:22px;cursor:pointer}
  .map-mobile-selection{display:block;margin:0;padding:0 20px 16px;font-size:13px;color:color-mix(in srgb,var(--cream) 85%,transparent)}
  .map-drawer-content{display:block;max-height:0;padding:0 20px;opacity:0;visibility:hidden;overflow:hidden;overscroll-behavior:contain;transition:max-height .55s cubic-bezier(.65,0,.35,1),opacity .3s ease,visibility .55s}
  /* Open, the card is a bottom sheet pinned to the viewport. */
  .location-map-card[data-open="true"]{position:fixed;left:16px;right:16px;bottom:20px;width:auto;z-index:4005}
  .location-map-card[data-open="true"] .map-drawer-content{max-height:calc(62svh - 56px);padding-bottom:24px;opacity:1;visibility:visible;overflow-y:auto}
  .location-map-card[data-open="true"] .map-mobile-selection{display:none}
  .location-map-card h1{font-size:26px;margin-bottom:14px}
  .location-map-search input{font-size:16px}
  /* The drawer lists the places; the expanded detail block is redundant there. */
  .location-map-card .location-place{display:none}
  .location-map-section .maplibregl-ctrl-bottom-right{bottom:0}
}