/* ===== PROPERTIES PAGE ===== */

.properties-hero {
  min-height: 70vh;
}
.properties-hero .hero-image-wrapper {
  height: 60vh;
}

/* FILTERS */
.properties-filters {
  padding: 40px 0; background: var(--cream);
  position: sticky; top: 75px; z-index: 100;
  border-bottom: 1px solid var(--sand);
}
.filter-bar { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.filter-btn {
  padding: 12px 32px; border-radius: 50px; border: 1px solid var(--sand);
  background: transparent; font-family: var(--font-sans); font-size: 0.85rem;
  font-weight: 500; color: var(--navy); cursor: pointer; text-transform: uppercase;
  letter-spacing: 1px; transition: var(--transition-fast);
}
.filter-btn:hover { border-color: var(--navy); }
.filter-btn.active { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* GRID */
.properties-section { padding: 100px 0 150px; background: var(--cream); }
.properties-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px 60px; }

/* CARD */
.property-card { display: flex; flex-direction: column; group; }
.property-img {
  position: relative; height: 500px; overflow: hidden; margin-bottom: 30px;
}
.property-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.property-card:hover .property-img img { transform: scale(1.05); }

.property-badge {
  position: absolute; top: 20px; left: 20px;
  background: var(--white); padding: 8px 16px;
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600;
  color: var(--navy); text-transform: uppercase; letter-spacing: 1px;
}
.property-rating {
  position: absolute; top: 20px; right: 20px;
  background: rgba(15, 18, 22, 0.8); backdrop-filter: blur(8px);
  padding: 8px 16px; color: var(--gold); font-size: 0.85rem; font-weight: 600;
}
.property-rating.new-tag {
  background: var(--gold); color: var(--white); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;
}

.property-info { padding-right: 40px; }
.property-info h3 {
  font-size: 2rem; margin-bottom: 8px; color: var(--navy);
  transition: color var(--transition-fast);
}
.property-card:hover .property-info h3 { color: var(--gold); }
.property-location { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-light); margin-bottom: 24px; }

.property-meta {
  display: flex; gap: 12px; align-items: center; padding-top: 20px;
  border-top: 1px solid var(--sand);
}
.property-meta span { font-size: 0.95rem; color: var(--navy); }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .properties-grid { grid-template-columns: 1fr; gap: 60px; max-width: 600px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .properties-hero { height: 40vh; }
  .filter-btn { padding: 10px 20px; font-size: 0.75rem; }
  .properties-filters { top: 60px; }
  .property-img { height: 350px; }
}