/* ============================================================
   LAS BRISAS ESTATES — community map / lot-popup / legend styles
   Loaded only on pages that include the #community-map section
   (index.php, and every per-listing XXX.php page).
   ============================================================ */

:root{
  /* Matched to the color key baked into the SVG map artwork itself,
     so the interactive lot fills agree with the legend drawn on the
     map. */
  --map-available:#0add8c;
  --map-coming-soon:#a4d2f4;
  --map-future:#c4cca2;
  --map-sold:#bc5e1e;
  --map-unavailable:#3a3f47;
}

/* Section intro + legend */
.lb-map-intro{color:var(--muted);max-width:640px;margin-bottom:2rem;font-weight:300;line-height:1.7}
.lb-map-legend{display:flex;flex-wrap:wrap;gap:1.75rem;margin-bottom:2.5rem}
.lb-legend-item{display:inline-flex;align-items:center;gap:0.55rem;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.lb-legend-item i{width:12px;height:12px;border-radius:2px;display:inline-block}
.lb-legend-item i[data-state="available"]{background:var(--map-available)}
.lb-legend-item i[data-state="coming-soon"]{background:var(--map-coming-soon)}
.lb-legend-item i[data-state="future-release"]{background:var(--map-future)}
.lb-legend-item i[data-state="sold"]{background:var(--map-sold)}
.lb-legend-item i[data-state="unavailable"]{background:var(--map-unavailable);opacity:0.5}

/* Map wrapper — position:relative anchors the popup.
   Bleeds edge-to-edge (like the hero photo) by pulling out of the
   section's own side padding with negative margins, rather than
   sitting inside the site's usual 1200px .max-w column. */
.lb-map-wrap{position:relative;background:var(--surface);border:1px solid var(--border);padding:1.5rem;margin:0 -3rem}
.lb-map-wrap svg{width:100%;height:auto;display:block}
.lb-map-loading,.map-error{color:var(--muted);font-size:0.85rem;text-align:center;padding:3rem 0}

/* Lot states — colors applied on top of the SVG's own fill classes */
#lasBrisasMap .lb-lot{transition:fill 0.25s ease,opacity 0.25s ease,filter 0.25s ease}
#lasBrisasMap .lb-lot[data-state="available"]{fill:var(--map-available) !important}
#lasBrisasMap .lb-lot[data-state="coming-soon"]{fill:var(--map-coming-soon) !important}
#lasBrisasMap .lb-lot[data-state="future-release"]{fill:var(--map-future) !important}
#lasBrisasMap .lb-lot[data-state="sold"]{fill:var(--map-sold) !important}
#lasBrisasMap .lb-lot[data-state="unavailable"]{fill:var(--map-unavailable) !important;opacity:0.4;pointer-events:none}
#lasBrisasMap .lb-lot--interactive{cursor:pointer}
#lasBrisasMap .lb-lot--interactive:hover,
#lasBrisasMap .lb-lot--interactive:focus,
#lasBrisasMap .lb-lot--interactive.lb-lot--hover{filter:brightness(1.18);outline:none}

/* Invisible hit-area layer — sits on top of every other lot/home/
   driveway/fence/tree/label element so the FULL lot footprint is
   clickable, not just whatever sliver of the colored lot shape
   happens to peek out from under the site-plan artwork. */
#lot-hitareas > *{fill:transparent;stroke:none;pointer-events:none}
#lot-hitareas > .lb-lot-hit--interactive{pointer-events:all;cursor:pointer}
#lot-hitareas > .lb-lot-hit--interactive:focus{outline:2px solid var(--accent);outline-offset:-2px}

/* Lot popup — small, light, 80%-opacity card anchored near the clicked lot */
.map-popup{position:absolute;top:0;left:0;width:250px;background:rgba(255,255,255,0.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#1c1c1c;padding:1.1rem 1.3rem 1.2rem;border-radius:6px;box-shadow:0 12px 32px rgba(0,0,0,0.4);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity 0.18s ease,transform 0.18s ease;z-index:20;font-family:'Inter',sans-serif}
.map-popup.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.map-popup::after{content:'';position:absolute;width:14px;height:14px;background:rgba(255,255,255,0.8);left:var(--caret-left,50%);transform:translateX(-50%) rotate(45deg)}
.map-popup.caret-bottom::after{bottom:-7px}
.map-popup.caret-top::after{top:-7px}
.map-popup-close{position:absolute;top:0.5rem;right:0.6rem;background:none;border:none;color:#555;font-size:1.3rem;line-height:1;cursor:pointer;transition:color 0.2s;z-index:2}
.map-popup-close:hover{color:#000}
.map-popup-photo{margin:-1.1rem -1.3rem 0.9rem;border-radius:6px 6px 0 0;overflow:hidden;aspect-ratio:16/10;background:var(--bg2)}
.map-popup-photo img{width:100%;height:100%;object-fit:cover;display:block}
.map-popup-eyebrow{font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);margin-bottom:0.35rem}
.map-popup-address{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:500;color:#1a1a1a;margin-bottom:0.3rem;line-height:1.25;padding-right:1rem}
.map-popup-price{font-size:1.05rem;font-weight:600;color:#1a1a1a;margin-bottom:0.6rem}
.map-popup-specs{display:flex;flex-wrap:wrap;gap:0.9rem;margin-bottom:0.6rem;padding-bottom:0.6rem;border-bottom:1px solid rgba(0,0,0,0.12)}
.map-popup-spec{display:flex;flex-direction:column;gap:0.1rem}
.map-popup-spec-val{font-size:0.85rem;font-weight:600;color:#1a1a1a}
.map-popup-spec-lbl{font-size:0.62rem;letter-spacing:0.06em;text-transform:uppercase;color:#666}
.map-popup-desc{font-size:0.82rem;color:#333;line-height:1.5;margin-bottom:0.7rem}
.map-popup-cta{display:inline-flex;align-items:center;gap:0.5rem;background:var(--accent);color:var(--on-accent);padding:0.55rem 1.1rem;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;font-weight:600;border-radius:2px;transition:background 0.3s}
.map-popup-cta:hover{background:var(--accent-light)}

@media(max-width:900px){
  .lb-map-wrap{margin:0 -1.5rem}
}

@media(max-width:640px){
  .lb-map-legend{gap:1rem 1.5rem}
  .map-popup{width:220px}
}