/* ============================================================
   VIDEO HERO BACKGROUND — Hybrid Solar Group
   File: css/video-bg.css
   Used by: index_video.html only
   ============================================================ */

/* ── Section wrapper ──────────────────────────────────────── */
.video-hero-section {
  position: relative;
  overflow: hidden;
  background: #0d2748; /* deep navy fallback while video loads */
  min-height: 100vh;
}

/* ── YouTube iframe positioned as background ──────────────── */
.video-hero__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Scale up the iframe to cover 16:9 regardless of viewport */
  width: 177.78vh;   /* 100vh × (16/9) */
  min-width: 100%;
  height: 56.25vw;   /* 100vw × (9/16) */
  min-height: 100%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none; /* let clicks pass through to content */
}

.video-hero__iframe {
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
}

/* ── Gradient overlay — keeps text readable ───────────────── */
.video-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(13, 39, 72, 0.80) 0%,
    rgba(13, 39, 72, 0.60) 55%,
    rgba(0, 0, 0, 0.45) 100%
  );
  z-index: 1;
}

/* ── Content layer sits above overlay ────────────────────────*/
.video-hero__content {
  position: relative;
  z-index: 2;
}

/* ── Bottom wave stays on top ─────────────────────────────── */
.video-hero-section .hero-wave {
  position: relative;
  z-index: 3;
}

/* ── Subtle vignette on left edge for extra depth ────────── */
.video-hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 20% 50%,
    rgba(19, 56, 101, 0.30) 0%,
    transparent 70%
  );
  z-index: 1;
  pointer-events: none;
}

/* ── Pause / unmute control (optional UX affordance) ──────── */
.video-hero__mute-btn {
  position: absolute;
  bottom: 120px;
  right: 32px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.30);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(6px);
}
.video-hero__mute-btn:hover {
  background: rgba(212,175,55,0.75);
  border-color: transparent;
  transform: scale(1.08);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .video-hero-section {
    min-height: 100svh; /* small viewport height on mobile */
  }

  /* On narrow screens increase the overlay so text pops */
  .video-hero__overlay {
    background: linear-gradient(
      160deg,
      rgba(13, 39, 72, 0.88) 0%,
      rgba(13, 39, 72, 0.72) 100%
    );
  }

  .video-hero__mute-btn {
    bottom: 90px;
    right: 20px;
  }
}