/* listing-kit.css — the NEUTRAL listing design language (Phase 1.5 M1).
   Industry-standard real-estate UI (Zillow/realtor.com grade): result cards,
   filter pill bar with popovers, split list+map, detail-page components.
   Theme-var driven (theme.css) so it re-skins per site; module-blind — any
   module (FSBO, rentals, future feeds) renders through it. Pairs with
   listing-kit.js (ListingKit global). lk- prefix throughout. */

/* ===== result card ===== */
.lk-card{display:block;background:var(--bg);border:1px solid var(--border);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--text);position:relative;transition:transform .18s,box-shadow .18s,border-color .18s;cursor:pointer;}
.lk-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(0,0,0,.35);border-color:color-mix(in srgb,var(--brand) 45%,var(--border));}
.lk-card-img{position:relative;aspect-ratio:3/2;background:color-mix(in srgb,var(--muted) 18%,var(--surface));overflow:hidden;}
.lk-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s;}
.lk-card:hover .lk-card-img img{transform:scale(1.03);}
.lk-card-img .lk-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;gap:8px;}
.lk-badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 60px);}
.lk-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;background:rgba(0,0,0,.72);color:#fff;backdrop-filter:blur(4px);}
.lk-badge.lk-b-new{background:var(--brand);color:var(--on-brand,#fff);}
.lk-badge.lk-b-rent{background:var(--accent);color:var(--on-brand,#0a0a0a);}
.lk-badge.lk-b-pending{background:#b45309;color:#fff;}
.lk-badge.lk-b-off{background:rgba(0,0,0,.72);color:#e2e8f0;}
.lk-photocount{position:absolute;bottom:10px;right:10px;display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;font-size:11.5px;font-weight:600;background:rgba(0,0,0,.6);color:#fff;backdrop-filter:blur(4px);}
.lk-photocount svg{width:13px;height:13px;}
.lk-heart{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:999px;border:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:transform .12s,background .12s;padding:0;}
.lk-heart:hover{transform:scale(1.1);background:rgba(0,0,0,.65);}
.lk-heart svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;transition:fill .12s,stroke .12s;}
.lk-heart.on svg{fill:#ef4444;stroke:#ef4444;}
.lk-card-body{padding:12px 14px 14px;}
.lk-price-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.lk-price{font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums;}
.lk-price .lk-permo{font-size:13px;font-weight:600;color:var(--muted);}
.lk-status{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;}
.lk-status .lk-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;flex:0 0 7px;}
.lk-status.pending .lk-dot{background:#f59e0b;}
.lk-status.off .lk-dot{background:var(--muted);}
.lk-specs{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:13.5px;color:var(--text);flex-wrap:wrap;}
.lk-specs b{font-weight:700;}
.lk-specs .lk-sep{color:var(--border);}
.lk-addr{margin-top:4px;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lk-attrib{margin-top:6px;font-size:11px;color:var(--muted);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* card grid */
.lk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:16px;}

/* ===== filter pill bar ===== */
.lk-filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:relative;}
.lk-search{position:relative;flex:1 1 220px;min-width:180px;}
.lk-search input{width:100%;padding:9px 12px 9px 36px;font-size:14px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);outline:none;font-family:inherit;}
.lk-search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-050,color-mix(in srgb,var(--brand) 18%,transparent));}
.lk-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none;}
.lk-pill{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;font-size:13.5px;font-weight:600;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);cursor:pointer;font-family:inherit;white-space:nowrap;transition:border-color .12s;}
.lk-pill:hover{border-color:color-mix(in srgb,var(--brand) 55%,var(--border));}
.lk-pill svg{width:14px;height:14px;color:var(--muted);transition:transform .15s;}
.lk-pill.open{border-color:var(--brand);}
.lk-pill.open svg{transform:rotate(180deg);}
.lk-pill.set{border-color:var(--brand);color:var(--brand);}
.lk-pop{position:absolute;top:calc(100% + 6px);z-index:60;background:var(--bg);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 44px -12px rgba(0,0,0,.45);padding:16px;min-width:260px;display:none;}
.lk-pop.open{display:block;}
.lk-pop h5{margin:0 0 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.lk-pop .lk-row2{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;}
.lk-pop .lk-row2 span{color:var(--muted);font-size:13px;}
.lk-pop input,.lk-pop select{width:100%;padding:8px 10px;font-size:13.5px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);outline:none;font-family:inherit;}
.lk-pop input:focus,.lk-pop select:focus{border-color:var(--brand);}
.lk-pop-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:8px;}
.lk-pop-clear{background:none;border:0;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;padding:6px 4px;font-family:inherit;}
.lk-pop-clear:hover{color:var(--text);}
.lk-pop-apply{background:var(--brand);color:var(--on-brand,#fff);border:0;border-radius:8px;padding:8px 18px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;}
.lk-pop-apply:hover{filter:brightness(1.08);}
/* segmented control (beds/baths quick-pick) */
.lk-seg{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.lk-seg button{flex:1;padding:8px 0;font-size:13px;font-weight:600;background:var(--surface);border:0;border-right:1px solid var(--border);color:var(--text);cursor:pointer;font-family:inherit;}
.lk-seg button:last-child{border-right:0;}
.lk-seg button.on{background:var(--brand);color:var(--on-brand,#fff);}
/* checkbox list (home type) */
.lk-checks{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto;}
.lk-checks label{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text);cursor:pointer;margin:0;font-weight:500;}
.lk-checks input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand);margin:0;flex:0 0 16px;padding:0;}

/* results header (count + sort) */
.lk-results-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0 12px;}
.lk-results-head .lk-count{font-size:13.5px;color:var(--muted);font-weight:600;}
.lk-results-head .lk-count b{color:var(--text);}
.lk-sort{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);}
.lk-sort select{padding:7px 10px;font-size:13.5px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);outline:none;font-family:inherit;width:auto;}

