/* ============================================
   Fotogalerij (components/gallery.njk)
   Raster zoals de Elementor Pro-galerij: 4 kolommen (tablet 2, mobiel 1),
   10px tussenruimte, vaste beeldverhouding, donkere laag bij hover (800ms).
   ============================================ */
.gallery {
  --gallery-cols: 4;
  --gallery-gap: 10px;
  --gallery-ratio: 66.6667%;
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols), 1fr);
  gap: var(--gallery-gap);
  width: 100%;
  min-height: 1px;
}
.gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  padding-bottom: var(--gallery-ratio);
  text-decoration: none;
}
.gallery__item picture { display: contents; }
.gallery__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: filter 800ms, transform 800ms;
}
.gallery__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 800ms;
}
.gallery__item:hover .gallery__overlay,
.gallery__item:focus-visible .gallery__overlay { background-color: rgba(0, 0, 0, 0.5); }

.gallery--c3 { --gallery-cols: 3; }
.gallery--square { --gallery-ratio: 100%; }

/* het origineel houdt op precies 1024px de desktopkolommen */
@media (max-width: 1023px) {
  .gallery { --gallery-cols: 2; }
}
@media (max-width: 767px) {
  .gallery { --gallery-cols: 1; }
}