:root { --spacing: 1.25rem; }

.hero { margin: 2rem 0; }
.hero h1 { margin-bottom: 0.25rem; }

.unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.unit-card {
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--pico-muted-border-color);
  text-decoration: none;
  color: inherit;
  background: var(--pico-card-background-color);
  transition: transform .15s ease, box-shadow .15s ease;
}
.unit-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }

.unit-card-photo { position: relative; aspect-ratio: 4 / 3; background: #eee; }
.unit-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unit-card-noimg {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: #999; font-size: .9rem;
}

.badge {
  position: absolute; top: .5rem; left: .5rem;
  padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
  color: #fff; text-transform: uppercase; letter-spacing: .02em;
}
.badge-available { background: #2e7d32; }
.badge-occupied { background: #c62828; }
.badge-unavailable { background: #757575; }

h1 .badge, h1 + .badge, main > .badge { position: static; display: inline-block; margin-bottom: .5rem; }

.unit-card-body { padding: 1rem; }
.unit-card-body h3 { margin: 0 0 .25rem; }
.unit-card-area { color: var(--pico-muted-color); margin: 0 0 .5rem; }
.unit-card-specs { font-size: .9rem; color: var(--pico-muted-color); margin: 0 0 .5rem; }
.unit-card-rent { font-weight: 700; margin: 0; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .75rem;
  margin: 1.5rem 0;
}
.gallery img { width: 100%; height: 220px; object-fit: cover; border-radius: .4rem; }

footer { margin: 3rem 0 1.5rem; color: var(--pico-muted-color); font-size: .9rem; }