/* ── Listing page ──────────────────────────── */

.listing-header{padding-block:3rem 2rem;text-align:center;border-bottom:1px solid var(--clay)}
.listing-header__title{font-family:var(--font-d);font-size:clamp(2rem,6vw,3.5rem);font-weight:300;line-height:1.08;letter-spacing:-.02em;margin-bottom:.75rem}
.listing-header__sub{font-size:clamp(.85rem,2.5vw,1rem);color:var(--muted);max-width:50ch;margin-inline:auto;line-height:1.7}

/* ── Filters ────────────────────────────────── */
.filters-bar{padding-block:1.25rem;background:var(--sand);border-bottom:1px solid var(--clay);position:sticky;top:52px;z-index:50}
.filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem 1rem}
.filter-group{display:flex;flex-direction:column;gap:.3rem;flex:1;min-width:140px}
.filter-label{font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.filter-select{padding:.6rem .9rem;border:1px solid var(--clay);border-radius:var(--radius);background:var(--white);color:var(--charcoal);font-size:.82rem;outline:none;transition:all var(--tr);-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%237C6D60' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2rem;cursor:pointer}
.filter-select:focus{border-color:rgba(192,86,58,.35);box-shadow:0 0 0 3px rgba(192,86,58,.06)}
.filter-count{font-size:.78rem;color:var(--muted);padding:.6rem 0;white-space:nowrap}

/* ── Property Grid ──────────────────────────── */
.listing-grid-section{padding-block:2rem var(--sec-pad);background:var(--ivory)}
.listing-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
.listing-empty{text-align:center;padding:4rem 1rem}
.listing-empty p{font-size:1rem;color:var(--muted);margin-bottom:1.25rem}

/* ── Listing Card ───────────────────────────── */
.listing-card{background:var(--white);border:1px solid var(--clay);border-radius:var(--r-card);overflow:hidden;transition:all .35s ease;display:flex;flex-direction:column}
.listing-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.listing-card.skeleton{min-height:380px;animation:pulse 1.4s ease-in-out infinite}

.listing-card__img-wrap{position:relative;height:220px;background:var(--clay);overflow:hidden}

/* Card slideshow */
.card-slides{position:relative;width:100%;height:100%}
.card-slides__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.card-slides__img.active{opacity:1;position:relative}
.card-slides__nav{position:absolute;top:50%;transform:translateY(-50%);width:2rem;height:2rem;background:rgba(255,255,255,.85);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:none;border-radius:50%;font-size:1.1rem;color:var(--charcoal);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:3;opacity:0;transition:opacity .25s ease;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.card-slides__nav:hover{background:var(--white);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.card-slides__nav--prev{left:.5rem}
.card-slides__nav--next{right:.5rem}
.card-slides__dots{position:absolute;bottom:.6rem;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:3}
.card-slides__dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);transition:all .25s ease}
.card-slides__dot.active{background:var(--white);transform:scale(1.2)}
.listing-card__badge{position:absolute;top:.75rem;left:.75rem;background:rgba(28,25,23,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--white);font-size:.6rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .7rem;border-radius:2px}

.listing-card__body{padding:1.25rem 1.5rem 1.5rem;flex:1;display:flex;flex-direction:column}
.listing-card__price{font-family:var(--font-d);font-size:1.6rem;font-weight:500;color:var(--tc);line-height:1;margin-bottom:.35rem}
.listing-card__location{font-size:.85rem;font-weight:500;margin-bottom:.5rem;letter-spacing:.01em}
.listing-card__meta{display:flex;flex-wrap:wrap;gap:.4rem .85rem;font-size:.75rem;color:var(--muted-light);letter-spacing:.02em;margin-bottom:1rem}
.listing-card__desc{font-size:.8rem;color:var(--muted);line-height:1.7;margin-bottom:1.25rem;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.listing-card__cta{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:.7rem 1.25rem;font-size:.82rem;font-weight:500;color:var(--tc);border:1.5px solid var(--tc);border-radius:var(--radius);background:transparent;cursor:pointer;transition:all var(--tr);text-decoration:none;letter-spacing:.03em}
.listing-card__cta:hover{background:var(--tc);color:var(--white)}

/* ── CTA Banner ─────────────────────────────── */
.listing-cta{padding-block:var(--sec-pad);background:var(--sand);border-top:1px solid var(--clay)}
.listing-cta__inner{max-width:600px;margin-inline:auto;text-align:center}
.listing-cta__title{font-family:var(--font-d);font-size:clamp(1.5rem,4vw,2.2rem);font-weight:300;margin-bottom:.6rem;line-height:1.15}
.listing-cta__sub{font-size:.88rem;color:var(--muted);line-height:1.7;margin-bottom:1.75rem}

/* ── Modal ──────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(28,25,23,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal-overlay[hidden]{display:none}
.modal{background:var(--white);border-radius:var(--r-card);max-width:480px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 16px 64px rgba(28,25,23,.2);animation:modalIn .25s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.modal__close{position:absolute;top:.75rem;right:.75rem;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--muted);background:none;border:none;cursor:pointer;border-radius:50%;transition:all var(--tr)}
.modal__close:hover{background:var(--sand);color:var(--charcoal)}
.modal__body{padding:2.5rem 2rem 2rem}
.modal__title{font-family:var(--font-d);font-size:1.6rem;font-weight:300;margin-bottom:.5rem}
.modal__sub{font-size:.82rem;color:var(--muted);line-height:1.65;margin-bottom:1.5rem}
.modal__property{background:var(--sand);border-radius:var(--radius);padding:.85rem 1rem;margin-bottom:1.5rem;font-size:.82rem;display:flex;align-items:center;gap:.75rem}
.modal__property img{width:60px;height:45px;object-fit:cover;border-radius:3px;flex-shrink:0}
.modal__property-info{display:flex;flex-direction:column;gap:.15rem}
.modal__property-town{font-weight:500;color:var(--charcoal)}
.modal__property-price{font-family:var(--font-d);color:var(--tc);font-size:.95rem;font-weight:500}
.modal__form{display:flex;flex-direction:column;gap:.75rem}
.modal__row{display:grid;gap:.75rem;grid-template-columns:1fr 1fr}
.modal__form input{width:100%;padding:.7rem 1rem;border:1px solid rgba(192,86,58,.12);border-radius:var(--radius);background:var(--white);color:var(--charcoal);font-size:.85rem;font-family:var(--font-s);outline:none;transition:all var(--tr);box-shadow:inset 0 1px 2px rgba(0,0,0,.02)}
.modal__form input::placeholder{color:var(--muted-light);opacity:.85}
.modal__form input:focus{border-color:rgba(192,86,58,.35);box-shadow:inset 0 1px 2px rgba(0,0,0,.02),0 0 0 4px rgba(192,86,58,.05)}
.modal__success{text-align:center;padding:3rem 2rem}
.modal__success-icon{width:3rem;height:3rem;background:var(--olive);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin:0 auto 1.25rem;box-shadow:0 4px 16px rgba(74,103,65,.2)}
.modal__success h3{font-family:var(--font-d);font-size:1.6rem;font-weight:300;margin-bottom:.5rem}
.modal__success p{font-size:.85rem;color:var(--muted);line-height:1.7;margin-bottom:1.5rem}

/* ── Responsive ─────────────────────────────── */
@media(min-width:600px){
  .listing-header{padding-block:4rem 2.5rem}
  .listing-grid{grid-template-columns:repeat(2,1fr)}
  .filters{flex-wrap:nowrap}
  .filter-group{min-width:auto}
}
@media(min-width:1024px){
  .listing-header{padding-block:5rem 3rem}
  .listing-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}
  .card-slides__nav{display:flex}
  .listing-card:hover .card-slides__nav{opacity:1}
}
@media(max-width:599px){
  .modal__row{grid-template-columns:1fr}
  .modal__body{padding:2rem 1.5rem 1.5rem}
}