/* ==========================================================================
   property-search.css — listing / search-results page
   Companion to style2.css (shares :root vars, .container, .btn, .pcard, .field)
   ========================================================================== */

/* ---- Misc shared-component tweaks --------------------------------------- */
.nav__list a.is-current{color:#fff}
.nav__list a.is-current::after{width:100%}
.pcard__price small{font-size:13px;font-weight:500;color:var(--muted)}
.pcard__loc{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.pcard__loc::before{content:"📍";font-size:13px}

/* ---- Page banner -------------------------------------------------------- */
.page-banner{
  position:relative;
  padding:120px 0 56px;
  background:#0d2b2b url("/wp-content/uploads/admin/2023/03/vision-hero.webp") center/cover no-repeat;
  color:#fff;
  isolation:isolate;
}
.page-banner::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,28,28,.55) 0%,rgba(7,28,28,.78) 100%);
}
.page-banner__title{
  color:#fff;
  font-size:clamp(28px,4vw,42px);
  font-weight:800;letter-spacing:-.02em;margin:0 0 10px;
}
.breadcrumb{display:flex;gap:8px;align-items:center;font-size:14px;color:rgba(255,255,255,.8)}
.breadcrumb a{color:rgba(255,255,255,.8)}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{opacity:.6}

/* ---- Layout: filter bar on top, results below -------------------------- */
.results-layout{display:block}

/* ---- Filters: horizontal bar ------------------------------------------- */
.filters{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 24px;margin-bottom:30px;
}
.filters__head{
  display:flex;align-items:center;justify-content:space-between;
  margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line);
  cursor:pointer;user-select:none;
  transition:margin .35s ease,padding .35s ease,border-color .35s ease;
}
.filters__head-left{display:flex;align-items:center;gap:10px}
.filters__head h2{font-size:17px;font-weight:700;margin:0}
.filters__chevron{
  color:var(--muted);font-size:13px;line-height:1;
  transition:transform .35s ease;
}
.filters__reset{
  background:none;border:none;color:var(--teal);font-size:13px;font-weight:600;
  cursor:pointer;padding:0;
}
.filters__reset:hover{text-decoration:underline}
.filters__grid{
  display:flex;flex-wrap:wrap;gap:16px 22px;align-items:flex-end;
  overflow:hidden;max-height:600px;opacity:1;
  transition:max-height .35s ease,opacity .3s ease;
}
/* collapsed state */
.filters.is-collapsed .filters__head{margin-bottom:0;padding-bottom:0;border-bottom-color:transparent}
.filters.is-collapsed .filters__chevron{transform:rotate(-90deg)}
.filters.is-collapsed .filters__grid{max-height:0;opacity:0}
.filters__group{flex:1 1 190px;min-width:0;margin-bottom:0}
.filters__group--wide{flex:1 1 300px}
/* keep segmented buttons compact & left-aligned in the horizontal bar */
.filters__grid .seg{justify-content:flex-start}
.filters__grid .seg button{flex:0 0 auto;padding:0 14px}
.filters__label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px;
}
.filters select,.filters input[type="text"],.filters input[type="number"]{
  width:100%;height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:10px;background:#f7f9fa;
  font-size:14px;color:var(--ink);font-family:inherit;
}
.filters select:focus,.filters input:focus{outline:none;border-color:var(--teal);background:#fff}
.filters__range{display:flex;align-items:center;gap:8px}
.filters__range span{color:var(--muted);font-size:13px}

/* segmented button group (beds / baths / status) */
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{
  flex:1 1 auto;min-width:42px;height:38px;padding:0 10px;
  border:1px solid var(--line);border-radius:9px;background:#fff;
  font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;
  font-family:inherit;transition:all .15s;
}
.seg button:hover{border-color:var(--teal)}
.seg button.is-active{background:var(--teal);border-color:var(--teal);color:#fff}

/* ---- Toolbar ------------------------------------------------------------ */
.toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:22px;
}
.toolbar__count{font-size:15px;color:var(--muted)}
.toolbar__count strong{color:var(--ink);font-weight:700}
.toolbar__right{display:flex;align-items:center;gap:12px}
.toolbar__sort{
  height:42px;padding:0 36px 0 14px;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  font-size:14px;font-family:inherit;color:var(--ink);cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7c7c' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.view-toggle{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.view-toggle button{
  width:42px;height:42px;display:grid;place-items:center;
  background:#fff;border:none;cursor:pointer;color:var(--muted);
}
.view-toggle button+button{border-left:1px solid var(--line)}
.view-toggle button.is-active{background:var(--teal);color:#fff}
.view-toggle svg{width:18px;height:18px;display:block}

/* mobile filter toggle + backdrop (hidden on desktop) */
.filters-toggle{display:none}
.filters-backdrop{display:none}

/* ---- Results grid / list ------------------------------------------------ */
.results{display:grid;gap:24px}
.results.is-grid{grid-template-columns:repeat(3,1fr)}
.results.is-list{grid-template-columns:1fr}

/* list-view variant of the shared .pcard */
.results.is-list .pcard{display:grid;grid-template-columns:320px 1fr}
.results.is-list .pcard__media{aspect-ratio:auto;height:100%;min-height:240px}
.results.is-list .pcard__body{padding:22px 24px}
.results.is-list .pcard__desc{display:block}
.results.is-list .pcard__title{font-size:19px}
.results.is-list .pcard__foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
}
.pcard__desc{
  display:none;margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--muted);
}
.pcard__foot{display:none}
.results.is-list .pcard__foot .btn{padding:9px 20px;font-size:14px}

/* status badge colour variants */
.pcard__badge.is-rent{background:var(--ink)}

/* ---- Empty state -------------------------------------------------------- */
.results-empty{
  display:none;text-align:center;padding:80px 20px;
  border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted);
}
.results-empty.is-shown{display:block}
.results-empty h3{font-size:20px;color:var(--ink);margin:0 0 8px}

/* ---- Pagination --------------------------------------------------------- */
.pagination{
  display:flex;justify-content:center;align-items:center;gap:8px;
  margin-top:40px;
}
.pagination button{
  min-width:42px;height:42px;padding:0 12px;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;
  transition:all .15s;
}
.pagination button:hover:not(:disabled){border-color:var(--teal);color:var(--teal)}
.pagination button.is-active{background:var(--teal);border-color:var(--teal);color:#fff}
.pagination button:disabled{opacity:.4;cursor:not-allowed}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:1100px){
  .results.is-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .results-layout{grid-template-columns:1fr}
  .filters{
    position:fixed;top:0;left:0;bottom:0;z-index:120;width:320px;max-width:88vw;
    border-radius:0;overflow-y:auto;transform:translateX(-100%);
    transition:transform .3s ease;
  }
  .filters.is-open{transform:translateX(0)}
  .filters-backdrop{
    display:none;position:fixed;inset:0;z-index:115;background:rgba(0,0,0,.45);
  }
  .filters-backdrop.is-shown{display:block}
  .filters-toggle{
    display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;
    border:1px solid var(--line);border-radius:10px;background:#fff;
    font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;
  }
  .filters__close{
    background:none;border:none;font-size:24px;line-height:1;color:var(--muted);
    cursor:pointer;
  }
}
@media (min-width:981px){
  .filters__close{display:none}
}
@media (max-width:680px){
  .results.is-grid{grid-template-columns:1fr}
  .results.is-list .pcard{grid-template-columns:1fr}
  .results.is-list .pcard__media{min-height:200px}
}