/* =========================================================
   VISUAL SHOWCASE — START
   A continuous marquee strip — no <marquee> tag, no JS. The track
   holds the 7 real photos plus one duplicate set back to back;
   animating exactly -50% of the track's own width moves it by
   precisely "one full set," so the loop point is invisible.
   ========================================================= */

.showcase {
  padding-block: var(--space-2xl);
  background-color: var(--color-white);
}

/* Clips the track so only the visible strip shows; the rest of
   the (much wider) track sits off-screen to either side. */
.showcase__viewport {
  overflow: hidden;
  width: 100%;
}

.showcase__track {
  display: flex;
  width: max-content;
  animation: showcase-marquee 42s linear infinite;
}

/* Pausing on hover/keyboard-focus lets anyone actually read a
   caption or look closely at a photo instead of chasing it. */
.showcase__viewport:hover .showcase__track,
.showcase__track:focus-within {
  animation-play-state: paused;
}

.showcase__track.is-user-paused {
  animation-play-state: paused !important;
}

@keyframes showcase-marquee {
  from {
    transform: translateX(0);
  }
  to {
    /* Exactly the width of one full set of slides (half the
       track, since the track holds two sets back to back). */
    transform: translateX(-50%);
  }
}

@media (max-width: 767px) {
  .showcase__track {
    animation-duration: 18s;
  }

  /* Ignore sticky touch-hover/focus pause on small touch devices.
     Explicit taps are handled by JS instead. */
  .showcase__viewport:hover .showcase__track,
  .showcase__track:focus-within {
    animation-play-state: running;
  }
}

/* Continuously-moving content must be stoppable for anyone who
   has asked their OS/browser to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  .showcase__track {
    animation: none;
  }
}

.showcase__slide {
  flex: 0 0 auto;
  height: clamp(320px, 34vw, 500px);
  margin-right: var(--space-md);
}

.showcase__slide img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: cover;
}

/* =========================================================
   VISUAL SHOWCASE — END
   ========================================================= */