/** Base splide styles found here. https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.2/dist/css/splide.min.css **/

.splide__slide {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}/* global Splide */

const isMobile = () => window.matchMedia("(max-width: 767px)").matches;

const hydrateLazyImages = root => {
  // Convert Splide lazy images to normal images for the static mobile layout
  const imgs = root.querySelectorAll("img[data-splide-lazy]");
  imgs.forEach(img => {
    if (!img.getAttribute("src")) {
      img.setAttribute("src", img.dataset.splideLazy);
    }
    img.removeAttribute("data-splide-lazy");
  });
};

const initGallerySliders = () => {
  const gallerySliders = document.querySelectorAll("[data-gallery_slider]");

  if (gallerySliders.length > 0) {
    gallerySliders.forEach(gallerySlider => {
      // Mobile: no slider, just stack items
      if (isMobile()) {
        hydrateLazyImages(gallerySlider);
        return;
      }

      const sliderModuleName = gallerySlider.dataset.gallery_slider;
      const sliderConfig = getModuleConfig(sliderModuleName);
      const mainSlider = gallerySlider.querySelector(".splide__main");
      const thumbnailNav = gallerySlider.querySelector(".splide__nav");

      if (mainSlider) {
        const mainSliderConfig = {
          lazyLoad: "nearby",
          classes: { arrows: "splide__arrows hs-gallery-slider-main__arrow" },
        };

        if (sliderConfig?.slides_per_page > 1) {
          mainSliderConfig.perPage = parseInt(sliderConfig.slides_per_page, 10);
          mainSliderConfig.gap = parseInt(sliderConfig.gap_between_slides, 10);
        }

        if (sliderConfig?.breakpoints) {
          mainSliderConfig.breakpoints = {};
          for (let breakpoint in sliderConfig.breakpoints) {
            const bp = sliderConfig.breakpoints[breakpoint];
            mainSliderConfig.breakpoints[breakpoint] = {};
            if (bp.slides_per_page) {
              mainSliderConfig.breakpoints[breakpoint].perPage = parseInt(bp.slides_per_page, 10);
            }
          }
        }

        mainSliderConfig.direction = sliderConfig?.direction || "ltr";
        mainSliderConfig.arrows = sliderConfig?.show_main_arrows === "true";
        mainSliderConfig.pagination = sliderConfig?.show_dots === "true";
        mainSliderConfig.autoplay = sliderConfig?.auto_advance === "true";
        mainSliderConfig.interval = sliderConfig?.auto_advance_speed_seconds
          ? parseInt(sliderConfig.auto_advance_speed_seconds, 10) * 1000
          : 5000;

        mainSliderConfig.type = sliderConfig?.image_transition ? sliderConfig.image_transition : "slide";

        if (sliderConfig?.loop_slides === "true") {
          if (mainSliderConfig.type === "slide") {
            mainSliderConfig.type = "loop";
          } else {
            mainSliderConfig.rewind = true;
          }
        }

        if (sliderConfig?.splidei18n) {
          mainSliderConfig.i18n = sliderConfig.splidei18n;
        }

        const main = new Splide(mainSlider, mainSliderConfig);
        cleanAndWatchImages(main.root);

        if (thumbnailNav) {
          const thumbSliderConfig = {
            lazyLoad: "nearby",
            preloadPages: 6,
            fixedWidth: parseInt(sliderConfig.thumbnail_width, 10),
            autoHeight: true,
            gap: 6,
            pagination: false,
            isNavigation: true,
            classes: { arrows: "splide__arrows hs-gallery-slider-nav__arrow" },
            breakpoints: { 768: { fixedWidth: 135 } },
          };

          thumbSliderConfig.direction = sliderConfig?.direction || "ltr";

          if (sliderConfig?.splidei18n) {
            thumbSliderConfig.i18n = sliderConfig.splidei18n;
          }

          const thumbnails = new Splide(thumbnailNav, thumbSliderConfig);
          cleanAndWatchImages(thumbnails.root);

          main.sync(thumbnails);
          main.mount();
          thumbnails.mount();
        } else {
          main.mount();
        }
      }
    });
  }
};


.splide__slide--nav {
  height: auto;
}

