/**
 * Slider Overlap - Specific Styles
 *
 * Contains only the unique styles for the overlap slider variant.
 * Common Splide styles are inherited from slider_base library.
 */

/* Base slider-overlap layout styles (always applied) */
.slider-layout--overlap {
  position: relative;
  z-index: 5;
}

.slider-layout--overlap .splide__track {
  overflow-y: visible;
}

/* Ensure slides maintain consistent height */
.slider-layout--overlap .splide__slide {
  display: flex;
  flex-direction: column;
  height: auto;
}

.slider-layout--overlap .splide__slide > * {
  flex: 1;
  display: flex;
}

.slider-layout--overlap .splide__list {
  display: flex;
  align-items: stretch;
}

.slider-layout--overlap .slider-layout__header {
  margin-bottom: 48px;
}

/* Responsive padding for this variant - use layout context for higher specificity */
@media screen and (max-width: 374px) {
  .slider-layout--overlap {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media screen and (min-width: 375px) {
  .slider-layout--overlap {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 767px) {
  .slider-layout.slider-splide.slider-layout--overlap .splide__footer {
    margin-top: 32px;
  }
}

@media screen and (max-width: 425px) {
  .slider-layout.slider-splide.slider-layout--overlap .splide__footer {
    margin-top: 16px;
  }
}

@media screen and (min-width: 768px) {
  .slider-layout--overlap {
    padding-left: 28px;
    padding-right: 28px;
    position: relative;
  }

  .slider-layout--overlap .slider-layout__header {
    width: auto;
  }

  .slider-layout.slider-splide.slider-layout--overlap .splide__arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
  }

  .slider-layout.slider-splide.slider-layout--overlap .splide__arrow {
    position: static;
    transform: unset;
    pointer-events: all;
  }

  .slider-layout.slider-splide.slider-layout--overlap .splide__pagination {
    position: absolute;
    margin-top: 0;
  }
}

@media screen and (min-width: 1024px) {
  .slider-layout--overlap {
    padding-left: 63px;
    padding-right: 63px;
  }
}

@media screen and (min-width: 1920px) {
  .slider-layout--overlap {
    padding-left: 63px;
    padding-right: 63px;
  }
}

/* Modifier: Enable overlap effect (negative margin) */
.slider-layout--overlap.slider-layout--has-overlap {
  margin-top: -195px;
  padding-block: 0px;
  padding-bottom: var(--section-pad-block, clamp(5px, -1.3166px + 1.9436vw, 36px));
}