/* ============================================================
   THINGS TO DO — page styles.
   The comp's styled contour-map placeholder is now a real
   Leaflet map inside the same .mapfield frame; pin, legend and
   listing styling carried over from the approved comp.
   NOTE: the structural map/pin/listing styles here are shared —
   stay.html links this file too (stay.css adds its category
   colors on top), so keep changes page-agnostic.
   ============================================================ */

.listings__count { font-size:0.85rem; color:#6a6b62; font-weight:600; }
.listings__count strong { color:var(--spruce); }

/* ---------------- MAP FIELD (Leaflet host) ---------------- */
.mapfield { position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--hairline); background:linear-gradient(160deg,#dfe4d8 0%,#e9e4d8 55%,#e4dccb 100%); min-height:520px; box-shadow:var(--shadow-card); }
.mapfield #map { position:absolute; inset:0; z-index:1; background:transparent; font:inherit; }
.mapfield__fallback { position:absolute; inset:0; display:grid; place-items:center; padding:2rem; text-align:center; color:#5a5b52; font-size:0.9rem; z-index:0; }

/* Warm the neutral basemap toward the limestone palette */
.mapfield .leaflet-tile-pane { filter:sepia(0.18) saturate(0.85) hue-rotate(-6deg); }

/* Leaflet control styling to match the design system */
.mapfield .leaflet-control-zoom { border:1px solid var(--hairline); border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(36,59,50,0.12); }
.mapfield .leaflet-control-zoom a { width:34px; height:34px; line-height:34px; background:var(--paper); color:var(--spruce); border-bottom:1px solid var(--hairline); font-family:'Public Sans',sans-serif; }
.mapfield .leaflet-control-zoom a:last-child { border-bottom:0; }
.mapfield .leaflet-control-zoom a:hover { background:var(--limestone-soft); color:var(--spruce); }
.mapfield .leaflet-control-scale-line { background:rgba(255,255,255,0.85); border-color:#5a5b52; color:#5a5b52; font-weight:600; font-size:0.6875rem; font-family:'Public Sans',sans-serif; }
.mapfield .leaflet-control-attribution { background:rgba(255,255,255,0.8); color:#6a6b62; font-size:0.625rem; font-family:'Public Sans',sans-serif; }
.mapfield .leaflet-control-attribution a { color:var(--ridge); }

/* ---------------- PINS (Leaflet divIcon) ----------------
   Leaflet positions the outer .leaflet-marker-icon via transform,
   so all visual styling lives on the inner .pin element. */
.pin-anchor { background:none; border:0; }
.pin { position:relative; width:26px; height:32px; cursor:pointer; }
.pin svg { display:block; filter:drop-shadow(0 3px 5px rgba(28,30,24,0.28)); transition:transform 0.16s var(--ease), filter 0.16s; transform-origin:50% 100%; }
.pin:hover svg,
.pin.is-active svg,
.leaflet-marker-icon:focus-visible .pin svg { transform:translateY(-3px) scale(1.12); }
.pin.is-active svg { filter:drop-shadow(0 6px 10px rgba(28,30,24,0.4)); }
.pin__label { position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:4px; white-space:nowrap; font-size:0.6875rem; font-weight:700; color:var(--spruce); background:rgba(239,235,227,0.95); padding:2px 8px; border-radius:4px; opacity:0; transition:opacity 0.14s; pointer-events:none; box-shadow:0 2px 6px rgba(28,30,24,0.15); }
.pin:hover .pin__label,
.pin.is-active .pin__label,
.leaflet-marker-icon:focus-visible .pin__label { opacity:1; }
.leaflet-marker-icon:focus-visible { outline:2px solid var(--goldenrod); outline-offset:2px; border-radius:4px; }

.cat-history  { --pin:var(--clay); }
.cat-outdoors { --pin:var(--ridge); }
.cat-food     { --pin:var(--goldenrod); }

/* ---------------- LEGEND (overlay above Leaflet panes) ---------------- */
.map-legend { position:absolute; left:14px; bottom:14px; z-index:1000; background:rgba(255,255,255,0.94); border:1px solid var(--hairline); border-radius:8px; padding:0.7rem 0.9rem; display:grid; gap:0.4rem; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); box-shadow:0 6px 18px rgba(36,59,50,0.12); pointer-events:none; }
.map-legend__row { display:flex; align-items:center; gap:0.5rem; font-size:0.75rem; font-weight:600; color:var(--spruce); }
.map-legend__row i { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* ---------------- SPLIT: map + listings ---------------- */
.explore-split { display:grid; grid-template-columns:1.15fr 0.85fr; gap:1.75rem; padding-block:2rem 4rem; align-items:start; }
.explore-map { position:sticky; top:1.5rem; }
.listings { display:grid; gap:1rem; }
.listing { display:grid; grid-template-columns:104px 1fr; gap:1rem; background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden; transition:transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s; scroll-margin-top:96px; }
.listing:hover,.listing.is-active { transform:translateY(-2px); box-shadow:var(--shadow-card-hover); border-color:rgba(36,59,50,0.28); }
.listing.is-active { outline:2px solid var(--goldenrod); outline-offset:-1px; }
.listing__media { position:relative; overflow:hidden; }
.listing__media .duo-img { position:absolute; inset:0; transition:transform 0.5s var(--ease); }
.listing:hover .listing__media .duo-img { transform:scale(1.06); }
.listing__cat { position:absolute; left:6px; top:6px; z-index:3; font-size:0.5625rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#fff; padding:2px 6px; border-radius:3px; }
.listing__body { padding:0.9rem 1rem 0.9rem 0; display:flex; flex-direction:column; gap:0.2rem; }
.listing__body h3 { font-size:1.1rem; }
.listing__body p { font-size:0.85rem; color:#4a4b44; line-height:1.5; }
.listing__loc { margin-top:0.35rem; font-size:0.75rem; color:#6a6b62; display:inline-flex; align-items:center; gap:0.35rem; }
.listing__loc svg { flex:none; }
.bg-history { background:var(--clay); }
.bg-outdoors { background:var(--ridge); }
.bg-food { background:var(--goldenrod); color:var(--spruce) !important; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:960px) {
  .explore-split { grid-template-columns:1fr; }
  .explore-map { position:static; }
}
@media (max-width:560px) {
  .listing { grid-template-columns:84px 1fr; }
  .mapfield { min-height:420px; }
  .toolbar { align-items:flex-start; }
}