/* ====== HERO IMAGE FIX ====== */
/* This file fixes hero image scrolling issues on mobile */

/* ====== MOBILE HERO IMAGE FIXES ====== */
@media (max-width: 768px) {
  /* Fix hero section container */
  .hero {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Fix hero content */
  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 20px 15px !important;
  }
  
  /* Fix hero image specifically */
  .hero img,
  .hero-image,
  .hero .image,
  .hero-content img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 60vh !important; /* Limit height to prevent scrolling */
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 10px !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;
  }
  
  /* Prevent image from being draggable */
  .hero img,
  .hero-image,
  .hero .image,
  .hero-content img {
    -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 text content */
  .hero h1,
  .hero h2,
  .hero p,
  .hero .text {
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
  }
  
  /* Fix hero buttons */
  .hero .cta-button,
  .hero button,
  .hero .button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 10px 0 !important;
    padding: 12px 20px !important;
    white-space: normal !important;
    word-wrap: break-word !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 */
  }
  
  .hero-content {
    padding: 15px 10px !important;
  }
  
  .hero h1 {
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
  }
  
  .hero h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  .hero p {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
}

/* ====== 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 */
  }
}

/* ====== PREVENT HORIZONTAL SCROLL ON IMAGES ====== */
.hero,
.hero-content,
.hero img,
.hero-image,
.hero .image {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* ====== FORCE RESPONSIVE BEHAVIOR ====== */
.hero img,
.hero-image,
.hero .image,
.hero-content 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;
}

/* ====== HERO IMAGE STYLES ====== */
/* Clean styles for production */