/* ===== split list + map ===== */
.lk-split{display:grid;grid-template-columns:1fr;gap:0;}
.lk-split.map-on{grid-template-columns:minmax(0,1fr) minmax(320px,42%);gap:18px;}
.lk-split.map-on .lk-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.lk-mapwrap{display:none;position:relative;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);min-height:420px;}
.lk-split.map-on .lk-mapwrap{display:block;position:sticky;top:84px;height:calc(100vh - 108px);}
.lk-map{position:absolute;inset:0;z-index:1;}
.lk-viewtoggle{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.lk-viewtoggle button{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:700;background:var(--surface);color:var(--muted);border:0;cursor:pointer;font-family:inherit;}
.lk-viewtoggle button.on{background:var(--brand);color:var(--on-brand,#fff);}
.lk-viewtoggle button svg{width:14px;height:14px;}
@media(max-width:900px){
  .lk-split.map-on{grid-template-columns:1fr;}
  .lk-split.map-on .lk-grid{display:none;}
  .lk-split.map-on .lk-mapwrap{position:relative;top:0;height:70vh;}
}
/* map price-pill markers (divIcon — no image assets) */
.lk-pin{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:999px;padding:3px 9px;font-size:12px;font-weight:800;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.35);font-variant-numeric:tabular-nums;line-height:1.35;transform:translate(-50%,-50%);display:inline-block;font-family:var(--font,inherit);}
.lk-pin.rent{border-color:color-mix(in srgb,var(--accent) 60%,var(--border));}
.lk-pin:hover,.lk-pin.hot{background:var(--brand);color:var(--on-brand,#fff);border-color:var(--brand);z-index:1000;}
.lk-map .leaflet-popup-content-wrapper{background:var(--bg);color:var(--text);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.4);padding:0;overflow:hidden;}
.lk-map .leaflet-popup-content{margin:0;width:230px !important;}
.lk-map .leaflet-popup-tip{background:var(--bg);}
.lk-popcard{display:block;text-decoration:none;color:var(--text);}
.lk-popcard img{width:100%;height:110px;object-fit:cover;display:block;}
.lk-popcard .b{padding:9px 11px 11px;}
.lk-popcard .p{font-weight:800;font-size:15px;}
.lk-popcard .s{font-size:12px;color:var(--muted);margin-top:2px;}

/* ===== detail page ===== */
/* gallery hero: 1 big + 2 stacked side tiles, "all photos" chip */
.lk-hero{display:grid;grid-template-columns:1fr;gap:8px;border-radius:14px;overflow:hidden;position:relative;}
.lk-hero.multi{grid-template-columns:2fr 1fr;}
.lk-hero .lk-hero-main{position:relative;aspect-ratio:16/10;background:color-mix(in srgb,var(--muted) 18%,var(--surface));}
.lk-hero.multi .lk-hero-main{aspect-ratio:auto;height:100%;min-height:340px;}
.lk-hero img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer;}
.lk-hero-side{display:grid;grid-template-rows:1fr 1fr;gap:8px;}
.lk-hero-side .lk-hero-tile{position:relative;overflow:hidden;background:color-mix(in srgb,var(--muted) 18%,var(--surface));}
.lk-allphotos{position:absolute;bottom:12px;right:12px;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:700;background:rgba(0,0,0,.72);color:#fff;border:1px solid rgba(255,255,255,.25);cursor:pointer;backdrop-filter:blur(4px);font-family:inherit;}
.lk-allphotos:hover{background:rgba(0,0,0,.85);}
.lk-allphotos svg{width:15px;height:15px;}
@media(max-width:700px){.lk-hero.multi{grid-template-columns:1fr;}.lk-hero-side{display:none;}.lk-hero.multi .lk-hero-main{aspect-ratio:16/10;min-height:0;height:auto;}}

/* sticky price rail */
.lk-rail{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:20px;box-shadow:0 8px 28px -14px rgba(0,0,0,.3);}
.lk-rail .lk-rail-price{font-size:28px;font-weight:800;letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums;}
.lk-rail .lk-rail-price .lk-permo{font-size:15px;font-weight:600;color:var(--muted);}
.lk-rail .lk-rail-specs{display:flex;gap:14px;margin-top:8px;font-size:14px;color:var(--text);flex-wrap:wrap;}
.lk-rail .lk-rail-specs b{font-weight:800;}
.lk-rail .lk-rail-addr{margin-top:6px;font-size:13.5px;color:var(--muted);line-height:1.45;}
.lk-est{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);font-size:13.5px;color:var(--muted);}
.lk-est .lk-est-line b{color:var(--text);font-weight:800;}
.lk-est-toggle{background:none;border:0;color:var(--brand);font-size:12.5px;font-weight:700;cursor:pointer;padding:2px 0;font-family:inherit;}
.lk-est-calc{display:none;margin-top:10px;}
.lk-est-calc.open{display:block;}
.lk-est-calc .lk-calc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.lk-est-calc label{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-bottom:3px;}
.lk-est-calc input{width:100%;padding:7px 9px;font-size:13px;background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--text);outline:none;font-family:inherit;}
.lk-est-note{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.5;opacity:.85;}
.lk-cta{display:flex;flex-direction:column;gap:9px;margin-top:16px;}
.lk-cta .lk-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:var(--on-brand,#fff);border:0;border-radius:9px;padding:13px 20px;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;font-family:inherit;transition:filter .12s;}
.lk-cta .lk-btn-primary:hover{filter:brightness(1.08);}
.lk-cta .lk-btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:var(--brand);border:1.5px solid var(--brand);border-radius:9px;padding:12px 20px;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;font-family:inherit;}
.lk-cta .lk-btn-secondary:hover{background:var(--brand-050,color-mix(in srgb,var(--brand) 12%,transparent));}

/* attribution / listed-by card (true-attribution slot: FSBO owner today, listing broker later) */
.lk-listedby{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}
.lk-listedby .lk-lb-av{width:42px;height:42px;border-radius:50%;background:var(--brand-050,color-mix(in srgb,var(--brand) 15%,transparent));color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex:0 0 42px;}
.lk-listedby .lk-lb-name{font-size:14px;font-weight:700;color:var(--text);}
.lk-listedby .lk-lb-sub{font-size:12px;color:var(--muted);margin-top:1px;}

/* facts strip (icon facts under hero) */
.lk-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px;}
.lk-fact{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 13px;}
.lk-fact svg{width:18px;height:18px;color:var(--brand);flex:0 0 18px;}
.lk-fact .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;}
.lk-fact .v{font-size:13.5px;font-weight:700;color:var(--text);margin-top:1px;}

