/* Home photo strip under the hero (Tim, 2026-10-21; reference: the team photo strip on aicollegas.nl).
   One row of rounded photos slides left without end. The track holds the list twice and moves by half its width,
   so the loop has no seam. The strip clips its own overflow, so the page never scrolls sideways. */
.photo-strip {
  --ph: clamp(160px, 16.8vw, 240px);
  --pgap: var(--s-4);
  background: var(--surface);
  padding: var(--s-7) 0 var(--s-6);
  overflow: hidden;
}
.photo-strip:focus-visible {
  outline-offset: -4px;
}
.photo-track {
  display: flex;
  width: max-content;
  animation: photo-slide 55s linear infinite;
}
/* the gap sits after every photo, also the last, so half the track is exactly one list */
.photo-set {
  display: flex;
  gap: var(--pgap);
  padding: 0 var(--pgap) 0 0;
  margin: 0;
  list-style: none;
}
.photo-set li {
  flex: 0 0 auto;
}
.photo-set img {
  height: var(--ph);
  width: auto;
  aspect-ratio: 800 / 537;
  object-fit: cover;
  border-radius: var(--r-xl);
  background: var(--sunken);
}
.photo-strip:hover .photo-track,
.photo-strip:focus-within .photo-track {
  animation-play-state: paused;
}
@keyframes photo-slide {
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 900px) {
  .photo-strip {
    --pgap: var(--s-3);
    padding: var(--s-6) 0 var(--s-5);
  }
}
/* reduced motion: one still list that the visitor scrolls by hand */
@media (prefers-reduced-motion: reduce) {
  .photo-strip {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--pad);
    -webkit-overflow-scrolling: touch;
  }
  .photo-track {
    animation: none;
    padding-left: var(--pad);
  }
  .photo-set[aria-hidden] {
    display: none;
  }
  .photo-set li {
    scroll-snap-align: start;
  }
}