/* ==========================================================================
   search.css, "find your next home" / IDX search band
   ========================================================================== */
.vr-search{padding-block:var(--vr-section-y); background:var(--vr-sand); text-align:center;}
.vr-search__head{font-weight:500; font-size:clamp(1.9rem,4vw,2.6rem); color:var(--vr-teal); line-height:1.15; margin-bottom:.6rem;}
.vr-search__sub{font-size:1.1rem; max-width:50ch; margin:0 auto 2.5rem; color:var(--vr-charcoal);}
.vr-search__all{margin-top:.5rem;}

/* Two calls to action side by side: Village Realty's own listings (the IDX
   featured page, filtered by office ID) first, then the whole MLS. */
.vr-search__actions{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:.5rem;}

/* --------------------------------------------------------------------------
   IDX Listings Showcase (#173305)

   The grid is IDX's own markup, injected at runtime into .vr-search__idx as an
   <idx-listings-showcase> custom element. It ships its own CSS and pulls the
   Muli webfont for itself, so the only things reachable from here are the box
   around it and the font cascade. Column count, how many listings, which
   fields show, and WHICH listings are all dashboard settings.
   -------------------------------------------------------------------------- */
.vr-search__idx{max-width:var(--vr-maxw); margin:0 auto 2.5rem; text-align:left;}
.vr-search__idx idx-listings-showcase{display:block;}

/* IDX sets Muli on its own containers. Re-assert Montserrat so the cards read
   as part of the page rather than a pasted-in third-party block. Prices and
   addresses inherit, which is the whole point, so this is deliberately broad. */
.vr-search__idx idx-listings-showcase,
.vr-search__idx idx-listings-showcase *{font-family:var(--vr-ui) !important;}