/**
 * Adaptive Platform Mobile Overrides
 * Mobile-optimized styles for adaptive-platform.html
 */

@media (max-width: 767px) {
  /* Prevent horizontal scroll on mobile */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Smooth scrolling performance optimization for mobile */
  html {
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
  }

  /* Force GPU acceleration on animated elements (conservative approach for mobile) */
  .hero-pinned,
  .image-frame,
  .video-viewport {
    will-change: transform;
    transform: translateZ(0);
  }

  /* Note: Removed backface-visibility as it can cause dark overlay rendering bugs on iOS Safari
     Removed [style*="position: fixed/sticky"] selectors to avoid breaking backgrounds */

  /* Ensure all containers respect viewport width */
  * {
    max-width: 100%;
  }

  /* Force any fixed-width inline styles to be responsive on mobile */
  [style*="width: 440px"],
  [style*="width: 800px"] {
    width: 90vw !important;
    max-width: 350px !important;
  }

  /* ===== DATA RESET LOOP SECTION - Mobile Optimized ===== */
  .data-reset-section {
    height: auto !important;
    padding: var(--space-3xl) var(--space-md) !important;
  }

  .data-reset-section .sticky-container {
    position: relative !important;
    height: auto !important;
  }

  .data-reset-section .content-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-lg) !important;
    grid-template-columns: 1fr !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .data-reset-section .narrative-column {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 var(--space-md) !important;
  }

  .data-reset-section .narrative-column h2 {
    font-size: clamp(2rem, 8vw, 2.5rem) !important;
    line-height: 1.2 !important;
    margin-bottom: var(--space-lg) !important;
  }

  .data-reset-section .step-description {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: var(--space-lg) !important;
  }

  .data-reset-section .visual-column {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 var(--space-md) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .data-reset-section .data-loss-stack {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .data-reset-section .shared-progress {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .data-reset-section .pie-chart-container {
    width: 85vw !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Make SVG responsive and fully contained */
  .data-reset-section .pie-chart {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  /* Ensure circles don't overflow */
  .data-reset-section .pie-chart circle {
    vector-effect: non-scaling-stroke !important;
  }

  /* ===== BRIDGE SECTION - Mobile Text Sizing Only ===== */
  #bridge-scroll-section .bridge-line {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
    padding: 0 1rem !important;
  }

  /* ===== TWO CATEGORIES SECTION - Hide animation chaos on mobile ===== */
  #two-categories-section {
    height: auto !important;
    padding: 4rem 1.5rem !important;
  }

  /* Hide the entire sticky animation container */
  #two-categories-sticky {
    display: none !important;
  }

  /* Prevent horizontal scroll from fixed-width containers */
  #process-container,
  #freeform-container {
    width: 90vw !important;
    max-width: 350px !important;
    height: auto !important;
  }

  #foundation-layer {
    width: 90vw !important;
    max-width: 350px !important;
    height: auto !important;
  }

  /* Add simple mobile content after the section using pseudo-element approach */
  /* We'll need to add actual HTML for this, but for now hide the broken animation */

  /* ===== ORCHESTRA SECTION - Mobile Layout ===== */
  #orchestra-section {
    height: auto !important;
    padding: var(--space-3xl) var(--space-lg) !important;
  }

  #orchestra-sticky {
    position: relative !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-2xl) !important;
  }

  /* ===== ECOSYSTEM SECTION - Mobile Layout ===== */
  .ecosystem-section {
    height: auto !important;
    padding: var(--space-3xl) var(--space-lg) !important;
  }

  .ecosystem-section .sticky-container {
    position: relative !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-2xl) !important;
  }

  .ecosystem-section .left-content {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .ecosystem-section .right-visual {
    flex: none !important;
    width: 100% !important;
  }

  .ecosystem-section .svg-container {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ===== PRODUCTS SECTION - Restore Proper Positioning ===== */
  .products,
  .products * {
    position: static !important;
  }

  .products-header {
    position: relative !important;
    text-align: center !important;
  }

  .products-scroll-container {
    position: relative !important;
  }

  .products-images-sticky {
    display: block !important;
    position: relative !important;
  }

  .product-demo-container {
    position: relative !important;
  }

  .product-demo {
    position: absolute !important;
    opacity: 0 !important;
  }

  .product-demo.active {
    opacity: 1 !important;
  }

  .products-content-scroll {
    position: relative !important;
  }

  .product-content-item {
    position: relative !important;
  }
}