.property-gallery { position: relative; }
/* Hide internal slides container to avoid duplicate tall blocks; we only use it as a data source */
.property-gallery .gallery-slides { display: none !important; }

.property-gallery .main-image { position: relative; border-radius: 10px; overflow: hidden; background: #f5f7fb; }
.property-gallery .main-image img { width: 100%; height: clamp(280px, 56vh, 560px); object-fit: cover; display: block; }

.property-gallery .gallery-controls { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; pointer-events: none; }
.property-gallery .gallery-controls button { pointer-events: all; background: rgba(0,0,0,0.5); color: #fff; border: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.property-gallery .thumbnail-gallery { margin-top: 12px; gap: 10px; display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.property-gallery .thumbnail-gallery::-webkit-scrollbar { height: 6px; }
.property-gallery .thumbnail-gallery::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
.property-gallery .thumbnail-gallery .thumbnail-img { width: 120px; height: 80px; object-fit: cover; border-radius: 6px; border: 2px solid transparent; cursor: pointer; flex: 0 0 auto; }
.property-gallery .thumbnail-gallery .thumbnail-img.active { border-color: var(--primary-blue); }

@media (max-width: 991.98px) {
  .property-gallery .main-image img { height: clamp(220px, 48vh, 420px); }
  .property-gallery .thumbnail-gallery .thumbnail-img { width: 96px; height: 64px; }
}

/* Lightbox (fullscreen overlay) */
.yh-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.9); display: none; align-items: center; justify-content: center; z-index: 9999; }
.yh-lightbox.open { display: flex; }
.yh-lightbox img { max-width: 96vw; max-height: 92vh; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,0.6); border-radius: 6px; }
.yh-lightbox .yh-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; display: flex; align-items: center; justify-content: center; border: 0; }
.yh-lightbox .yh-prev, .yh-lightbox .yh-next { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; }
.yh-lightbox .yh-prev { left: 16px; }
.yh-lightbox .yh-next { right: 16px; }