/* ==========================================================
   LEATHER VISION – BANDLEDEN ALS KAARTEN ONDER DE BANNER (optie C)
========================================================== */
@font-face {
  font-family: "LV Rock";
  src: url("../fonts/PermanentMarker-Regular.ttf") format("truetype");
  font-display: swap;
}
.bandleden {
  max-width: 1100px; margin: 10px auto 0; padding: 0 15px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.lid {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 12px; text-decoration: none; background: #111;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  outline: 2px solid transparent; transition: outline-color .25s ease, transform .25s ease;
}
.lid-foto {
  position: absolute; inset: 0; background-size: cover;
  transition: transform .6s ease, filter .4s ease; filter: brightness(.85);
}
.lid::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.9) 100%);
}
.lid-tekst { position: absolute; left: 14px; right: 10px; bottom: 14px; z-index: 1; text-align: left; }
.lid-naam {
  display: block; font-family: "LV Rock", "Arial Black", sans-serif;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.05; color: #fff;
  transform: rotate(-6deg); transform-origin: left bottom;
  text-shadow: 3px 3px 0 #c00;
}
.lid:hover { outline-color: #c00; transform: translateY(-4px); }   /* alleen een effect, geen link */
.lid:hover .lid-foto { transform: scale(1.06); filter: brightness(1); }

@media (max-width: 900px) {
  .bandleden { grid-template-columns: repeat(6, 1fr); gap: 10px; }
  .lid { grid-column: span 2; }                       /* 3 op de eerste rij */
  .lid:nth-child(4) { grid-column: 2 / span 2; }     /* laatste 2 netjes in het midden */
}
@media (max-width: 560px) {
  .bandleden { grid-template-columns: repeat(2, 1fr); }
  .lid, .lid:nth-child(4) { grid-column: auto; }
  .lid:last-child { grid-column: 1 / -1; width: calc(50% - 5px); justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { .lid, .lid-foto { transition: none; } }

/* Naamsvermelding van de fotograaf onder de kaarten */
.foto-credit {
  max-width: 1100px; margin: 14px auto 0; padding: 0 15px;
  text-align: center; font-size: .85rem; letter-spacing: .5px; color: #888;
}
.foto-credit a { color: #ccc; text-decoration: none; border-bottom: 1px solid rgba(204,0,0,.6); padding-bottom: 1px; }
.foto-credit a:hover { color: #fff; border-bottom-color: #c00; }