/* =========================================
   HERO VIDEO BACKGROUND (YT API)
   Desktop restored: phones smaller + lower
   ========================================= */

:root {
  --nav-height: 100px;

  /* Overlay darkness */
  --overlay-opacity: 0.65;

  /* =========================
     DESKTOP DEFAULTS (RESTORED)
     ========================= */
  --video-scale: 1.25;      /* smaller than before */
  --video-shift-x: 0vw;     /* center */
  --video-shift-y: 7vh;     /* push DOWN so phones sit lower */

  /* Foreground padding (doesn't affect video) */
  --hero-content-top-pad: 0px;
  --hero-content-side-pad: 0px;
}

/* Hero container */
.hero-bg {
  position: relative;
  height: calc(100vh - var(--nav-height));
  width: 100%;
  overflow: hidden;
  background: #000;
}

/* YouTube player wrapper (shift BEFORE scale) */
#yt-player {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;

  transform:
    translate(-50%, -50%)
    translateX(var(--video-shift-x))
    translateY(var(--video-shift-y))
    scale(var(--video-scale));

  transform-origin: center;
  z-index: 1;
  pointer-events: none;
}

/* Force iframe to fill wrapper */
#yt-player iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}

/* Dark overlay */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--overlay-opacity));
  z-index: 2;
  pointer-events: none;
}

/* Foreground content */
.hero-content {
  position: relative;
  z-index: 3;
  padding-top: var(--hero-content-top-pad);
  padding-left: var(--hero-content-side-pad);
  padding-right: var(--hero-content-side-pad);
}

.hero-content a,
.hero-content button {
  position: relative;
  z-index: 4;
}

/* =========================================
   BREAKPOINTS
   ========================================= */

/* Ultrawide: slightly smaller still (often looks better) */
@media (min-width: 1600px) {
  :root {
    --video-scale: 1.18;
    --video-shift-y: 8vh;
  }
}

/* Mid widths (tablets / small laptops) */
@media (min-width: 700px) and (max-width: 1100px) {
  :root {
    --overlay-opacity: 0.70;

    /* a touch more cover at these sizes */
    --video-scale: 1.40;
    --video-shift-x: 0vw;
    --video-shift-y: 4vh;

    --hero-content-top-pad: 10px;
    --hero-content-side-pad: 18px;
  }
}

/* ==========================
   MOBILE – LEFT BOARD FOCUS
   (your working alignment + moved UP)
   ========================== */
@media (max-width: 768px) {
  :root {
    --overlay-opacity: 0.72;
    --video-scale: 2.10;

    /* Horizontal centering (stable) */
    --video-shift-x: clamp(14vw, 20vw, 26vw);

    /* Move UP on mobile */
    --video-shift-y: clamp(-6vh, -8vh, -10vh);

    --hero-content-top-pad: 12px;
    --hero-content-side-pad: 16px;
  }
}

@media (max-width: 420px) {
  :root {
    --overlay-opacity: 0.76;
    --video-scale: 2.35;

    --video-shift-x: clamp(18vw, 28vw, 36vw);
    --video-shift-y: clamp(-8vh, -11vh, -14vh);

    --hero-content-top-pad: 18px;
    --hero-content-side-pad: 14px;
  }
}

@media (max-width: 360px) {
  :root {
    --video-scale: 2.55;
    --video-shift-x: clamp(20vw, 32vw, 42vw);
    --video-shift-y: clamp(-10vh, -14vh, -18vh);
  }
}