/**
 * Mobile Image Scroll Fix
 * Prevents images from creating scrollable areas on mobile devices
 * Ensures all scrolling happens at the page level, not on individual images
 */

@media (max-width: 768px) {
  /* ========================================
     ALL IMAGES - NO SCROLLING
     ======================================== */
  
  /* Base image elements */
  img,
  picture,
  video,
  svg,
  canvas {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    touch-action: pan-y !important; /* Allow vertical page scroll, prevent image scroll */
    -webkit-overflow-scrolling: auto !important;
    user-select: none !important; /* Prevent text selection that can interfere with scroll */
    -webkit-user-select: none !important;
    pointer-events: auto !important; /* Allow clicks but not scroll */
    position: relative !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Next.js Image component wrappers */
  span[style*="position: relative"],
  div[style*="position: relative"],
  .next-image-wrapper,
  [class*="image-wrapper"],
  [class*="Image"] {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    touch-action: pan-y !important;
    position: relative !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Image containers and wrappers */
  .image-container,
  .image-wrapper,
  .img-wrapper,
  .photo-wrapper,
  .media-wrapper,
  [class*="image"],
  [class*="Image"],
  [class*="img"],
  [class*="photo"],
  [class*="media"] {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    touch-action: pan-y !important;
    position: relative !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* SimpleImage component containers */
  .SimpleImage,
  [class*="SimpleImage"],
  [class*="simple-image"] {
    overflow: visible !important;
    touch-action: pan-y !important;
    display: block !important;
    position: relative !important;
  }

  /* Next.js Image component specific */
  .next-image,
  [class*="next-image"],
  img[src*="/_next/image"] {
    overflow: visible !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  /* Image in cards and sections */
  .card img,
  .service-card img,
  .core-service-card img,
  section img,
  .section img,
  article img {
    overflow: visible !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
  }

  /* Hero images */
  .hero img,
  .page-hero img,
  .home-hero-compact img,
  [class*="hero"] img {
    overflow: visible !important;
    touch-action: pan-y !important;
    pointer-events: none !important; /* Hero images shouldn't be interactive */
  }

  /* Gallery and grid images */
  .gallery img,
  .grid img,
  .gallery-grid img,
  [class*="gallery"] img {
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  /* ========================================
     PREVENT PARENT CONTAINERS FROM SCROLLING
     ======================================== */
  
  /* Any container with an image should not scroll */
  div:has(img),
  section:has(img),
  article:has(img),
  .card:has(img),
  [class*="card"]:has(img) {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    touch-action: pan-y !important;
  }

  /* Image containers with fixed heights - remove scroll */
  [style*="overflow"],
  [style*="overflow-x"],
  [style*="overflow-y"] {
    /* Only override if it's auto or scroll */
  }

  /* ========================================
     SPECIFIC COMPONENT FIXES
     ======================================== */
  
  /* Core service card images */
  .core-service-card__image,
  .core-service-card__image-wrapper,
  .core-service-card__img {
    overflow: visible !important;
    touch-action: pan-y !important;
    position: relative !important;
  }

  /* Unified service grid images */
  .UnifiedServiceGrid img,
  .unified-service-grid img,
  [class*="ServiceGrid"] img {
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  /* Page hero image wrapper */
  .page-hero__image-wrapper,
  .page-hero__image {
    overflow: visible !important;
    touch-action: pan-y !important;
    pointer-events: none !important;
  }

  /* ========================================
     CRITICAL: PREVENT ALL NESTED SCROLLING
     ======================================== */
  
  /* Force all image-related elements to not create scroll areas */
  *:has(img),
  *:has(picture),
  *:has(video) {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    touch-action: pan-y !important;
  }

  /* Exception: Only allow scrolling in specific UI elements (not images) */
  select,
  textarea,
  iframe,
  [role="dialog"],
  .nav.nav-open {
    /* These can scroll, but images inside them should not */
  }

  /* Images inside scrollable containers should still not scroll */
  select img,
  textarea img,
  iframe img,
  [role="dialog"] img {
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  /* ========================================
     FIX SECTIONS WITH OVERFLOW:HIDDEN BLOCKING SCROLL - ALL PAGES
     ======================================== */
  
  /* CRITICAL: Override overflow:hidden on sections that block mobile scrolling */
  /* Sections with overflow:hidden prevent touch scrolling on mobile */
  /* This applies to ALL pages, not just homepage */
  section,
  .section,
  #core-services,
  .core-services--retail,
  .core-services--service-highlights,
  .hero-cards-section,
  [class*="section"],
  [id*="section"],
  div:not([class*="image"]):not([class*="Image"]):not([id*="image"]):not([id*="Image"]),
  article,
  aside,
  [class*="container"]:not([class*="image"]):not([class*="Image"]),
  [class*="wrapper"]:not([class*="image"]):not([class*="Image"]),
  [class*="content"]:not([class*="image"]):not([class*="Image"]) {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    touch-action: pan-y !important; /* Allow vertical page scroll */
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
  }

  /* ========================================
     MOBILE BACKGROUND IMAGE FIXES
     Prevent blur/pixelation from background-attachment: fixed
     ======================================== */
  
  /* Force scroll attachment for all background images on mobile */
  /* IMPORTANT: Do NOT override background-image - let components set it */
  body:has(.core-services--service-highlights),
  html:has(.core-services--service-highlights),
  body:has(.page-hero),
  html:has(.page-hero),
  body:has(.blog-list-page),
  html:has(.blog-list-page),
  body:has(.blog-post-container),
  html:has(.blog-post-container) {
    /* Background attachment is handled by hero-background.css - do not override */
    /* Only adjust size/position, don't override the background-image itself */
    /* background-size and background-position are set by components, just ensure scroll */
    background-repeat: no-repeat !important;
  }

  /* Also target elements with background images directly */
  .core-services--service-highlights,
  section.core-services--service-highlights,
  .page-hero,
  section.page-hero {
    /* Background attachment is handled by hero-background.css - do not override */
  }
}