/* ================================================================
   gallery.css – Thumbnail-Grid + PhotoSwipe-Ergänzungen
   Pfad: assets/css/gallery.css
================================================================ */

/* ── Thumbnail-Grid ───────────────────────────────────────────── */
.pswp-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 0.75rem;
}

/* ── Einzelnes Galerie-Element ────────────────────────────────── */
.pswp-gallery__item {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  /* Seitenverhältnis 16 : 9 für alle Thumbnails erzwingen */
  aspect-ratio: 16 / 9;
  background: #1e1e1e;
  cursor: zoom-in;
  /* A11y: sichtbarer Fokus-Ring ───────────────────────── */
  outline-offset: 3px;
}

.pswp-gallery__item:focus-visible {
  outline: 3px solid #4a9eff;
  border-radius: 6px;
}

/* Bild füllt den Link-Container vollständig */
.pswp-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover-Feedback ───────────────────────────────────────── */
@media (hover: hover) {
  .pswp-gallery__item:hover img {
    transform: scale(1.04);
    filter: brightness(1.08);
  }
}

/* ── PhotoSwipe-Override: Custom-Akzentfarbe ──────────────────── */
:root {
  --pswp-bg: rgba(0, 0, 0, 0.92);
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #999;
  --pswp-icon-stroke-color: #1a1a1a;
  --pswp-icon-stroke-width: 1px;
}

/* ── Reduced Motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pswp-gallery__item img {
    transition: none;
  }
}