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

.virtual-scroller__wrapper {
  position: relative;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
  backface-visibility: hidden;
  
  /* Layout containment: isolates this element from affecting ancestors */
  contain: layout style;
}

/* Base item styles (applied via JS but can be overridden) */
.virtual-scroller__item {
  position: absolute;
  width: 100%;
  
  /* CSS Containment: Tells browser this element's internals don't affect layout outside */
  contain: layout style paint;
  
  /* Content-visibility: Browser can skip rendering work for offscreen items */
  content-visibility: auto;
  
  /* Intrinsic size hint: Helps browser estimate size before layout */
  contain-intrinsic-block-size: auto 200px;
  
  /* GPU acceleration */
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

/* Hidden items get stricter containment */
.virtual-scroller__item--hidden {
  contain: strict;
  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;
  }
}