/* ==========================================================================
   Mortgease — /properties/ browse page (pl-* design system)

   properties/index.php was written against a "pl-" naming scheme, but
   properties.css only ever defined the older listing, detail and wizard
   classes. All 47 pl- classes the page uses were undefined, so the browse
   page rendered as bare HTML — raw selects, no grid, images at full width.
   It went unnoticed because the module shipped in June without its database,
   so nobody ever loaded a working version of this page.

   Brand: black #111 + amber #F5A623 + white, Helvetica. Matches the card and
   filter conventions used on view.php so the section reads as one thing.
   ========================================================================== */

:root{
  --pl-ink:#111;
  --pl-body:#444;
  --pl-muted:#8b8b8b;
  --pl-line:#e6e6e6;
  --pl-soft:#f6f6f7;
  --pl-amber:#F5A623;
  --pl-amber-d:#e08e0b;
  --pl-cream:#fff8ec;
  --pl-radius:14px;
  --pl-shadow:0 1px 2px rgba(17,17,17,.05), 0 6px 22px rgba(17,17,17,.07);
  --pl-shadow-lg:0 14px 40px rgba(17,17,17,.13);
}

.pl-container{max-width:1240px;margin:0 auto;padding:0 20px}

/* ── hero ───────────────────────────────────────────────────────────── */
.pl-hero{
  background:linear-gradient(160deg,#fffdf9 0%,#fff4e3 100%);
  border-bottom:1px solid #f3e6cd;
  padding:44px 0 40px;
}
.pl-hero__inner{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap}
.pl-hero__copy{flex:1 1 460px;min-width:0}
.pl-hero__eyebrow{
  margin:0 0 8px;font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--pl-amber-d);font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
}
.pl-hero__title{
  margin:0 0 10px;font-size:clamp(28px,4.2vw,42px);line-height:1.1;letter-spacing:-.025em;
  color:var(--pl-ink);font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;
}
.pl-hero__sub{margin:0;color:var(--pl-body);font-size:16px;line-height:1.6;max-width:60ch}
.pl-hero__cta{flex:0 0 auto}

