/* Carousel mechanics, shared by every [data-carousel] section. Slide CONTENT
   is styled by the owning section's stylesheet; only visibility/stacking and
   the crossfade live here. Without JS the markup's .is-active slide shows and
   the rest stay hidden; site.js upgrades this to a crossfade. */

.carousel {
  position: relative;
}

.carousel__slides {
  display: grid;
  touch-action: pan-y;
}

.carousel__slide {
  grid-area: 1 / 1;
}

.carousel__slide:not(.is-active) {
  display: none;
}

.js .carousel__slide {
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.6s ease,
    visibility 0s 0.6s;
}

.js .carousel__slide.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 0.6s ease,
    visibility 0s;
}

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

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: var(--space-10);
  cursor: pointer;
  color: var(--dozen-red);
}

.carousel__arrow--prev {
  left: var(--space-40);
}

.carousel__arrow--next {
  right: var(--space-40);
}

html:not(.js) .carousel__arrow {
  display: none;
}

/* Slide dots, built by site.js (so no-JS pages never show them). Sections
   recolor via `color` and can switch to static flow; the dot itself draws
   with currentColor. Buttons stay 24px for tap targets; the visible dot is
   the 10px ::before. */
.carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-20);
  display: flex;
  justify-content: center;
  gap: 2px;
  color: var(--dozen-dark);
}

.carousel__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.carousel__dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.carousel__dot.is-active::before {
  background-color: currentColor;
}

/* Sits at the end of the dot row rather than in it, so the dots stay centred
   exactly where they were. Same 24px target and currentColor as a dot, so it
   recolours with the section like everything else in this row. */
.carousel__pause {
  position: absolute;
  right: var(--space-40);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.carousel__pause::before {
  content: "";
  width: 8px;
  height: 10px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

/* Paused: a play triangle, drawn with the same single element. */
.carousel__pause.is-paused::before {
  width: 0;
  height: 0;
  border-left: 9px solid currentColor;
  border-right: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.carousel__pause:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.carousel__dot:focus-visible {
  outline-color: currentColor;
}