/*
  Photo slider inside a section (MB-143; Views/Partials/shared/photoSlider.cshtml, module page umbraco/modules/motion.md).
  Loaded only when a section renders a slider, so pages without one are unchanged. The carousel itself (fade, timing,
  drag) is motion.css and carousel.js; this file lays the dots over the bottom of the photo as the imported site's
  slick dots sat (measured from its stylesheet): 16 px rings with a 2 px border, the current one filled, centred,
  25 px apart and 50 px up from 1200 px; 15 px apart and 25 px up below; 15 px up below 576 px.
  Each dot keeps its 24 px target (WCAG 2.5.8), so the space between targets is the ring gap less 8 px.
  A thin dark edge round each ring keeps the white dots visible on light photos (UX-MB-143 U3, WCAG 1.4.11).
  Site hooks: --photo-slider-dot (ring and fill colour, default white), --photo-slider-dot-edge (the edge, a box-shadow;
  `none` turns it off), --photo-slider-dots-bottom, --photo-slider-dots-gap.
*/
.carousel.photo-slider { margin: 0; }
.photo-slider .carousel__viewport { position: relative; }
.photo-slider.is-enhanced .carousel__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--photo-slider-dots-bottom, 50px) - 4px);
  z-index: 2;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}
.photo-slider .carousel__dots { gap: calc(var(--photo-slider-dots-gap, 25px) - 8px); justify-content: center; }
.photo-slider .carousel__dot { pointer-events: auto; }
.photo-slider .carousel__dot::before {
  width: 16px;
  height: 16px;
  border: 2px solid var(--photo-slider-dot, var(--c-white));
  background: transparent;
  box-shadow: var(--photo-slider-dot-edge, 0 0 0 1px color-mix(in srgb, var(--c-black) 45%, transparent));
}
.photo-slider .carousel__dot:hover::before,
.photo-slider .carousel__dot[aria-current="true"]::before { background: var(--photo-slider-dot, var(--c-white)); border-color: var(--photo-slider-dot, var(--c-white)); }

@media (max-width: 1199.98px) {
  .photo-slider { --photo-slider-dots-bottom: 25px; --photo-slider-dots-gap: 15px; }
}
@media (max-width: 575.98px) {
  .photo-slider { --photo-slider-dots-bottom: 15px; }
}