.programs-slider {}

.programs-slider__titles {
  text-align: center;
}

.programs-slider .splide__track {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin: -1rem;
}

/* Center slides when fewer than 3 are present */
.programs-slider .is-short .splide__list {
  justify-content: center;
}

.program-slider__slide {
  position: relative;
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 2px 2px 10px #00000029;
}

.program-slider__link {
  position: relative;
  display: inline;
  z-index: 10;
}

.program-slider__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: transparent linear-gradient(180deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box;
  opacity: 1;
  z-index: 10;
  transition: all 0.3s ease-out;
}

.program-slider__link:hover::after {
  opacity: 0;
}

.program-slider__slide .program-slide__title {
  position: absolute;
  left: 33px;
  /* top: 87%; */
  bottom: 1rem;
  z-index: 20;
  color: var(--white);
  transition: all 0.3s ease;
  padding-right: 1rem;
}

.program-slider__slide:hover .program-slide__title {
  /* bottom: unset; */
  /* top: 55px; */
  bottom: 80%;
}

.program-slider__slide .program-slider__slide--backface {
  position: relative;
  height: 100%;
  opacity: 0;
  background: transparent linear-gradient(139deg, var(--blue-md) 0%, var(--blue-dk) 100%) 0% 0% no-repeat padding-box;
  color: var(--white);
  padding: 100px 29px 26px 33px;
  overflow: hidden;
  transition: all 0.3s ease-out;
}

.program-slider__slide:hover .program-slider__slide--backface {
  opacity: 1;
}

.program-slider__slide--content {}

.programs-slider .slide__button {
  position: relative;
  z-index: 30;
  display: block;
  margin-top: 2rem;
}

.programs-slider .splide__pagination {
  bottom: -2rem;
}

.programs-slider .custom-pagination .splide__pagination__page {
  width: 40px;
}

@media (max-width: 1500px) {
  .program-slider__slide:hover .program-slide__title {
    top: 35px;
  }

  .program-slider__slide .program-slider__slide--backface {
    padding: 85px 14px 26px 30px;
    font-size: 16px;
  }
}

@media (max-width: 1200px) {
  .program-slider__slide .program-slider__slide--backface {
    font-size: 20px;
  }
}

@media (max-width: 992px) {
  .program-slider__slide .program-slider__slide--backface {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .programs-slider {
    margin-bottom: 80px;
  }
}

@media (max-width: 576px) {
  .programs-slider .programs-slider__slider {
    margin-left: -1rem;
    margin-right: -1rem;
  }

}

/* Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
  .program-slider__link:hover::after {
    opacity: 1;
    /* Keep gradient overlay visible */
  }

  .program-slider__slide:hover .program-slide__title {
    bottom: 1rem;
    /* Keep title in original position */
  }

  .program-slider__slide:hover .program-slider__slide--backface {
    opacity: 0;
    /* Never show backface on touch devices */
  }

  .program-slider__slide:hover .program-slide__title {
    bottom: 1rem;
  }

  .program-slider__slide--backface {
    pointer-events: none;
    /* Prevent any interaction with backface */
  }
}


/* Safari-specific fixes */
.programs-slider.is-safari .program-slider__slide {
  aspect-ratio: unset;
}


/* Ensure images are visible and cover the slide in Safari only */
.programs-slider.is-safari .program-slider__link {
  display: block;
  width: 100%;
  height: 100%;
}

.programs-slider.is-safari .program-slider__slide .bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  display: block;
}

.programs-slider.is-safari .program-slider__slide:hover .bg-img {
  opacity: 0;
}