/**
 * Carousel.
 *
 * Layered on top of splide.min.css, which supplies structural layout only.
 * Everything visual lives here and consumes tokens.
 */

.carousel {
  --_caption-pad: var(--space-s);
  --_control-size: 2.75rem;

  position: relative;
  inline-size: 100%;
}

/* ----------------------------------------------------------------------
   Slides
   ---------------------------------------------------------------------- */

.carousel__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background-color: var(--color-surface-alt);
}

.carousel__image {
  inline-size: 100%;
  block-size: auto;
  display: block;
}

/* ----------------------------------------------------------------------
   Caption

   Gradient rather than flat opacity, so the contrast floor is predictable
   regardless of what the photograph contains. Worst case is a pure white
   image: white text over 85% black composites to ~#262626 (15:1), and over
   55% black to ~#737373 (4.74:1). Both clear AA.

   Do not lighten the 0.55 stop. That is the number the guarantee rests on.
   ---------------------------------------------------------------------- */

.carousel__figure--captioned::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 55%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.85) 0%,
    rgb(0 0 0 / 0.55) 35%,
    rgb(0 0 0 / 0) 100%
  );
}

.carousel__caption {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  z-index: 1;
  max-inline-size: 46ch;
  padding: var(--_caption-pad);
  color: var(--color-surface);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

/* ----------------------------------------------------------------------
   Controls

   Splide supplies arrows and pagination. These restyle them to tokens and
   enforce a 44px minimum target.
   ---------------------------------------------------------------------- */

.carousel .splide__arrow {
  inline-size: var(--_control-size);
  block-size: var(--_control-size);
  background-color: rgb(255 255 255 / 0.9);
  border-radius: 50%;
  opacity: 1;
}

.carousel .splide__arrow svg {
  fill: var(--color-ink-strong);
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.carousel .splide__arrow:hover:not(:disabled) {
  background-color: var(--color-surface);
}

.carousel .splide__arrow:disabled {
  opacity: 0.4;
}

.carousel .splide__pagination {
  padding-block: var(--space-2xs);
}

.carousel .splide__pagination__page {
  inline-size: 0.6rem;
  block-size: 0.6rem;
  background-color: var(--color-border);
  opacity: 1;
  margin: 0 var(--space-3xs);
}

.carousel .splide__pagination__page.is-active {
  background-color: var(--color-brand-strong);
  transform: none;
}

/*
 * Pagination dots are small by design, so the tappable area is enlarged
 * without enlarging the visible dot.
 */
.carousel .splide__pagination li {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
}

/* ----------------------------------------------------------------------
   Play / pause toggle
   Required by WCAG 2.2.2 whenever autoplay is on.
   ---------------------------------------------------------------------- */

.carousel__controls {
  position: absolute;
  inset-block-end: var(--space-s);
  inset-inline-end: var(--space-s);
  z-index: 4;
  display: flex;
  justify-content: flex-end;
}

.carousel__toggle {
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: var(--space-3xs) var(--space-2xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background-color: rgb(255 255 255 / 0.9);
  border-color: transparent;
  backdrop-filter: blur(4px);  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;

}

.carousel__toggle:hover {
  color: var(--color-ink-strong);
  border-color: var(--color-ink-muted);
}

/* Splide toggles which label is visible based on playing state. */
.carousel__toggle .splide__toggle__play,
.carousel__toggle .splide__toggle__pause {
  display: none;
}

.carousel__toggle.is-active .splide__toggle__pause,
.carousel__toggle:not(.is-active) .splide__toggle__play {
  display: inline;
}

/* ----------------------------------------------------------------------
   Focus

   Splide sets tabindex on the track, so it is keyboard reachable. Make that
   visible, since tokens.css only styles :focus-visible on default elements.
   ---------------------------------------------------------------------- */

.carousel .splide__track:focus-visible,
.carousel .splide__arrow:focus-visible,
.carousel .splide__pagination__page:focus-visible,
.carousel__toggle:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}
.carousel .splide__slide {
  margin-inline-end: 0;
}