/* ============================================================
   Bridge: listings and property keep their v1 markup because the
   grid, filters, sorting and the photo viewer are all driven by
   demo.js against those class names. Rewriting that for the demo
   would risk the one genuinely interactive part of the site, so
   instead the v1 classes are restyled to the v2 vocabulary.
   b.css loads first, v2.css second, this last.
   ============================================================ */

.listing-shell{max-width:var(--maxw);margin:0 auto;padding:clamp(20px,3vw,34px) var(--gut) clamp(60px,8vw,110px)}
.listing-shell .in,.listing-shell main{opacity:1;transform:none}

/* toolbar */
.results-toolbar{display:flex;flex-wrap:wrap;gap:18px;align-items:end;justify-content:space-between;
  border:0;padding:0 0 22px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.results-toolbar h1{font-family:var(--sans);font-weight:500;letter-spacing:-.035em;
  font-size:clamp(34px,5vw,70px);line-height:1.02;margin:0}
.sort-control{display:flex;align-items:center;gap:10px;font-size:13px}
.sort-control select{font-family:var(--sans);font-size:14px;padding:10px 12px;
  border:1px solid var(--line);background:#fff;border-radius:0}
.meta-line{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  font-size:14px;color:var(--ink-50);margin-bottom:18px}
.collection-disclosure{font-size:13px;color:var(--ink-50);margin:0 0 26px}

/* cards rendered by demo.js */
.listing-shell .cards{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:1fr}
@media(min-width:700px){.listing-shell .cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1140px){.listing-shell .cards{grid-template-columns:repeat(3,1fr)}}
.listing-shell .card{border:1px solid var(--line);background:#fff;overflow:hidden}
.listing-shell .card .m{border-bottom:1px solid var(--line);overflow:hidden}
.listing-shell .card .m img{aspect-ratio:4/3;object-fit:cover;width:100%;
  transition:transform 1.1s var(--ease)}
.listing-shell .card:hover .m img{transform:scale(1.06)}
.listing-shell .card .b{padding:20px 20px 24px}
.listing-shell .card .pr{font-family:var(--sans);font-size:27px;font-weight:600;letter-spacing:-.025em}
.listing-shell .card .ttl{font-size:15px;font-weight:600}
.listing-shell .card .ico{border-top:1px solid var(--line)}

/* filters */
.filter-toggle,.more-filters button,.btn.b-out{font-family:var(--sans);font-size:13px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:14px 22px;
  border:1px solid var(--ink);background:#fff;color:var(--ink);border-radius:0;cursor:pointer}
.filter-toggle:hover,.btn.b-out:hover{background:var(--ink);color:#fff}
.active-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.active-filters button{border:1px solid var(--line);background:#fff;font-size:13px;
  padding:8px 14px;border-radius:0;cursor:pointer}

/* empty state */
.empty-state{text-align:center;padding:clamp(48px,7vw,90px) 0}
.empty-state h2{font-family:var(--sans);font-weight:500;letter-spacing:-.03em;
  font-size:clamp(26px,3vw,40px)}
.empty-mark{font-size:48px;color:var(--ink-40);display:block;margin-bottom:16px}

/* property detail */
.listing-shell .gallery img,.listing-shell .hero-img img{width:100%;object-fit:cover}
.listing-shell h1{font-family:var(--sans);font-weight:500;letter-spacing:-.035em}
.listing-shell h2,.listing-shell h3{font-family:var(--sans);letter-spacing:-.025em}

/* demo.js injects the v1 header and footer into these two nodes. The v2
   shell supplies its own, so the targets stay in the document (the script
   writes to them unconditionally and throws otherwise) but never render. */
#site-header,#site-footer{display:none !important}

/* b.css also defines .nav-links and won an earlier cascade position, which
   flattened the header links into a block with no spacing. */
.nav .nav-links{display:none;gap:34px;align-items:center}
@media(min-width:1080px){.nav .nav-links{display:flex}}