/* Block Enrollment Slider Styles */

/* Preview slider */
.enrollment-preview-slider,
.fluid-enrollment-slider__preview {
  width: 100%;
  border-radius: var(--rounded-lg, 12px);
  overflow: hidden;
  background: var(--color-surface-2, #f8f8f8);
}

.enrollment-preview-slider .splide__slide,
.fluid-enrollment-slider__preview .splide__slide {
  /*
    Definite height, not `aspect-ratio: 1/1`: Safari won't honor aspect-ratio on
    these flex slides and grows a single slide to the image's intrinsic size
    (~6000px for a tall image); it also overrode the configured Thumbnail Height on
    Chromium. A fixed height is deterministic and lets the setting take effect. (CURRENT-1806)
  */
  height: var(--fluid-enroll-preview-height, 344px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2, #f8f8f8);
}

.enrollment-preview-slider .splide__slide img,
.fluid-enrollment-slider__preview .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Thumbnail slider */
.enrollment-thumbnail-slider,
.fluid-enrollment-slider__thumbnail {
  width: 100%;
  position: relative;
  padding: 0 2rem;
  /* shrink arrow buttons to fit the thumbnail strip */
  --carousel-arrow-size: 28px;
}

.enrollment-thumbnail-slider .splide__track,
.fluid-enrollment-slider__thumbnail .splide__track {
  border-radius: 0.25rem;
  overflow: hidden;
}

.enrollment-thumbnail-slider .splide__slide,
.fluid-enrollment-slider__thumbnail .splide__slide {
  aspect-ratio: 1 / 1;
  min-height: var(--fluid-enroll-thumb-size, 72px);
  cursor: pointer;
  border: 2px solid var(--color-border, #eaecf0);
  border-radius: 0.375rem;
  overflow: hidden;
  opacity: 0.6;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.enrollment-thumbnail-slider .splide__slide:hover,
.fluid-enrollment-slider__thumbnail .splide__slide:hover {
  opacity: 0.85;
}

.enrollment-thumbnail-slider .splide__slide.is-active,
.fluid-enrollment-slider__thumbnail .splide__slide.is-active {
  opacity: 1;
  border-color: var(--color-primary, #2365ea);
}

.enrollment-thumbnail-slider .splide__slide img,
.fluid-enrollment-slider__thumbnail .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Disabled state */
.enrollment-thumbnail-slider .splide__arrow:disabled,
.fluid-enrollment-slider__thumbnail .splide__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/*
  Pre-init guard: until Splide's deferred CDN script mounts the carousel, every
  slide is laid out and an N-image pack stacks into a tall column — a brief flash
  on the storefront, but persistent in the theme builder, which re-renders the
  iframe on every edit. Show only the first slide until `.is-initialized`. (CURRENT-1806)
*/
.fluid-enrollment-slider .splide:not(.is-initialized) .splide__list {
  display: block;
}

.fluid-enrollment-slider .splide:not(.is-initialized) .splide__slide:not(:first-child) {
  display: none;
}