/* ═══════════════════════════════════════════════════════
   Hero Banner Block (Homepage)
   ═══════════════════════════════════════════════════════ */

.hero-banner {
  min-height: 300px;
  border-radius: 0;
}

@media (min-width: 768px) {
  .hero-banner {
    height: 680px;
  }
}

/* The hero video is ~2.08:1 (720×346). In the fixed 680px band it crops top &
   bottom as the viewport widens, hiding the video's baked-in text on ultrawide.
   Grow the height toward the video's ratio (100vw / 2.08 ≈ 48vw), capped so the
   hero still fits typical ultrawide viewports. Compound selector outranks the
   .h-[680px] utility regardless of stylesheet order. */
@media (min-width: 1440px) {
  .hero-banner.video-container {
    height: clamp(680px, 48vw, 1000px);
  }
}

/* Poster placeholder sits behind the video and stays visible until the
   lazy-loaded video fades in over it (the <video> comes later in the DOM, so it
   paints on top). */
.hero-banner-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Placeholder styling in editor */
.hero-banner-placeholder {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}