/**
 * Front-end Image Slider styles matching Town of Caledon design system.
 */

:root {
  --brand-blue: #005696;
}

.image-slider {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 30px auto;
  border-radius: var(--radius, 8px);
  overflow: hidden;
  box-shadow: none !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: unset !important;
}

.image-slider__slide {
  margin: 0;
  height: auto !important;
}

.image-slider__slide img {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: unset !important;
  object-fit: contain;
}

.image-slider__status {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Enhanced (JS) Slider ---- */

.image-slider--js {
  outline: none;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: unset !important;
  box-shadow: none !important;
}

.image-slider--js .image-slider__track {
  display: flex;
  transition: transform 0.4s ease-in-out;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: unset !important;
  align-items: center;
}

.image-slider--js .image-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  height: auto !important;
}

.image-slider--js .image-slider__slide img {
  width: 100%;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: unset !important;
  object-fit: contain;
  display: block;
}

/* Navigation Buttons */
.slider-btn,
.image-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: var(--brand-blue, #005696);
  transition: background 0.15s ease, box-shadow 0.15s ease;
  padding: 0;
}

.slider-btn:hover,
.slider-btn:active,
.image-slider__nav:hover,
.image-slider__nav:focus-visible {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  color: var(--brand-blue, #005696);
}

.slider-btn svg,
.image-slider__nav svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.slider-btn.prev,
.image-slider__nav--prev {
  left: 16px;
}

.slider-btn.next,
.image-slider__nav--next {
  right: 16px;
}

/* Pagination Dots */
.slider-dots,
.image-slider__dots {
  display: none !important;
}

.slider-dot,
.image-slider__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.slider-dot.active,
.image-slider__dot.is-active {
  background: #ffffff;
}

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