/* =============================================================================
   carousel.css — lightweight photo carousel (see js/carousel.js). No-op /
   unstyled if a page never includes a [data-carousel] element.
   ============================================================================= */
.carousel { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface-2); }
.carousel__track { display: flex; transition: transform .5s ease; }
.carousel__slide { flex: 0 0 100%; position: relative; }
.carousel__slide picture,
.carousel__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carousel__slide img { aspect-ratio: 16 / 7; }

.carousel__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-4);
  background: linear-gradient(to top, rgba(15,23,42,.75), transparent);
  color: #fff;
}
.carousel__caption h3 { margin: 0; font-size: var(--text-lg); color: #fff; }

.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: rgba(255,255,255,.9); border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--color-text);
}
.carousel__nav:hover { background: #fff; }
.carousel__nav--prev { left: var(--space-3); }
.carousel__nav--next { right: var(--space-3); }

.carousel__dots { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.carousel__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; }
.carousel__dot[aria-current="true"] { background: #fff; }

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