/* gallery.css — responsive image grid */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

@media (min-width: 640px)  { .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } }
@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.gallery__item { display: flex; flex-direction: column; gap: var(--space-xs); }

.gallery__trigger {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  text-decoration: none;
}

.gallery__thumb {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base);
}

.gallery__trigger:hover .gallery__thumb,
.gallery__trigger:focus-visible .gallery__thumb { transform: scale(1.03); }

.gallery__trigger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.gallery__caption { padding-inline: var(--space-xs); }

.gallery__title {
  display: block;
  font-size: var(--size-sm);
  font-weight: 400;
}

.gallery__meta {
  display: block;
  font-size: var(--size-xs);
  color: var(--color-muted);
}

/* ── Lightbox ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-base);
}

.lightbox:not([hidden]) { opacity: 1; }
.lightbox[hidden] { display: none; }

.lightbox__stage {
  position: relative;
  max-width: min(90vw, 1000px);
  max-height: 90svh;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.lightbox__img {
  max-width: 100%;
  max-height: 80svh;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.lightbox__info { display: flex; gap: var(--space-md); align-items: baseline; }
.lightbox__title { font-size: var(--size-sm); }
.lightbox__meta  { font-size: var(--size-xs); color: var(--color-muted); }

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: fixed;
  color: var(--color-text);
  font-size: 1.5rem;
  padding: var(--space-md);
  opacity: 0.6;
  transition: opacity var(--dur-fast);
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { opacity: 1; }

.lightbox__close { top: var(--space-md); right: var(--space-md); }
.lightbox__prev  { left: var(--space-sm);  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: var(--space-sm); top: 50%; transform: translateY(-50%); }