.splide__slide--nav-image {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.splide__track--nav > .splide__list > .splide__slide {
  border: none !important; /* stylelint-disable-line declaration-no-important */
  opacity: 0.6;
}

.splide__track--nav > .splide__list > .splide__slide.is-active {
  border: none !important; /* stylelint-disable-line declaration-no-important */
  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
}

.splide__slide__contents {
  display: flex;
  height: 100%;
  align-items: start;
  justify-content: center;
}

.splide__slide--image_caption__wrapper {
  position: relative;
  height: auto;
  width: auto;
}

.splide__slide--image__wrapper {
  height: 100%;
}

.splide__slide--image {
  display: block;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.splide__pagination__page {
  background: #ccc !important; /* stylelint-disable-line declaration-no-important */
  opacity: 0.5 !important; /* stylelint-disable-line declaration-no-important */
}

.splide__pagination__page.is-active {
  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
}

.splide__slide--caption {
  box-sizing: border-box;
  height: auto;
  padding: 0.5rem 1rem 0;
  align-self: flex-end;
}

.splide__toggle {
  display: inline-flex;
  height: 1.8rem;
  width: 1.8rem;
  padding: 1px 6px;
  border: none;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: #ccc;
  opacity: 0.7;
  transition: background-color 0.2s ease;
}

.splide_toggle svg {
  fill: initial;
}

.splide__toggle:hover {
  opacity: 1;
}

.splide__controls {
  display: flex;
  margin-top: 0.75rem;
  align-items: center;
  justify-content: center;
}

.splide__controls .splide__pagination {
  position: relative;
  bottom: auto;
  left: auto;
  width: auto;
  padding: 0 0.5rem;
  transform: none;
}

.splide__toggle__play {
  margin-left: 2px;
}

.splide__nav {
  margin-top: 0.75rem;
}

/** Below styles are to counter overly specific button styling in themes. These styles are modified from https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.2/dist/css/splide.min.css  **/
button.splide__arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: flex;
  height: 2em;
  width: 2em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: #ccc;
  cursor: pointer;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  opacity: 0.7;
  transform: translateY(-50%);
}

/** These styles are unminified from the minified css mentioned above for ordering purposes. **/
/* stylelint-disable */
button.splide__arrow svg {
  height: 1.2em;
  width: 1.2em;
  fill: #000;
}

button.splide__arrow:hover:not(:disabled) {
  opacity: 0.9;
}

button.splide__arrow:disabled {
  opacity: 0.3;
}

button.splide__arrow:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

button.splide__arrow--prev {
  left: 1em;
}

button.splide__arrow--prev svg {
  transform: scaleX(-1);
}

button.splide__arrow--next {
  right: 1em;
}

.splide__arrows--rtl button.splide__arrow--prev {
  right: 1em;
  left: auto;
}

.splide__arrows--rtl button.splide__arrow--prev svg {
  transform: scaleX(1);
}

.splide__arrows--rtl button.splide__arrow--next {
  right: auto;
  left: 1em;
}

.splide__arrows--rtl button.splide__arrow--next svg {
  transform: scaleX(-1);
}

.splide__arrows--ttb button.splide__arrow {
  left: 50%;
  transform: translate(-50%);
}

.splide__arrows--ttb button.splide__arrow--prev {
  top: 1em;
}

.splide__arrows--ttb button.splide__arrow--prev svg {
  transform: rotate(-90deg);
}

.splide__arrows--ttb button.splide__arrow--next {
  top: auto;
  bottom: 1em;
}

.splide__arrows--ttb button.splide__arrow--next svg {
  transform: rotate(90deg);
}
/* stylelint-enable */

@media (max-width: 767px) {
	.splide {
		display: block !important;
		visibility: visible !important;
	}
	
	.splide__slide:not(:first-child) {
		margin-top: 48px;
	}
	
  /* Turn the slider into a normal vertical list on mobile */
  .splide__track {
    overflow: visible !important;
  }

  .splide__list {
    display: block !important;
    transform: none !important;
    width: auto !important;
  }

  .splide__slide {
    width: auto !important;
    margin: 0 0 24px 0;
  }

  .splide__slide__contents,
  .splide__slide--image_caption__wrapper,
  .splide__slide--image__wrapper {
    width: 100%;
  }

  .splide__slide--image {
    width: 100%;
    height: auto;
    max-width: none;
  }

  /* Hide slider controls on mobile */
  .splide__arrows,
  .splide__controls,
  .splide__pagination,
  .splide__toggle,
  .splide__nav {
    display: none !important;
  }
}