/* ==========================================================================
   CAROUSEL (js/modules/carousel.js)
   Slides start on the grid's left edge and bleed off the right edge.
   Drag, buttons, dots and autoplay.
   ========================================================================== */

.carousel {
  position: relative;
  margin-top: var(--space-8);
}

.carousel__viewport {
  width: 100%;
  padding-inline: calc((100% - var(--grid-width)) / 2);
  overflow: visible;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.carousel__viewport.is-dragging {
  cursor: grabbing;
}

.carousel__track {
  position: relative;
  display: flex;
  gap: var(--space-5);
  transition: transform .7s var(--ease-out-quart);
  will-change: transform;
}

.carousel__slide {
  flex: none;
}

/* The slide peeking in from the side steps back a little */
.carousel__slide {
  transition: opacity var(--duration-slow) ease;
}

.carousel__slide:not(.is-current) {
  opacity: .5;
}

.carousel img {
  -webkit-user-drag: none;
  user-select: none;
}

@media (max-width: 767px) {
  .carousel {
    margin-top: var(--space-6);
  }

  .carousel__track {
    gap: var(--space-2);
  }
}

/* --------------------------------------------------------------------------
   Autoplay controls: play/pause + progress segments
   -------------------------------------------------------------------------- */
.carousel-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: var(--grid-width);
  margin: var(--space-6) auto 0;
  color: var(--color2);
}

.carousel-controls__toggle {
  position: relative;
  flex: none;
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-base) ease;
}

.carousel-controls__toggle:hover {
  border-color: currentColor;
}

.carousel-controls__toggle .icon {
  position: absolute;
  inset: 0;
  width: 1.6rem;
  height: 1.6rem;
  margin: auto;
}

.carousel.is-playing .carousel-controls__toggle .icon--play { display: none; }
.carousel:not(.is-playing) .carousel-controls__toggle .icon--pause { display: none; }

.carousel-pagination {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  max-width: 48rem;
}

.carousel-pagination__dot {
  position: relative;
  flex: 1;
  height: 2.4rem; /* comfortable hit area around a thin bar */
}

.carousel-pagination__dot::before,
.carousel-pagination__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
}

.carousel-pagination__dot::before {
  opacity: .18;
}

.carousel-pagination__dot::after {
  transform: scaleX(0);
  transform-origin: left;
}

.carousel-pagination__dot.is-active::after {
  animation: carousel-progress var(--duration, 6s) linear forwards;
}

/* Without autoplay (or paused), the active segment is simply full */
.carousel:not([data-autoplay]) .carousel-pagination__dot.is-active::after {
  transform: none;
  animation: none;
}

.carousel:not(.is-playing) .carousel-pagination__dot.is-active::after {
  animation-play-state: paused;
}

@keyframes carousel-progress {
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-pagination__dot.is-active::after {
    transform: none;
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Prev / next arrows (available for any carousel: data-carousel-prev/next)
   -------------------------------------------------------------------------- */
.carousel-arrows {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.carousel-arrows .btn-square {
  --size: 4rem;
}

.carousel-arrows .btn-square:disabled {
  opacity: .35;
  cursor: default;
}