/* ====== GLOBAL IMAGE FIX ====== */
/* This file applies image fixes to all pages */

/* ====== MOBILE IMAGE FIXES ====== */
@media (max-width: 768px) {
  /* Fix all images to prevent scrolling and resizing */
  img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    pointer-events: none !important;
  }
  
  /* Fix hero images specifically */
  .hero img,
  .hero-image,
  .hero .image,
  .hero-content img {
    max-height: 60vh !important; /* Limit height to prevent scrolling */
    object-fit: cover !important;
    object-position: center !important;
  }
  
  /* Fix section images */
  .section img,
  .section-image,
  .section .image,
  .section-content img {
    max-height: 50vh !important; /* Limit height for section images */
    object-fit: cover !important;
    object-position: center !important;
  }
  
  /* Fix about page images */
  .about img,
  .about-image,
  .about .image,
  .about-content img {
    max-height: 50vh !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
  /* Fix contact page images */
  .contact img,
  .contact-image,
  .contact .image,
  .contact-content img {
    max-height: 50vh !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
  /* Fix mentorship page images */
  .mentorship img,
  .mentorship-image,
  .mentorship .image,
  .mentorship-content img {
    max-height: 50vh !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* ====== EXTRA SMALL SCREENS ====== */
@media (max-width: 480px) {
  .hero img,
  .hero-image,
  .hero .image,
  .hero-content img {
    max-height: 50vh !important; /* Even smaller height for very small screens */
  }
  
  .section img,
  .section-image,
  .section .image,
  .section-content img,
  .about img,
  .about-image,
  .about .image,
  .about-content img,
  .contact img,
  .contact-image,
  .contact .image,
  .contact-content img,
  .mentorship img,
  .mentorship-image,
  .mentorship .image,
  .mentorship-content img {
    max-height: 40vh !important; /* Smaller height for very small screens */
  }
}

/* ====== LANDSCAPE MOBILE ====== */
@media (max-width: 768px) and (orientation: landscape) {
  .hero img,
  .hero-image,
  .hero .image,
  .hero-content img {
    max-height: 40vh !important; /* Smaller height in landscape */
  }
  
  .section img,
  .section-image,
  .section .image,
  .section-content img,
  .about img,
  .about-image,
  .about .image,
  .about-content img,
  .contact img,
  .contact-image,
  .contact .image,
  .contact-content img,
  .mentorship img,
  .mentorship-image,
  .mentorship .image,
  .mentorship-content img {
    max-height: 30vh !important; /* Smaller height in landscape */
  }
}

/* ====== PREVENT HORIZONTAL SCROLL ON ALL IMAGES ====== */
img {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* ====== FORCE RESPONSIVE BEHAVIOR FOR ALL IMAGES ====== */
img {
  /* Force responsive behavior */
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}