/* =======================================================
   AXM Smart BG Core Layout (v1.7.4)
   ======================================================= */

/* Main smart background containers - FIXED */
.axm-smart-bg { 
  position: relative !important;
  overflow: hidden !important;
  z-index: 0; /* Establish stacking context */
}

/* Oxygen inner wrapper is the clipping container - FIXED */
.axm-smart-bg > .ct-section-inner-wrap,
.axm-smart-bg-debug > .ct-section-inner-wrap,
.hero-video > .ct-section-inner-wrap {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important; /* Move spacing to your content wrapper */
  z-index: 1;
  isolation: isolate; /* Creates new stacking context - CRITICAL */
  contain: paint; /* Prevents stray scrollbars on iOS */
}


/* Auto-inserted background layer (video or image) - CRITICAL FIX */
.axm-sb-wrap,
.vbg-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -1 !important; /* Behind content but visible */
  pointer-events: none !important;
  overflow: hidden !important;
  
  /* Prevent gray flash during loading */
  background: #000 !important; /* Black instead of gray */
  
}

/* Video iframe/video element - CRITICAL POSITIONING FIX */
.axm-sb-iframe,
.vbg-iframe,
.axm-sb-video-el {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  display: block !important;
  visibility: visible !important;
  max-width: none !important;
  max-height: none !important;
  opacity: 0; /* Will be set to 1 by JavaScript */
  transition: opacity 800ms ease; /* Slower transition for smoother reveal */
}

/* Poster image covers (shown while video loads) */
.axm-sb-poster,
.vbg-poster {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 2 !important; /* Above iframe until video loads */
  pointer-events: none !important;
  opacity: 1;
  transition: opacity 600ms ease;
}

/* Ensure video iframes are properly sized - ENHANCED */
.axm-sb-iframe[src*="vimeo"],
.vbg-iframe[src*="vimeo"] {
  /* Initial size will be overridden by JavaScript */
  width: 100vw;
  height: 56.25vw; /* 16:9 aspect ratio */
  min-width: 100%;
  min-height: 100%;
}

/* Foreground content must sit above the background layer - ENHANCED */
.axm-smart-bg > .ct-section-inner-wrap > *:not(.axm-sb-wrap):not(.vbg-wrap):not(.abs-child),
.axm-smart-bg-debug > .ct-section-inner-wrap > *:not(.axm-sb-wrap):not(.vbg-wrap):not(.abs-child),
.hero-video > .ct-section-inner-wrap > *:not(.axm-sb-wrap):not(.vbg-wrap):not(.abs-child) {
  position: relative !important;
  z-index: 10 !important;
}


/* Utility: absolute child inside Smart BG (opt-out class) */
.axm-smart-bg > .ct-section-inner-wrap > .abs-child {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    z-index: 20 !important;
}


/* =======================================================
   Video Background States
   ======================================================= */

/* Video loaded state */
.axm-sb-wrap.video-loaded .axm-sb-iframe,
.vbg-wrap.video-loaded .vbg-iframe {
  opacity: 1 !important;
}

/* Poster fade out when video is ready */
.axm-sb-wrap.video-loaded .axm-sb-poster,
.vbg-wrap.video-loaded .vbg-poster {
  opacity: 0;
}

/* Hide poster completely after fade completes */
.axm-sb-wrap.poster-hidden .axm-sb-poster,
.vbg-wrap.poster-hidden .vbg-poster {
  display: none;
}

/* =======================================================
   Critical Fixes for Common Issues
   ======================================================= */

/* Ensure video container respects section height */
.axm-smart-bg .axm-sb-wrap,
.axm-smart-bg .vbg-wrap {
  min-height: 400px; /* Fallback minimum */
}

/* Override any conflicting Oxygen styles */
.axm-smart-bg .ct-section-inner-wrap {
  min-height: inherit !important;
  display: block !important;
  transform: none !important; /* Prevent transform conflicts */
}

