/* =====================================================
 * ROOT / CONTAINER SAFETY
 * ===================================================== */

/* Ensure swiper respects Elementor container */
.el-swiper,
.el-swiper-wrapper {
  width: 100%;
  height: 100%;
}

/* =====================================================
 * SWIPER STRUCTURE – EQUAL HEIGHT FOUNDATION
 * ===================================================== */

/* Force wrapper to stretch slides */
.el-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

/* Slides must NOT auto-size by content */
.el-swiper .swiper-slide {
  display: flex;
  height: auto !important;
  box-sizing: border-box;
}

/* =====================================================
 * CARD LAYOUT (CORE)
 * ===================================================== */

.slide-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* =====================================================
 * MEDIA (IMAGE) HANDLING
 * ===================================================== */

.slide-media {
  width: 100%;
  line-height: 0; /* remove inline img gaps */
  flex-shrink: 0;
}

.slide-media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* =====================================================
 * CONTENT AREA (TITLE + TEXT)
 * ===================================================== */

.slide-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
}


/* Allow text to push card height evenly */
.slide-content p {
  flex-grow: 1;
}

/* =====================================================
 * EQUAL HEIGHT – CSS MODE
 * ===================================================== */

.el-swiper.equal-height .swiper-wrapper {
  align-items: stretch;
}

.el-swiper.equal-height .swiper-slide {
  display: flex;
}

.el-swiper.equal-height .slide-card {
  height: 100%;
}

/* =====================================================
 * EQUAL HEIGHT – JS MODE (HEIGHT SET INLINE)
 * ===================================================== */

/* JS will set height explicitly; CSS must not fight it */
.el-swiper.js-equal-height .slide-card {
  height: auto;
}

/* =====================================================
 * MASONRY MODE
 * ===================================================== */

.el-swiper.masonry .swiper-wrapper {
  align-items: flex-start;
}

.el-swiper.masonry .swiper-slide {
  height: auto !important;
}

.el-swiper.masonry .slide-card {
  height: auto;
}

/* =====================================================
 * SAFETY: PREVENT SWIPER AUTOHEIGHT SIDE EFFECTS
 * ===================================================== */

.el-swiper .swiper-slide > * {
  min-height: 0;
}

/* =====================================================
 * OPTIONAL: VISUAL DEBUG (REMOVE IN PROD)
 * ===================================================== */
/*
.slide-card {
  outline: 1px dashed red;
}
*/
/* Title wrapper */
.slide-title {
  width: 100%;
}

/* Text wrapper */
.slide-text {
  width: 100%;
}


/* Ensure padding & radius behave correctly */
.slide-media,
.slide-media img,
.slide-card {
  box-sizing: border-box;
}
/* =========================
 * ARROWS POSITIONING
 * ========================= */

.el-swiper.arrows-outside .swiper-button-prev {
  left: -48px;
}

.el-swiper.arrows-outside .swiper-button-next {
  right: -48px;
}

/* Inside (default) */
.el-swiper .swiper-button-prev,
.el-swiper .swiper-button-next {
  color: inherit;
}

/* =========================
 * DOTS POSITIONING
 * ========================= */

.el-swiper.dots-below .swiper-pagination {
  position: static;
  margin-top: 16px;
  text-align: center;
}

.el-swiper:not(.dots-below) .swiper-pagination {
  position: absolute;
  bottom: 12px;
}