/* Card variant styles */

.ionis-slides.ionis-slides--card {
  margin: 0 auto;

  &::after {
    content: "";
    position: absolute;
    width: 116px;
    height: 410px;
    background: url(/themes/custom/envivent/assets/images/home/wings-color.png)
      no-repeat center center;
    background-size: cover;
    top: 47px;
    left: 0px;
    transition: opacity 0.3s ease-in-out;
  }
}

/* Hide wings when dawnzera slide is active */
.ionis-slides.ionis-slides--card.dawnzera-active::after {
  opacity: 0;
  pointer-events: none;
}

/* Ensure Swiper container handles auto height properly */
.ionis-slides.ionis-slides--card .swiper {
  transition: height 0.6s ease-in-out;
}

/* Override any fixed heights on swiper-slide to allow natural content height */
.ionis-slides.ionis-slides--card .swiper-slide {
  height: auto; /* Allow slides to have their natural height */
}

/* Ensure slide contents can determine their own height */
.ionis-slides.ionis-slides--card .swiper-slide > .ionis-card-slide {
  height: auto;
}

@media (max-width: 1024px) {
  .ionis-slides.ionis-slides--card {
    &::after {
      background: none;
    }
  }
}

/* Image variant styles */
.ionis-slides.ionis-slides--image {
  --swiper-pagination-fraction-color: var(--color-white);
}
.ionis-slides.ionis-slides--image .swiper-pagination-fraction {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-dark-purple);
  padding: 16px;
  font-size: var(--fs-headingxs);
  font-weight: var(--fw-medium);
  line-height: 1.4;
}

.ionis-slides.ionis-slides--image .swiper-button-prev,
.ionis-slides.ionis-slides--image .swiper-button-next {
  background-color: rgba(0, 0, 0, 0.65);
  width: 48px;
  height: 64px;
}
.ionis-slides.ionis-slides--image .swiper-button-next:after,
.ionis-slides.ionis-slides--image .swiper-button-prev:after {
  font-size: 24px;
  color: var(--color-white);
}

.ionis-slides.ionis-slides--image .swiper-button-next {
  right: 0;
}

.ionis-slides.ionis-slides--image .swiper-button-prev {
  left: 0;
}

@media (max-width: 768px) {
  .ionis-slides.ionis-slides--image .swiper-button-prev,
  .ionis-slides.ionis-slides--image .swiper-button-next {
    width: 32px;
    height: 48px;
  }
}