/* New class names isolate LAB from the old grid-item rules. */
.vl-grid {
  --vl-columns: 1;
  --vl-gap: 10px;
  display: grid;
  grid-template-columns: repeat(var(--vl-columns), minmax(0, 1fr));
  gap: var(--vl-gap);
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}
.vl-grid, .vl-grid * { box-sizing: border-box; }
.vl-grid > .vl-item { min-width: 0; margin: 0; }
.vl-grid > .vl-sizer { display: none; }
.vl-grid .vl-media {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: #f3f3f3;
}

/* --- FADE-IN, not pop/jump ---
   Each tile's box is already the right size (aspect-ratio is set inline
   from real WP attachment metadata before this CSS ever runs), so this
   transition only ever changes opacity. The box itself never resizes,
   so there is nothing to "jump". */
.vl-grid .vl-media > img,
.vl-grid .vl-media > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity 420ms ease;
  animation: none;
}
.vl-grid .vl-media > img.vl-loaded,
.vl-grid .vl-media > video.vl-loaded {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vl-grid .vl-media > img,
  .vl-grid .vl-media > video { transition: none; }
}

.vl-grid .vl-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  color: #777;
  font-size: 0.85rem;
  text-align: center;
}
.vl-grid .vl-failed > img,
.vl-grid .vl-failed > video { visibility: hidden; }
.vl-grid .vl-invalid { padding: 16px; color: #a00000; }

/* Whole-grid fade instead of an instant visibility flip.
   Still bounded by the JS fallback timeout, so a slow network never
   leaves the page blank indefinitely. */
.vl-grid { opacity: 0; transition: opacity 200ms ease; }
html:not(.vl-pending) .vl-grid { opacity: 1; }

.vl-grid.vl-enhanced { display: block; }
.vl-grid.vl-enhanced > .vl-sizer,
.vl-grid.vl-enhanced > .vl-item {
  /* Written on a single line on purpose: this host's CSS minifier
     mangles a calc() expression that is split across lines (it drops
     the multiplication operator), which silently breaks this width
     and collapses the grid to one full-width column. Do not reformat
     this on to multiple lines. */
  width: calc((100% - (var(--vl-columns) - 1) * var(--vl-gap)) / var(--vl-columns));
}
.vl-grid.vl-enhanced > .vl-sizer { display: block; }
.vl-grid.vl-enhanced > .vl-item {
  margin-bottom: var(--vl-gap);
}
@media (min-width: 640px) { .vl-grid { --vl-columns: 2; } }
@media (min-width: 1000px) { .vl-grid { --vl-columns: 3; } }
/* Capped at 3 columns on purpose - no 4-column step at wider widths. */