/* ================= PROPERTY GRID ================= */
.grid-props{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 256px), 1fr));
  gap:var(--sp-5);
}
@media (min-width:640px){.grid-props{gap:var(--sp-6)}}

/* Property Card: Rounded container with subtle border and elevated soft shadow */
.p-card{
  background:#ffffff;
  border-radius:22px;
  border:1px solid rgba(14, 35, 64, 0.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  box-shadow:
    0 2px 4px rgba(8, 21, 39, 0.04),
    0 10px 24px -6px rgba(8, 21, 39, 0.08);
  transition:transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change:transform;
}
.p-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 4px 10px rgba(8, 21, 39, 0.06),
    0 20px 38px -8px rgba(8, 21, 39, 0.16);
}

/* Media area: Top rounded image container */
.p-media{
  position:relative;
  aspect-ratio:16/11;
  overflow:hidden;
  background:#f0f2f5;
  border-radius:22px 22px 0 0;
}
.p-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.p-card:hover .p-media img{
  transform:scale(1.05);
}

/* Pill Badges: Soft glassmorphic / beveled capsule styling */
.p-badges{
  position:absolute;
  top:0.85rem;
  left:0.85rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem;
  z-index:3;
}
.p-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.32rem 0.75rem;
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:999px;
  line-height:1;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.p-badge.gold{
  background:linear-gradient(180deg, #d8b66e 0%, #be9744 100%);
  color:#241906;
  border:1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.65),
    0 2px 6px rgba(0, 0, 0, 0.15);
}
.p-badge.dark{
  background:linear-gradient(180deg, #3d5066 0%, #293849 100%);
  color:#ffffff;
  border:1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    0 2px 6px rgba(8, 21, 39, 0.2);
}
.p-badge.blue{
  background:linear-gradient(180deg, #2b5684 0%, #17375c 100%);
  color:#ffffff;
  border:1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    0 2px 6px rgba(8, 21, 39, 0.2);
}

/* Price Overlay at bottom of media */
.p-price-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:2rem 1.15rem 0.85rem 1.15rem;
  background:linear-gradient(180deg, rgba(8, 21, 39, 0) 0%, rgba(8, 21, 39, 0.45) 35%, rgba(8, 21, 39, 0.92) 100%);
  color:#ffffff;
  z-index:2;
  pointer-events:none;
}
.p-price-overlay .from{
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(255, 255, 255, 0.75);
  margin-bottom:0.15rem;
}
.p-price-overlay .amt{
  font-family:var(--font-sans);
  font-size:1.35rem;
  font-weight:700;
  color:#e8c67f;
  line-height:1.2;
  text-shadow:0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Card Body */
.p-body{
  padding:1.15rem 1.25rem 1.35rem 1.25rem;
  flex:1;
  display:flex;
  flex-direction:column;
}
.p-name{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:700;
  color:#1c222b;
  margin:0 0 0.25rem;
  line-height:1.25;
}
.p-dev{
  font-size:0.82rem;
  color:#788290;
  margin-bottom:0.75rem;
  font-weight:400;
}
.p-loc{
  display:flex;
  align-items:flex-start;
  gap:0.45rem;
  font-size:0.83rem;
  color:#4e5765;
  margin-bottom:1rem;
  line-height:1.35;
}
.p-loc svg{
  width:15px;
  height:15px;
  color:#b89650;
  flex-shrink:0;
  margin-top:1px;
}
.p-loc span{
  flex:1;
}

/* Meta Section: 2 columns with top & bottom borders */
.p-meta{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:1rem;
  padding:0.8rem 0;
  border-top:1px solid #eeece7;
  border-bottom:1px solid #eeece7;
  margin-bottom:1.05rem;
}
.p-meta-item{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.p-meta-item strong{
  display:block;
  color:#1c222b;
  font-weight:700;
  font-size:0.95rem;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.p-meta-item span{
  display:block;
  color:#8c95a3;
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-top:0.25rem;
}

/* CTA View Details Link */
.p-cta{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  color:#1a3f6b;
  font-size:0.88rem;
  font-weight:700;
  margin-top:auto;
  letter-spacing:0.02em;
  text-decoration:none;
  transition:color 0.25s ease;
}
.p-cta svg{
  width:15px;
  height:15px;
  transition:transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.p-card:hover .p-cta{
  color:#0e2340;
}
.p-card:hover .p-cta svg{
  transform:translateX(5px);
}