/* ============================================
   Masonry Gallery Styles
   ============================================ */

.gallery-grid {
  columns: 3;
  column-gap: 16px;
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #f5f5f5;
}

.gallery-item img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.02);
  opacity: 0.92;
}

/* Overlay with title & details on hover */
.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-item-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.gallery-item-details {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.5px;
}

/* Status badge (top-right corner) */
.gallery-item-status {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  z-index: 2;
}

.gallery-item-status.status-sold {
  background: rgba(0, 0, 0, 0.7);
  color: rgba(255, 255, 255, 0.85);
}

.gallery-item-status.status-available {
  background: rgba(255, 255, 255, 0.9);
  color: #111;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .gallery-grid {
    columns: 2;
  }
}

@media (max-width: 600px) {
  .gallery-grid {
    columns: 1;
    column-gap: 0;
  }

  .gallery-item {
    margin-bottom: 12px;
  }

  /* Always show overlay on mobile (no hover) */
  .gallery-overlay {
    opacity: 1;
    background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.55));
  }
}