/* detail map */
.lk-detail-map{height:320px;border-radius:12px;border:1px solid var(--border);overflow:hidden;position:relative;}
.lk-detail-map>div{position:absolute;inset:0;}

/* lightbox */
.lk-lb{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;}
.lk-lb.open{display:flex;}
.lk-lb img{max-width:92vw;max-height:86vh;border-radius:8px;object-fit:contain;}
.lk-lb .lk-lb-x,.lk-lb .lk-lb-prev,.lk-lb .lk-lb-next{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:999px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s;padding:0;}
.lk-lb .lk-lb-x:hover,.lk-lb .lk-lb-prev:hover,.lk-lb .lk-lb-next:hover{background:rgba(255,255,255,.22);}
.lk-lb .lk-lb-x{top:18px;right:18px;}
.lk-lb .lk-lb-prev{left:14px;top:50%;transform:translateY(-50%);}
.lk-lb .lk-lb-next{right:14px;top:50%;transform:translateY(-50%);}
.lk-lb svg{width:20px;height:20px;}
.lk-lb .lk-lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#cbd5e1;font-size:13px;font-weight:600;}

/* skeleton shimmer while a page hydrates */
.lk-skel{border-radius:12px;background:linear-gradient(100deg,var(--surface) 40%,color-mix(in srgb,var(--muted) 14%,var(--surface)) 50%,var(--surface) 60%);background-size:200% 100%;animation:lkshimmer 1.3s infinite;}
@keyframes lkshimmer{to{background-position:-200% 0;}}

@media (prefers-reduced-motion: reduce){
  .lk-card,.lk-card-img img,.lk-heart{transition:none;}
  .lk-skel{animation:none;}
}