/* ============================================================
 * hero-bg-video.css — hero background as a full-bleed collage/mosaic
 * of real stock clips + photos (no blur — see shared/js/hero-bg-video.js,
 * which builds a CSS grid: a fixed 9 rows tall, with the column count
 * computed at runtime to fill the section width). A theme-tinted wash
 * sits on top for text/card readability, and a top+bottom gradient
 * feathers the grid smoothly into the page's own background so the
 * collage never cuts off with a hard edge.
 * ============================================================ */

.gen-hero__bgvideo-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Gentle fade at the very bottom only — keeps the mosaic fully visible
     through most of the hero and only feathers the last ~15% so tile
     edges don't cut off sharply where the section ends. (Was 68% before,
     which faded the entire bottom third of the collage.) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 88%, transparent 100%);
}

.gen-hero__collage-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(var(--hc-rows, 9), 1fr);
  grid-template-columns: repeat(var(--hc-cols, 8), 1fr);
  gap: 2px;
}

.gen-hero__collage-cell {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--lx-bg, #F2EEE8) 88%, #000 12%);
}

.gen-hero__collage-cell video,
.gen-hero__collage-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Extra bottom-weighted gradient on top of the grid, guaranteeing a
   smooth pixel blend into the section's background under the hero
   copy/cards even where the mask above lands imprecisely. */
.gen-hero__bgvideo-wash {
  position: absolute;
  inset: 0;
  /* Flat tint across the whole collage (keeps hero copy/cards readable
     over busy tiles) plus an extra fade at the very bottom only so the
     grid disappears smoothly into the page's own background. (Was 45%
     before, which faded more than half the grid.) */
  background:
    linear-gradient(to bottom,
      transparent 0%,
      transparent 70%,
      var(--lx-bg, #F2EEE8) 100%),
    var(--lx-bg, #F2EEE8);
  opacity: 0.72;
}

[data-theme="dark"] .gen-hero__bgvideo-wash {
  opacity: 0.8;
}

/* Under prefers-reduced-motion, JS never calls .play() — the <video>
   element's own poster frame just sits there statically, no CSS needed. */