/* ==========================================================================
   wsc-instagram — de galerij op de voorkant.
   Alles via de tokens uit wsc-core, zodat een thema hem meekleurt.
   ========================================================================== */

.wsc-ig-galerij {
  display: grid;
  grid-template-columns: repeat(var(--wsc-ig-kolommen, 4), minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 14px);
}

.wsc-ig-item { margin: 0; position: relative; }

.wsc-ig-item img {
  /* height:auto is nodig: de width/height-attributen op de <img> zetten anders
     een vaste hoogte, en dan negeert de browser aspect-ratio. */
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  transition: transform .4s ease, opacity .2s ease;
}
.wsc-ig-item:hover img { transform: scale(1.03); }

/* Het onderschrift is optioneel en mag de foto niet overstemmen. */
.wsc-ig-item figcaption {
  font-size: 13px;
  line-height: 1.4;
  color: var(--wsc-ink-3);
  margin-top: 7px;
}

.wsc-ig-volg { margin-top: clamp(18px, 3vw, 28px); }

.wsc-ig-hint {
  border: 1px dashed var(--wsc-line-2);
  padding: 20px;
  text-align: center;
  color: var(--wsc-ink-3);
  font-size: 14px;
}

@media (max-width: 900px) {
  .wsc-ig-galerij { grid-template-columns: repeat(min(var(--wsc-ig-kolommen, 4), 3), minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  /* Twee op een rij houdt de foto's herkenbaar; één is verspilling van hoogte. */
  .wsc-ig-galerij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}