/* Gallery grid */
.gallery-grid { margin-top: 1rem; }
.gallery-item { display: flex; flex-direction: column; align-items: center; }
/* Per-image aspect-ratio support: images can set --ar (e.g. "16/9" or "3/4"). Defaults to 16:9. */
.gallery-thumb { display: block; width: 100%; aspect-ratio: var(--ar, 16/9); overflow: hidden; }
.gallery-thumb picture, .gallery-thumb img { width: 100%; height: 100%; display: block; }

/* Default behavior: cover (fills 16:9 box and crops as needed). */
.gallery-thumb img { object-fit: cover; }

/* For poster/portrait or images you want fully visible, add the 'contain' class.
   This will letterbox/pillarbox as needed so the full image is visible.
   Use a light frame/background instead of black to match the site and make posters readable. */
.gallery-thumb.contain { display: flex; align-items: center; justify-content: center; background-color: var(--thumb-bg, #ffffff); padding: 0.5rem; box-sizing: border-box; border-radius: 6px; }
.gallery-thumb.contain img { object-fit: contain; background-color: transparent; max-width: 100%; max-height: 100%; }

/* Modal: give contained images a white card so they don't appear with black bars */
.gallery-modal-content img.contain { background-color: #ffffff; padding: 0.5rem; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.32); }


/* Modal */
.gallery-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center; z-index: 1050; }
.gallery-modal[aria-hidden="false"] { display: flex; animation: galleryFadeIn .18s ease-out; }
.gallery-modal-inner { max-width: 1400px; width: calc(100% - 2rem); padding: 1.25rem; color: white; position: relative; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.6); }
.gallery-modal-content { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.gallery-modal-content img { max-height: calc(100vh - 220px); max-width: 100%; object-fit: contain; border-radius: 4px; }
.gallery-close { position: absolute; top: 0.75rem; right: 0.75rem; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.06); color: white; font-size: 2.25rem; width: 48px; height: 48px; border-radius: 6px; }
.gallery-close:focus { outline: 2px solid rgba(255,255,255,0.12); }

/* Prev / next controls */
.gallery-prev, .gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.06);
  color: white;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-prev { left: 0.5rem; }
.gallery-next { right: 0.5rem; }
.gallery-prev:hover, .gallery-next:hover, .gallery-close:hover { background: rgba(0,0,0,0.7); }

/* Larger, more prominent controls on desktop */
@media (min-width: 992px) {
  /* Larger, more prominent controls on desktop */
  .gallery-prev, .gallery-next {
    width: 88px;
    height: 88px;
    font-size: 2.75rem;
    z-index: 1060;
  }

  /* Place prev on the left, next on the right */
  .gallery-prev { left: 1.25rem; }
  .gallery-next { right: 1.25rem; }
}

#gallery-modal-counter { opacity: 0.95; }

.download-line { text-align: center; }

/* Slightly larger download button for visibility */
#gallery-modal-download { min-width: 140px; }

@keyframes galleryFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 992px) {
  /* Slightly taller thumb area on large screens while keeping 16:9 ratio */
  .gallery-thumb { aspect-ratio: 16/9; }
}