/* ==========================================================================
   1. GLOBAL CONTAINMENT & WRAPPER SAFEGUARDS
   ========================================================================== */
.main__content__text,
.your-page-wrapper-class {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.mySwiper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 40px 0;
  overflow: hidden !important;
}

/* ==========================================================================
   2. NATIVE SWIPER SLIDE OVERRIDES
   ========================================================================== */
.mySwiper .swiper-slide {
  /* Let Swiper manage its native flex alignment height safely across all screens */
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;

  /* Creates a clean, safe 30px total gap between cards without breaking Swiper math */
  padding: 0 4px !important;
  box-sizing: border-box !important;

  /* Slide widths & scaling tracking animations */
  width: 85%; /* Mobile default profile */
  opacity: 0.35;
  transform: scale(0.9);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

/* Brighten and expand the active item sitting right in the center */
.mySwiper .swiper-slide.swiper-slide-active {
  opacity: 1;
  transform: scale(1);
}

/* ==========================================================================
   3. THE EQUAL HEIGHT CARD BOX ENGINE
   ========================================================================== */
.mySwiper .swiper-slide .s-card {
  width: 100% !important;
  max-width: 500px;
  margin: 0 auto;

  /* 
     THE FIX: 
     Setting height: 100% forces the card to match its parent .swiper-slide height.
     Since Swiper stretches slides equally out of the box, your cards stay perfectly even.
  */
  height: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background-color: #3b3d3c;
  color: #fff !important;
  padding: 1.25rem;
  box-sizing: border-box !important;

  /* Proportional baseline minimum shape for small screens */
  min-height: 200px;
}

/* ==========================================================================
   4. RESPONSIVE MEDIA BREAKPOINTS
   ========================================================================== */
@media (min-width: 768px) {
  .mySwiper .swiper-slide {
    width: 55%; /* Tablet view tracking profile */
  }
}

@media (min-width: 1201px) {
  .mySwiper .swiper-slide {
    width: 50% !important; /* Spreads out card widths so text flows elegantly horizontally */
  }

  .mySwiper .swiper-slide .s-card {
    max-width: 750px !important;
    min-height: 260px !important; /* Wide landscape baseline profile on large screens */
  }
}

/* ==========================================================================
   5. COMPONENT ELEMENT UTILITIES
   ========================================================================== */
.s-card__name {
  font-size: 14px;
  margin-top: auto; /* Aligns footer text elegantly if quotes are brief */
  padding-top: 1rem;
}

.quote-icon-s {
  font-size: 2rem;
  line-height: 1;
  color: #f98c1e;
  /* opacity: 0.5; */
  font-weight: bold;
  display: flex;
  justify-content: end;
}

.swiper-pagination-bullet-active {
  background: #f98c1e;
}