/* ═══════════════════════════════════════════════════════════════════════════
   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);
}

/* 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;
  }
}