/* Fix for teacher cards in mobile view to prevent overlapping */

@media (max-width: 768px) {
  /* Fix spacing for mobile teacher swiper */
  .teachers-swiper .swiper-slide {
    width: 85% !important; /* Control width of slide */
    padding: 0 10px !important; /* Add padding around each slide */
    box-sizing: border-box !important;
  }
  
  /* Apply margin to create space between cards */
  .teachers-swiper .teacher-card {
    margin: 10px auto !important;
    width: 100% !important;
    max-width: 330px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    height: auto !important;
    min-height: 480px !important;
  }
  
  /* Ensure swiper spacing and visibility */
  .teachers-swiper {
    overflow: visible !important;
    padding: 15px 0 !important;
  }
  
  /* Adjust pagination position for better visibility */
  .teachers-swiper .swiper-pagination {
    bottom: -10px !important;
  }
  
  /* Override any transformations that might cause overlap */
  .teachers-swiper .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important;
  }
  
  /* Ensure that content within cards doesn't overflow */
  .teacher-card .card-content {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* Add "fade" styling to swiper edges to indicate more content */
  .teachers-swiper::before,
  .teachers-swiper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15px;
    z-index: 2;
    pointer-events: none;
  }
  
  .teachers-swiper::before {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0));
  }
  
  .teachers-swiper::after {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,0.9), rgba(255,255,255,0));
  }

  .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 0 !important;
  }
}

/* Fix for landscape mode on mobile devices */
@media (max-width: 896px) and (orientation: landscape) {
  .teachers-swiper .swiper-slide {
    width: 65% !important;
  }
  
  .teachers-swiper .teacher-card {
    min-height: 450px !important;
  }
}