/* =========================================================
   COMMERCIAL PROPERTIES — shares tokens/buttons from style.css
   ========================================================= */

/* ---- Page hero (small banner) ---- */
.properties-hero{
  padding:64px 0 48px;
  background:var(--primary-deep);
}
.properties-hero .breadcrumb{
  color:rgba(255,255,255,.6);
  font-size:.85rem;
  margin-bottom:14px;
}
.properties-hero .breadcrumb a{ color:var(--gold-bright); }
.properties-hero .breadcrumb span{ margin:0 6px; }
.properties-hero h1{
  color:var(--white);
  font-size:clamp(1.8rem,3.2vw,2.6rem);
  margin-bottom:10px;
}
.properties-hero-lead{
  color:rgba(255,255,255,.8);
  max-width:56ch;
  margin:0;
}

/* ---- Grid ---- */
.properties-list{ padding:72px 0 96px; }
.properties-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

/* ---- Card ---- */
.property-card{
  background:var(--white);
  border:1px solid var(--hairline);
  display:flex;
  flex-direction:column;
}

/* ---- Image slider ---- */
.property-slider{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--hairline);
}
.slider-track{
  display:flex;
  height:100%;
  transition:transform .4s ease;
}
.slider-track img{
  flex:0 0 100%;
  width:100%; height:100%;
  object-fit:cover;
}
.property-badge{
  position:absolute;
  top:14px; left:14px;
  z-index:2;
  background:var(--primary-deep);
  color:var(--white);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.03em;
  padding:5px 12px;
}
.property-badge.badge-rent{
  background:linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  color:var(--primary-deep);
}
.slider-arrow{
  position:absolute;
  top:50%; transform:translateY(-50%);
  width:32px; height:32px;
  border:none;
  background:rgba(13,32,55,.55);
  color:var(--white);
  font-size:.95rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:2;
  transition:background .18s ease;
}
.slider-arrow:hover{ background:var(--primary-deep); }
.slider-arrow.prev{ left:10px; }
.slider-arrow.next{ right:10px; }

.slider-dots{
  position:absolute;
  bottom:12px; left:0; right:0;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:6px;
}
.slider-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  border:none;
  padding:0;
  cursor:pointer;
}
.slider-dot.active{ background:var(--white); width:16px; border-radius:4px; }

/* ---- Body / specs ---- */
.property-body{
  padding:22px 22px 24px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.property-body h3{
  font-size:1.08rem;
  line-height:1.3;
  margin-bottom:8px;
}
.property-location{
  font-size:.85rem;
  color:var(--gold-deep);
  font-weight:600;
  margin-bottom:14px;
}
.property-specs{ margin:0 0 16px; }
.property-specs li{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:7px 0;
  border-bottom:1px solid var(--hairline);
  font-size:.86rem;
}
.property-specs li:first-child{ padding-top:0; }
.property-specs li span{ color:var(--muted); }
.property-specs li strong{ color:var(--ink); text-align:right; font-weight:600; }

.property-price{
  font-family:var(--font-display);
  font-size:1.35rem;
  color:var(--primary-deep);
  font-weight:600;
  margin:0 0 18px;
}
.property-price span{
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:500;
  color:var(--muted);
}

.property-actions{
  display:flex;
  gap:10px;
  margin-top:auto;
}
.btn-sm{
  padding:10px 16px;
  font-size:.85rem;
  flex:1;
  justify-content:center;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .properties-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .properties-grid{ grid-template-columns:1fr; }
  .property-actions{ flex-direction:column; }
}

/* ---- Single image (no slider) card variant ---- */
.property-media-single{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--hairline);
}
.property-media-single img{
  width:100%; height:100%;
  object-fit:cover;
}
.property-badge.sample{
  background:transparent;
  border:1px dashed rgba(255,255,255,.7);
  color:var(--white);
}
.property-badge.sample.badge-rent{
  border-color:var(--primary-deep);
  background:transparent;
  color:var(--primary-deep);
}