/* ==========================================================================
   slideshow.css — Photo slideshow   (Figma: Design System › "Photo slideshow")
   Square photos, 24px corners, 1.2s cross-fade. No dot indicator.
   Auto-advances (5s), click the photo for the next one, swipe or ←/→,
   small pause button bottom-right (moving content needs a way to stop it).
   ========================================================================== */

.slideshow {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  touch-action: pan-y;                 /* vertical scroll stays native; we handle swipes */
}

.slideshow__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1200ms ease-in-out;   /* cross-fade: 1.2s */
}

.slideshow__slide.is-active {
  opacity: 1;
}

.slideshow__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Whole photo = "next" button, as in the Figma prototype */
.slideshow__next {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  border: 0;
  background: none;
  cursor: pointer;
}

.slideshow__next:focus-visible {
  outline-offset: -6px;
  border-radius: var(--radius-lg);
}

/* ---- Pause / play ----------------------------------------------------------------
   Auto-advancing content must be stoppable (accessibility), so a small round
   button sits bottom-right. 24×24 minimum touch target, 8px symbol. */
.slideshow__controls {
  position: absolute;
  right: var(--space-md);              /* 16 */
  bottom: var(--space-md);
  z-index: 2;
  display: flex;
  border-radius: 50%;
  background: rgb(30 27 22 / 0.28);
}

.slideshow__toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;                         /* 32 */
  height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.slideshow__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
  border-radius: 50%;
}

/* Pause (two bars) / Play (triangle), drawn in CSS, 8px like the dots */
.slideshow__toggle::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background:
    linear-gradient(#fff, #fff) left / 3px 100% no-repeat,
    linear-gradient(#fff, #fff) right / 3px 100% no-repeat;
}

.slideshow__toggle[aria-pressed="true"]::before {   /* paused → show play */
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Hidden until JavaScript runs (no-JS: first photo only) */
html:not(.js) .slideshow__controls,
html:not(.js) .slideshow__next {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .slideshow__slide { transition: none; }
}