/* Standalone Lookin' Good interactive house section. All selectors are prefixed. */
.lg-map { --lg-accent:#1ad7ec; --lg-deep:#062a37; color:inherit; width:100%; }
.lg-map * { box-sizing:border-box; }
.lg-map-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; padding:0 0 18px; }
.lg-map-kicker { display:block; font:700 11px/1.6 Arial,sans-serif; letter-spacing:.17em; color:#168c9b; }
.lg-map-heading h2 { margin:4px 0 0; font:900 clamp(24px,4vw,46px)/1.02 Impact,'Arial Narrow',Arial,sans-serif; letter-spacing:.02em; }
.lg-map-heading h2 em { color:#0bafc3; font-style:normal; }
.lg-map-instruction { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(11,175,195,.24); border-radius:999px; background:rgba(11,175,195,.08); color:#087c89; font:600 12px/1.2 Arial,sans-serif; white-space:nowrap; }
.lg-map-instruction-mobile { display:none; }
.lg-map-photo { isolation:isolate; position:relative; width:100%; aspect-ratio:4 / 3; overflow:hidden; background:#d9e0e1; }
.lg-map-photo > img { display:block; width:100%; height:100%; object-fit:cover; }
.lg-map-point { position:absolute; left:var(--x); top:var(--y); width:0; height:0; z-index:2; }
.lg-map-point.is-active { z-index:10; }
.lg-map-point > button { position:absolute; left:-15px; top:-15px; width:30px; height:30px; border:0; background:transparent; padding:0; cursor:pointer; border-radius:50%; touch-action:manipulation; }
.lg-map-point > button::before { content:""; position:absolute; inset:5px; border-radius:50%; background:rgba(14,199,226,.28); border:1px solid rgba(255,255,255,.85); box-shadow:0 0 0 4px rgba(23,209,236,.14),0 0 20px 7px rgba(0,221,255,.58); animation:lg-map-pulse 2.7s ease-in-out infinite; }
.lg-map-point > button::after { content:""; position:absolute; inset:10px; border-radius:50%; background:#f4ffff; box-shadow:0 0 8px #00d9ff; }
.lg-map-point > button:focus-visible { outline:2px solid white; outline-offset:5px; }
.lg-map-point.is-active > button::before { background:rgba(10,222,255,.6); box-shadow:0 0 0 5px rgba(23,209,236,.22),0 0 25px 12px rgba(0,221,255,.7); }
.lg-map-tip { position:absolute; left:var(--popup-x); top:var(--popup-y); display:flex; align-items:center; gap:10px; width:max-content; max-width:260px; min-width:210px; padding:9px 11px; border:1px solid rgba(37,226,246,.9); border-radius:10px; background:rgba(4,35,49,.94); color:#fff; box-shadow:0 8px 24px rgba(0,25,37,.32),0 0 12px rgba(0,213,238,.25); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-family:Arial,Helvetica,sans-serif; pointer-events:none; opacity:0; visibility:hidden; transform:translateY(5px); transition:opacity .17s,transform .17s,visibility .17s; }
.lg-map-tip img { display:block; width:48px; height:48px; flex:0 0 48px; border-radius:50%; object-fit:cover; }
.lg-map-tip strong { display:block; font-size:15px; line-height:1.16; font-weight:800; margin-bottom:4px; }
.lg-map-tip span { display:block; font-size:11.5px; line-height:1.35; color:#e3f3f7; }
.lg-map-point.is-active .lg-map-tip,.lg-map-point > button:focus-visible + .lg-map-tip { opacity:1; visibility:visible; transform:translateY(0); }
@media (hover:hover) and (pointer:fine) {
 .lg-map-point:hover { z-index:10; }
 .lg-map-point:hover > button::before { background:rgba(10,222,255,.6); box-shadow:0 0 0 5px rgba(23,209,236,.22),0 0 25px 12px rgba(0,221,255,.7); }
 .lg-map-point:hover .lg-map-tip { opacity:1; visibility:visible; transform:translateY(0); }
}
@keyframes lg-map-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.2); } }
@media (prefers-reduced-motion:reduce) { .lg-map-point > button::before { animation:none; } .lg-map-tip { transition:none; } }
/* On narrow screens, keep the photo intact and attach a compact readable caption within the image. */
@media(max-width:700px), (hover:none), (pointer:coarse) {
 .lg-map-heading { align-items:center; } .lg-map-instruction { max-width:none; text-align:center; font-size:11px; padding:7px 10px; }
 .lg-map-instruction-desktop { display:none; } .lg-map-instruction-mobile { display:inline; }
 .lg-map-tip { position:fixed; left:auto; top:auto; /* overwritten by JS for viewport placement */ width:min(240px,calc(100vw - 24px)); max-width:240px; min-width:0; gap:8px; padding:8px 9px; }
 .lg-map-tip img { width:40px; height:40px; flex-basis:40px; }
 .lg-map-tip strong { font-size:13px; } .lg-map-tip span { font-size:10.5px; }
 .lg-map-point > button { width:32px;height:32px;left:-16px;top:-16px; }
}