/* Force teacher photos to show on mobile devices - Extra Strength Version */

/* Global styles for both mobile and desktop */
.show-photos-on-mobile .teacher-avatar {
  border-radius: 16px !important;
  transform: scale(1.08) !important;
}

.show-photos-on-mobile .teacher-avatar img.avatar {
  opacity: 0 !important;
  transform: scale(0.8) !important;
}

.show-photos-on-mobile .teacher-avatar img.photo {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  /* Force show real photos */
  .teacher-avatar {
    border-radius: 16px !important;
    transform: scale(1.08) !important;
  }
  
  /* Force hide avatar image */
  .teacher-avatar img.avatar {
    opacity: 0 !important;
    transform: scale(0.8) !important;
    display: none !important;
  }
  
  /* Force show real photo */
  .teacher-avatar img.photo {
    opacity: 1 !important;
    transform: scale(1) !important;
    display: block !important;
    z-index: 10 !important;
  }
  
  /* Fix for teachers-swiper */
  .teachers-swiper .teacher-avatar img.avatar {
    display: none !important;
  }
  
  .teachers-swiper .teacher-avatar img.photo {
    display: block !important;
    opacity: 1 !important;
  }
  
  /* Make sure the animation doesn't affect visibility */
  @keyframes subtle-pulse {
    0% { transform: scale(1.08); }
    50% { transform: scale(1.10); }
    100% { transform: scale(1.08); }
  }
  
  .teacher-avatar {
    animation: subtle-pulse 3s infinite ease-in-out;
  }
  
  /* Special class to force photos in specific contexts */
  .force-photo {
    border-radius: 16px !important;
  }
  
  .force-photo img.avatar {
    display: none !important;
  }
  
  .force-photo img.photo {
    display: block !important;
    opacity: 1 !important;
    z-index: 100 !important;
  }
  
  /* Direct important overrides for Swiper */
  .swiper-slide .teacher-avatar {
    border-radius: 16px !important;
  }
  
  .swiper-slide .teacher-avatar img.avatar {
    display: none !important;
  }
  
  .swiper-slide .teacher-avatar img.photo {
    display: block !important;
    opacity: 1 !important;
  }
}