/* ═══════════════════════════════════════════════════════════════════════════
   VIRTUAL SCROLLER V2 — REACT-GRADE CSS OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

   .virtual-scroller__wrapper {
    position: relative;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    backface-visibility: hidden;
  
    /* Avoid strict containment for dynamic-height virtualization; it can
       interfere with post-reflow measurement consistency under zoom/wrapping. */
    contain: none;
  }
  
  /* Base item styles (applied via JS but can be overridden) */
  .virtual-scroller__item {
    position: absolute;
    width: 100%;
  
    /* Dynamic-height rows require accurate real layout measurement; disable
       aggressive containment/content-visibility hints that can skew sizes. */
    contain: none;
    content-visibility: visible;
    contain-intrinsic-block-size: auto;
    
    /* GPU acceleration */
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
  }
  
  /* Hidden items get stricter containment */
  .virtual-scroller__item--hidden {
    contain: none;
    content-visibility: hidden;
  }
  
  /* Performance: Prevent text selection during scroll (reduces layout work) */
  .virtual-scroller__wrapper.is-scrolling {
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* Grid mode specific optimizations */
  .virtual-scroller__wrapper--grid {
    /* Grid items may have different containment needs */
  }
  
  .virtual-scroller__wrapper--grid .virtual-scroller__item {
    /* Grid rows may need different intrinsic size */
    contain-intrinsic-block-size: auto 250px;
  }
  
  /* Mobile optimizations */
  @media (max-width: 768px) {
    .virtual-scroller__item {
      /* Smaller intrinsic size hint for mobile */
      contain-intrinsic-block-size: auto 150px;
    }
  }
  
  /* Reduce motion for accessibility */
  @media (prefers-reduced-motion: reduce) {
    .virtual-scroller__wrapper,
    .virtual-scroller__item {
      will-change: auto;
    }
  }