/* -----------------------
   Portos Properties CSS
   Pixel values and tokens to match screenshot
   ----------------------- */

/* Typeface: Inter (or system sans). If not loaded, falls back to system */
.popular-section { text-align:center; padding:64px 20px 48px; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
.popular-section .container { max-width: 1200px; margin: 0 auto; }

/* Title */
.popular-section h2 {
  font-size: 56px;         /* desktop */
  line-height: 1.05;
  font-weight: 700;        /* bold */
  margin: 0 0 12px;
  color: #111111;
}

/* Subtitle */
.popular-section p.lead {
  font-size: 18px;
  font-weight: 400;
  color: #8a8a8a;
  margin: 0 0 32px;
}

/* Chips row */
.chips-row { display:flex; align-items:center; justify-content:space-between; gap:20px; margin: 26px auto 32px; }
.chips-left { display:flex; gap:18px; align-items:center; }

/* Single chip pill */
.chip {
  background:#f3f3f3;
  padding:12px 26px;        /* vertical/horizontal padding from screenshot */
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  color:#333333;
  border: none;
  cursor: pointer;
  box-shadow:none;
  transition: background .18s, color .18s;
}
.chip:focus { outline: 3px solid rgba(0,0,0,0.08); outline-offset: 3px; }
.chip.active, .chip[aria-pressed="true"] { background:#111111; color:#ffffff; }

/* Explore all button */
.explore-btn {
  background:#111111;
  color:#ffffff;
  font-weight:600;
  font-size:15px;
  padding:12px 22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.explore-btn .circle-icon {
  width:36px;
  height:36px;
  border-radius:50%;
  background:#ffffff;
  color:#111111;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

/* Grid layout */
.props-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:34px;
  max-width:1200px;
  margin: 0 auto;
  padding-top: 18px;
}

/* Responsive breakpoints */
@media (max-width: 992px){
  .props-grid { grid-template-columns: repeat(2, 1fr); }
  .popular-section h2 { font-size: 40px; }
}
@media (max-width: 600px){
  .props-grid { grid-template-columns: 1fr; }
  .popular-section h2 { font-size: 36px; }
  .chip { padding:10px 18px; font-size:14px; }
}

/* Card */
.prop-card {
  background: #ffffff;
  border-radius: 28px; /* card outer radius */
  box-shadow: 0 12px 40px rgba(30,30,30,0.07); /* strong soft shadow */
  display:flex;
  flex-direction:column;
  overflow:visible;
}

/* Inner image container */
.prop-image {
  position:relative;
  padding:20px; /* spacing around image to give rounded inner look */
}
.prop-image img {
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  border-radius:22px; /* inner image corner radius */
  box-shadow:none;
}

/* Heart wishlist button */
.wishlist {
  position:absolute;
  right:34px;
  top:78px;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#ffffff;
  border:1px solid #efefef;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:16px;
}

/* Body text */
.prop-body { padding:18px 24px 12px; flex:1; }
.prop-title { font-size:20px; font-weight:500; margin:0 0 6px; color:#111111; }
.prop-address { font-size:13px; color:#8b8b8b; }

/* Footer price bar */
.prop-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 18px;
  background:#000000;
  border-bottom-left-radius:28px;
  border-bottom-right-radius:28px;
}
.prop-price { font-weight:700; font-size:16px; }
.details-pill {
  background:#ffffff;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid #e6e6e6;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  color:#ffffff;
}

/* Minor helpers */
.no-properties { color:#777; padding:24px; text-align:center; }