/*
 * Shared CMS carousel — structural styles.
 *
 * All colours, sizes, and spacings are driven by CSS custom properties so
 * each theme can override them without touching this file. Set the variables
 * inside a scoped selector in your theme's style.css, e.g.:
 *
 *   .hero .cms-carousel {
 *     --cms-carousel-dot-bg-active: var(--color-secondary);
 *   }
 *
 * See themes/_shared/README.md for the full variable reference.
 */

/* --------------------------------------------------------------------------
   CSS variables — defaults
   -------------------------------------------------------------------------- */
:root {
  --cms-carousel-transition:     600ms ease-in-out;
  --cms-carousel-arrow-size:     48px;
  --cms-carousel-arrow-bg:       rgba(0, 0, 0, 0.40);
  --cms-carousel-arrow-fg:       #fff;
  --cms-carousel-arrow-bg-hover: rgba(0, 0, 0, 0.70);
  --cms-carousel-arrow-edge:     1.5rem;
  --cms-carousel-dot-size:       12px;
  --cms-carousel-dot-bg:         transparent;
  --cms-carousel-dot-bg-active:  #fff;
  --cms-carousel-dot-border:     rgba(255, 255, 255, 0.65);
  --cms-carousel-dots-bottom:    1.5rem;
}

/* --------------------------------------------------------------------------
   Root
   -------------------------------------------------------------------------- */
.cms-carousel {
  position: relative;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Slides
   -------------------------------------------------------------------------- */
.cms-carousel__slides {
  position: absolute;
  inset: 0;
}

.cms-carousel__slides > .cms-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--cms-carousel-transition);
  pointer-events: none;
}

.cms-carousel__slides > .cms-carousel__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Arrow buttons
   -------------------------------------------------------------------------- */
.cms-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: var(--cms-carousel-arrow-size);
  height: var(--cms-carousel-arrow-size);
  border-radius: 50%;
  border: none;
  background: var(--cms-carousel-arrow-bg);
  color: var(--cms-carousel-arrow-fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s, background 0.2s;
}

.cms-carousel:hover .cms-carousel__arrow,
.cms-carousel:focus-within .cms-carousel__arrow {
  opacity: 1;
}

.cms-carousel__arrow:hover {
  background: var(--cms-carousel-arrow-bg-hover);
}

.cms-carousel__arrow--prev { left:  var(--cms-carousel-arrow-edge); }
.cms-carousel__arrow--next { right: var(--cms-carousel-arrow-edge); }

/* --------------------------------------------------------------------------
   Dot indicators
   -------------------------------------------------------------------------- */
.cms-carousel__dots {
  position: absolute;
  bottom: var(--cms-carousel-dots-bottom);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 0.5rem;
}

.cms-carousel__dot {
  width: var(--cms-carousel-dot-size);
  height: var(--cms-carousel-dot-size);
  border-radius: 50%;
  border: 2px solid var(--cms-carousel-dot-border);
  background: var(--cms-carousel-dot-bg);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, border-color 0.3s;
}

.cms-carousel__dot.is-active {
  background: var(--cms-carousel-dot-bg-active);
  border-color: var(--cms-carousel-dot-bg-active);
}

/* --------------------------------------------------------------------------
   Accessibility — reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cms-carousel__slides > .cms-carousel__slide {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .cms-carousel__arrow {
    width: calc(var(--cms-carousel-arrow-size) * 0.75);
    height: calc(var(--cms-carousel-arrow-size) * 0.75);
  }

  .cms-carousel__arrow--prev { left:  0.75rem; }
  .cms-carousel__arrow--next { right: 0.75rem; }

  .cms-carousel__dots {
    bottom: calc(var(--cms-carousel-dots-bottom) * 0.75);
  }
}