/* ============================================================
   IMAGE.CSS  –  Fotolijstjes + carrousel (slider)
   ============================================================ */

/* witte "polaroid" lijst voor projectafbeeldingen
   - witte randen rondom met margin
   - onderste rand groter dan de andere randen (polaroid-effect) */
.poleroid {
  background: var(--wit);
  padding: 18px 18px 48px;            /* dikke randen, onderkant bewust groter */
  box-shadow: 0 8px 20px rgba(0, 0, 45, 0.18);
}

/* de afbeelding zit in een link; die is de "lijst" waarover de tint komt */
.poleroid a {
  display: block;
  position: relative;
  overflow: hidden;
}

/* standaard: grijswaarden met lichtblauwe tint van 30% eroverheen */
.poleroid img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1);
  transition: filter .4s ease;
}
.poleroid a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lichtblauw);
  opacity: .30;
  pointer-events: none;
  transition: opacity .4s ease;
}

/* bij hover: echte kleuren tonen, tint verdwijnt */
.poleroid a:hover img { filter: grayscale(0); }
.poleroid a:hover::after { opacity: 0; }

/* ---- foto-accordion (about-pagina) -------------------------- */
/* rij met fotopanelen; het paneel waarover je hovert wordt
   breder, de andere drukken samen (puur CSS via flex-grow) */

.image-accordion {
  display: flex;
  gap: 22px;
  width: 100%;
  margin: 0 auto;
}

.image-accordion-panel {
  flex: 1 1 0;                 /* standaard zijn alle panelen even breed */
  min-width: 0;                /* laat panelen kleiner krimpen dan hun inhoud */
  overflow: hidden;
  border-radius: 4px;
  transition: flex-grow .4s ease;
}

/* het gehoverde paneel groeit, de rest blijft flex-grow:1 en wordt dus smaller */
.image-accordion:hover .image-accordion-panel:hover {
  flex-grow: 4;
}

.image-accordion-panel img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
  transition: filter .4s ease;
}

.image-accordion-panel:hover img { filter: grayscale(0); }

@media screen and (max-width: 768px) {
  .image-accordion-panel img { height: 240px; }
}