/* ── buttons ────────────────────────────────────────────────────────── */
.pl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;border:1.5px solid transparent;
  font-size:14.5px;font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s,transform .15s;
}
.pl-btn:hover{transform:translateY(-1px)}
.pl-btn--accent{background:var(--pl-amber);color:#111;border-color:var(--pl-amber)}
.pl-btn--accent:hover{background:var(--pl-amber-d);border-color:var(--pl-amber-d)}
.pl-btn--dark{background:var(--pl-ink);color:#fff;border-color:var(--pl-ink)}
.pl-btn--dark:hover{background:#000}
.pl-btn--ghost{background:#fff;color:var(--pl-body);border-color:var(--pl-line)}
.pl-btn--ghost:hover{border-color:var(--pl-ink);color:var(--pl-ink)}

/* ── filters ────────────────────────────────────────────────────────── */
.pl-filters{
  background:#fff;border-bottom:1px solid var(--pl-line);
  position:sticky;top:0;z-index:50;
}
.pl-filters__form{padding:16px 0}

.pl-purpose{display:inline-flex;background:var(--pl-soft);border-radius:999px;padding:4px;margin-bottom:14px}
.pl-purpose__btn{
  border:0;background:transparent;cursor:pointer;padding:9px 26px;border-radius:999px;
  font-size:14px;color:var(--pl-body);
  font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
  transition:background .18s,color .18s;
}
.pl-purpose__btn.is-active{background:var(--pl-ink);color:#fff}

.pl-filters__row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;align-items:end;
}
.pl-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.pl-field__label{
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--pl-muted);
  font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
}
.pl-field select,
.pl-field input{
  width:100%;border:1px solid var(--pl-line);border-radius:10px;padding:11px 12px;
  font-size:14.5px;font-family:inherit;color:var(--pl-ink);background:#fff;
  appearance:none;-webkit-appearance:none;
}
.pl-field select{
  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='none' stroke='%238b8b8b' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;
}
.pl-field select:focus,
.pl-field input:focus{outline:2px solid var(--pl-amber);outline-offset:-1px;border-color:var(--pl-amber)}
.pl-field input::placeholder{color:#b6b6b6}

.pl-filters__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.pl-result-count{margin-left:auto;color:var(--pl-muted);font-size:14px}

/* ── results grid ───────────────────────────────────────────────────── */
.pl-results{background:var(--pl-soft);padding:26px 0 60px;min-height:50vh}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(286px,1fr));gap:18px}

.pl-card{
  background:#fff;border-radius:var(--pl-radius);overflow:hidden;box-shadow:var(--pl-shadow);
  display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s;
}
.pl-card:hover{box-shadow:var(--pl-shadow-lg);transform:translateY(-3px)}

.pl-card__media{position:relative;display:block;aspect-ratio:4/3;background:#e9ecef;overflow:hidden}
.pl-card__img{width:100%;height:100%;object-fit:cover;display:block}
.pl-card__badge{
  position:absolute;top:10px;left:10px;background:rgba(17,17,17,.86);color:#fff;
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;padding:5px 9px;border-radius:5px;
  font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
}

.pl-card__body{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1;gap:2px}
.pl-card__price{
  margin:0;font-size:19px;letter-spacing:-.015em;color:var(--pl-ink);
  font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
}
.pl-card__price span{font-size:12.5px;color:var(--pl-muted)}

.pl-card__specs{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin:9px 0 0;padding:0}
.pl-card__spec{font-size:13px;color:var(--pl-body);display:flex;align-items:center;gap:5px}
.pl-card__spec + .pl-card__spec{position:relative;padding-left:14px}
.pl-card__spec + .pl-card__spec::before{
  content:'';position:absolute;left:0;top:50%;width:3px;height:3px;border-radius:50%;
  background:#cfcfcf;transform:translateY(-50%);
}

.pl-card__title{
  margin:9px 0 3px;font-size:14.5px;line-height:1.4;color:var(--pl-ink);font-weight:400;
  font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pl-card__title a{color:inherit;text-decoration:none}
.pl-card__loc{margin:0;font-size:13px;color:var(--pl-muted)}

.pl-card__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:12px}
.pl-card__verified{
  background:#eaf7ef;color:#15683c;border-radius:5px;padding:3px 8px;
  font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
}
.pl-card__agency{color:var(--pl-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pl-card__actions{display:flex;gap:8px;margin-top:13px;padding-top:13px;border-top:1px solid var(--pl-line)}
.pl-cardbtn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 10px;border-radius:9px;border:1px solid var(--pl-line);background:#fff;
  font-size:13px;color:var(--pl-ink);text-decoration:none;cursor:pointer;
  font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
  transition:border-color .18s,background .18s,color .18s;
}
.pl-cardbtn--call:hover{border-color:var(--pl-ink)}
.pl-cardbtn--wa{background:#25d366;border-color:#25d366;color:#fff}
.pl-cardbtn--wa:hover{background:#1fb955;border-color:#1fb955}

/* ── empty + loading ────────────────────────────────────────────────── */
.pl-empty{
  background:#fff;border-radius:var(--pl-radius);box-shadow:var(--pl-shadow);
  padding:56px 24px;text-align:center;color:var(--pl-body);grid-column:1/-1;
}
.pl-empty h2{margin:0 0 8px;font-size:19px;color:var(--pl-ink);
  font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400}
.pl-empty p{margin:0 auto;max-width:46ch}

.pl-card--skeleton{pointer-events:none}
.pl-card--skeleton .pl-card__media,
.pl-card--skeleton .pl-card__body>*{
  background:linear-gradient(90deg,#eee 25%,#f6f6f6 37%,#eee 63%);
  background-size:400% 100%;animation:pl-shimmer 1.3s ease-in-out infinite;
  border-radius:6px;color:transparent;
}
@keyframes pl-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ── pagination ─────────────────────────────────────────────────────── */
.pl-pagination{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;padding:30px 0 4px}
.pl-page{
  min-width:40px;padding:9px 13px;border-radius:9px;border:1px solid var(--pl-line);
  background:#fff;color:var(--pl-body);font-size:14px;cursor:pointer;font-family:inherit;
  transition:border-color .18s,background .18s,color .18s;
}
.pl-page:hover{border-color:var(--pl-ink);color:var(--pl-ink)}
.pl-page.is-current{background:var(--pl-ink);border-color:var(--pl-ink);color:#fff}
.pl-page__gap{color:var(--pl-muted);padding:0 4px}

/* ── responsive ─────────────────────────────────────────────────────── */
@media(max-width:900px){
  .pl-hero{padding:34px 0 30px}
  .pl-hero__inner{align-items:flex-start}
  .pl-hero__cta{width:100%;justify-content:center}
}
@media(max-width:640px){
  .pl-filters{position:static}
  .pl-filters__row{grid-template-columns:1fr 1fr}
  .pl-field--price{grid-column:span 1}
  .pl-grid{grid-template-columns:1fr;gap:14px}
  .pl-filters__actions .pl-btn{flex:1}
  .pl-result-count{width:100%;margin:6px 0 0}
}
@media(prefers-reduced-motion:reduce){
  .pl-btn:hover,.pl-card:hover{transform:none}
  .pl-card--skeleton .pl-card__media,
  .pl-card--skeleton .pl-card__body>*{animation:none}
}