/* Nova Grid v2 — CSS-first layout (Columns baseline + native masonry progressive enhancement) */

[data-grid-version="v2"] .gallery {
  columns: 4 260px;
  column-gap: 1.5rem;
}

[data-grid-version="v2"] .gallery > .gallery-item,
[data-grid-version="v2"] .gallery > .nova-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 1.5rem;
  width: 100%;
  display: inline-block;
}

[data-grid-version="v2"] .nova-card-media {
  position: relative;
  overflow: hidden;
  background: #111827;
  aspect-ratio: 4 / 3;
  contain: layout paint style;
}

[data-grid-version="v2"] .nova-card-media picture,
[data-grid-version="v2"] .nova-card-media source {
  display: block;
}

[data-grid-version="v2"] .nova-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-grid-version="v2"] .nova-card-media img[data-blur-preview] {
  filter: blur(10px);
  transform: scale(1.02);
}

[data-grid-version="v2"] .nova-card-media img[data-blur-preview].is-loaded {
  filter: blur(0);
  transform: scale(1);
}

[data-gallery-skeleton] {
  display: none;
}

[data-gallery-skeleton].is-loading {
  display: grid !important;
  grid-template-columns: inherit;
  gap: 1rem;
}

.nova-skeleton-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.nova-skeleton-media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  background-size: 220% 100%;
  animation: novaSkeletonShimmer 1.1s linear infinite;
}

.nova-skeleton-body {
  padding: .75rem;
  display: grid;
  gap: .45rem;
}

.nova-skeleton-line,
.nova-skeleton-pill {
  height: .6rem;
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
  background-size: 220% 100%;
  animation: novaSkeletonShimmer 1.1s linear infinite;
}

.nova-skeleton-pill {
  height: .95rem;
}

@keyframes novaSkeletonShimmer {
  0% { background-position: 180% 0; }
  100% { background-position: -40% 0; }
}

@media (max-width: 1279px) {
  [data-grid-version="v2"] .gallery {
    columns: 3 240px;
  }
}

@media (max-width: 1023px) {
  [data-grid-version="v2"] .gallery {
    columns: 2 220px;
    column-gap: 1rem;
  }
}

@media (max-width: 639px) {
  [data-grid-version="v2"] .gallery {
    columns: 1 100%;
    column-gap: 0;
  }

  [data-grid-version="v2"] .gallery > .gallery-item,
  [data-grid-version="v2"] .gallery > .nova-card {
    margin-bottom: 1rem;
  }
}

@supports (grid-template-rows: masonry) {
  [data-grid-version="v2"] .gallery {
    columns: initial;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-template-rows: masonry;
    gap: 1.5rem;
  }

  [data-grid-version="v2"] .gallery > .gallery-item,
  [data-grid-version="v2"] .gallery > .nova-card {
    margin: 0;
    display: block;
  }

  @media (max-width: 1279px) {
    [data-grid-version="v2"] .gallery {
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 1rem;
    }
  }

  @media (max-width: 639px) {
    [data-grid-version="v2"] .gallery {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
  }
}

/* Phase 8 — Virtualization hints (applied via JS IntersectionObserver) */
.nova-card[data-virtual-hidden] {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
  pointer-events: none;
  user-select: none;
}

.nova-card[data-virtual-visible] {
  content-visibility: visible;
  contain-intrinsic-size: none;
  pointer-events: auto;
  user-select: auto;
}