/* Prevent theme/plugin CSS conflicts */
.axm-sb-iframe,
.vbg-iframe {
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* =======================================================
   Mobile Optimizations & iOS Safari Fixes
   ======================================================= */

/* Base mobile optimizations */
@media (max-width: 768px) {
  .axm-smart-bg { min-height: 50svh; }
  
  /* Enhanced iOS Safari fixes for hero sections */
  .axm-hero,
  .axm-smart-bg.axm-hero {
    /* Use dynamic viewport units to handle Safari's changing viewport */
    min-height: 100dvh;
    /* Fallback for older iOS versions */
    min-height: 100vh;
    /* Additional fallback using svh (small viewport height) */
    min-height: 100svh;
    
    /* Ensure proper positioning context */
    position: relative;
    overflow: hidden;
    
    /* Force hardware acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    
    /* Prevent any potential scrolling issues */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Video wrapper adjustments for iPhone Safari */
  .axm-smart-bg .axm-sb-wrap,
  .axm-smart-bg .vbg-wrap {
    /* Force hardware acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    
    /* Prevent any gaps or spaces */
    margin: 0 !important;
    padding: 0 !important;
    
    /* Ensure wrapper fills entire container on iOS Safari */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
  }
}

@media (max-width: 768px) {
  /* Reduce transition times on mobile for better performance */
  .axm-sb-poster,
  .vbg-poster,
  .axm-sb-iframe,
  .vbg-iframe {
    transition: opacity 400ms ease;
  }
  
  /* Enhanced mobile video sizing for iOS Safari - CRITICAL FIX */
  .axm-sb-iframe[src*="vimeo"],
  .vbg-iframe[src*="vimeo"] {
    /* Much more aggressive sizing for iOS Safari */
    width: 300vw !important;
    height: 168.75vw !important; /* 16:9 with massive buffer */
    min-width: 150% !important;
    min-height: 150% !important;
    
    /* Enhanced transform for better centering on iOS */
    transform: translate(-50%, -50%) translateZ(0) !important;
    -webkit-transform: translate(-50%, -50%) translateZ(0) !important;
    
    /* Force proper rendering */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    
    /* Additional iOS Safari specific fixes */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
  }
  
  /* Additional fixes for portrait videos on mobile */
  .axm-sb-wrap[data-portrait="1"] .axm-sb-iframe,
  .vbg-wrap[data-portrait="1"] .vbg-iframe {
    width: 177.78vh !important; /* 9:16 mobile videos: height * (16/9) */
    height: 105vh !important; /* Slightly oversized to prevent gaps */
  }
  
  /* Enhanced poster image fixes */
  .axm-sb-poster,
  .vbg-poster {
    /* Use cover to fill container */
    object-fit: cover !important;
    object-position: center center !important;
    
    /* Force hardware acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}

/* Specific fixes for iPhone Safari only */
@supports (-webkit-appearance: none) {
  @media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 1) {
    
    /* Force proper section sizing on actual iPhones */
    .axm-smart-bg.axm-hero,
    .axm-hero.axm-smart-bg {
      /* Use the most reliable viewport unit for iPhone */
      min-height: 100svh !important;
      
      /* Additional safety measures */
      contain: layout;
      isolation: isolate;
      
      /* Ensure full height coverage */
      height: auto;
      display: flex;
      flex-direction: column;
    }
    
    /* Ensure the inner wrap takes full height */
    .axm-smart-bg.axm-hero > .ct-section-inner-wrap,
    .axm-hero.axm-smart-bg > .ct-section-inner-wrap {
      flex: 1;
      min-height: 100%;
      height: 100%;
    }

    /* Enhanced video sizing for iPhone Safari specifically - NUCLEAR OPTION */
    .axm-sb-iframe,
    .vbg-iframe {
      /* Extreme aggressive sizing to combat Safari's quirks */
      width: 400vw !important;
      height: 225vw !important; /* 16:9 with massive buffer */
      
      /* Keep centered positioning - don't override with absolute positioning */
      transform: translate(-50%, -50%) scale(1.1) !important;
      -webkit-transform: translate(-50%, -50%) scale(1.1) !important;
      
      /* Additional iOS Safari hacks */
      -webkit-mask-image: -webkit-radial-gradient(white, black);
      mask-image: radial-gradient(white, black);
    }
  }

  /* Specific fix for larger iPhone screens (Pro Max, etc.) */
  @media screen and (max-width: 768px) and (min-height: 800px) and (-webkit-min-device-pixel-ratio: 2) {
    .axm-sb-iframe,
    .vbg-iframe {
      /* Even more aggressive for larger iPhones */
      width: 450vw !important;
      height: 253vw !important;
      transform: translate(-50%, -50%) scale(1.15) !important;
      -webkit-transform: translate(-50%, -50%) scale(1.15) !important;
      
      /* Force positioning to account for larger screens */
      top: 48% !important; /* Slightly higher positioning */
    }
  }
}

/* Emergency fix for persistent gray space issues */
@media screen and (max-width: 768px) {
  /* If the above doesn't work, this nuclear option should */
  .axm-smart-bg.axm-hero.video-force-visible,
  .axm-hero.axm-smart-bg.video-force-visible {
    background: black !important; /* Hide any potential gray with black background */
  }
  
  .axm-smart-bg.axm-hero.video-force-visible .axm-sb-wrap,
  .axm-smart-bg.axm-hero.video-force-visible .vbg-wrap {
    background: black !important; /* Ensure wrapper has black background too */
  }
}

/* =======================================================
   Debug Mode Enhancements
   ======================================================= */

.axm-smart-bg-debug {
  outline: 2px dashed magenta !important;
  outline-offset: -2px;
}

.axm-smart-bg-debug .axm-sb-wrap::before,
.axm-smart-bg-debug .vbg-wrap::before {
  content: "DEBUG: SmartBG active - Video mode";
  position: absolute;
  top: 0; 
  left: 0;
  background: rgba(255, 0, 255, 0.8);
  color: #fff;
  font: 10px/1.2 monospace;
  padding: 4px 6px;
  z-index: 9999;
  pointer-events: none;
  border-radius: 0 0 4px 0;
}

/* Debug info for image-only mode */
.axm-smart-bg-debug:not(:has(.axm-sb-wrap)):not(:has(.vbg-wrap))::before {
  content: "DEBUG: SmartBG active - Image mode";
  position: absolute;
  top: 0; 
  left: 0;
  background: rgba(0, 150, 255, 0.8);
  color: #fff;
  font: 10px/1.2 monospace;
  padding: 4px 6px;
  z-index: 9999;
  pointer-events: none;
  border-radius: 0 0 4px 0;
}

/* Enhanced debug visibility for video layers */
.axm-smart-bg-debug .axm-sb-wrap,
.axm-smart-bg-debug .vbg-wrap {
  outline: 2px solid lime !important;
  outline-offset: -2px;
  background: rgba(0, 255, 0, 0.1) !important; /* Slight green tint */
}

.axm-smart-bg-debug .axm-sb-iframe,
.axm-smart-bg-debug .vbg-iframe {
  outline: 2px solid cyan !important;
  outline-offset: -2px;
}

/* =======================================================
   Performance Optimizations
   ======================================================= */

/* Use GPU acceleration for smooth transitions */
.axm-sb-poster,
.vbg-poster,
.axm-sb-iframe,
.vbg-iframe {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: opacity;
}

/* Optimize rendering during transitions */
.axm-sb-wrap,
.vbg-wrap {
  contain: layout style paint;
}

/* =======================================================
   Accessibility Improvements  
   ======================================================= */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .axm-sb-poster,
  .vbg-poster,
  .axm-sb-iframe,
  .vbg-iframe {
    transition: none;
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .axm-smart-bg-debug {
    outline-color: #ff00ff;
    outline-width: 3px;
  }
  
  .axm-smart-bg-debug .axm-sb-wrap::before,
  .axm-smart-bg-debug .vbg-wrap::before {
    background: #ff00ff;
    border: 1px solid #ffffff;
  }
}

/* =======================================================
   Emergency Fixes for Stubborn Video Issues
   ======================================================= */

/* If video still not showing, try this more aggressive approach */
.axm-smart-bg.video-force-visible .axm-sb-wrap,
.axm-smart-bg.video-force-visible .vbg-wrap {
  z-index: 1 !important;
  background: rgba(255, 0, 0, 0.1); /* Debug red tint */
}

.axm-smart-bg.video-force-visible .axm-sb-iframe,
.axm-smart-bg.video-force-visible .vbg-iframe {
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: rgba(0, 0, 255, 0.1); /* Debug blue tint */
}

.axm-smart-bg.video-force-visible .ct-section-inner-wrap > *:not(.axm-sb-wrap):not(.vbg-wrap) {
  z-index: 20 !important;
}