/* ================================
   Photo Gallery (mobile-first)
   ================================ */

/* Section title spans full width within gallery layouts */
.photo-gallery .section-title {
  flex-basis: 100%;
  width: 100%;
}

/* Grid: start stacked on small screens */
.photo-gallery-grid {
  display: grid;
  gap: clamp(8px, 2vw, 12px);
  grid-template-columns: 1fr;
  justify-content: start;
}

/* Items & images */
.photo-gallery .photo-item {
  width: 100%;
  box-sizing: border-box;
}

.listing-photo {
  display: block;
  width: 100%;
  height: auto;            /* default responsive image */
  /* If you want consistent tile ratios, uncomment:
     aspect-ratio: 4 / 3;
     object-fit: cover;
  */
}

/* Lightbox overlay */
.lightbox-overlay {
  display: none;           /* toggled by JS */
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: rgba(0,0,0,.8);
  justify-content: center;
  align-items: center;
  padding: 2vw;            /* safe gutter on tiny screens */
}

.lightbox-overlay .lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox-overlay img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;         /* click = next */
  box-shadow: 0 0 10px #000;
  touch-action: manipulation; /* improves tap responsiveness */
}

/* Controls */
.lightbox-close,
.lightbox-arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  box-shadow: var(--drop-shadow);
  color: #fff;
}

/* Close button (top-right) */
.lightbox-close {
  top: 10px;
  right: 10px;
  background-color: rgba(82,169,201,.6);
  width: clamp(36px, 6vw, 44px);
  height: clamp(36px, 6vw, 44px);
  font-size: clamp(1rem, 2.8vw, 1.4rem);
  font-weight: 700;
}
.lightbox-close:hover { background-color: rgba(82,169,201,.9); }

/* Arrows (centered vertically) */
.lightbox-arrow {
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(232,120,10,.6);
  width: clamp(36px, 6vw, 44px);
  height: clamp(36px, 6vw, 44px);
  font-size: clamp(1rem, 2.8vw, 1.4rem);
}
.lightbox-arrow:hover { background-color: rgba(82,169,201,.8); }

.lightbox-arrow.left  { left: 10px; }
.lightbox-arrow.right { right: 10px; }
.lightbox-arrow.hidden { display: none; }

/* Make thumbnails obviously tappable */
.lightbox-trigger { cursor: pointer; }

/* Accessibility / motion preferences */
@media (prefers-reduced-motion: reduce) {
  .lightbox-overlay, .lightbox-close, .lightbox-arrow { transition: none; }
}

/* ================================
   Progressive Enhancement
   ================================ */

/* ~640px: two columns */
@media (min-width: 40rem) {
  .photo-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ~1024px: three columns */
@media (min-width: 64rem) {
  .photo-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ~480px: three columns */
@media (max-width: 30rem) {
.lightbox-trigger { pointer-events: none; cursor: default; }
}