/* Hero video - add to the END of site.css (replaces the previous hero-video.css).
   #id selectors beat the compiled Tailwind classes in the markup, so
   index.php needs no changes. Tune the mobile look with the two variables. */

#video-wrap { --hv-ar: 16 / 10; --hv-bar-h: 4.75rem; }

.ctrl-fade { transition: opacity .35s ease; }

#video-wrap button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#hero-video { object-fit: cover; }

/* layers: video < big button (whole surface) < control bar */
#big-play { z-index: 1; }
#controls { z-index: 2; }
#big-play > span { pointer-events: none; }

/* the bar's gradient, padding and gaps never catch taps - only its real
   controls do, and none of them while it is faded out. Everything else falls
   through to the big button, i.e. the whole surface plays/pauses. */
#controls, #controls * { pointer-events: none; }
#controls button, #controls input { pointer-events: auto; }
#controls.opacity-0 button, #controls.opacity-0 input { pointer-events: none; }

#progress { display: block; height: 1.25rem; margin: 0; touch-action: none; }
#controls button { flex: none; }
#controls .flex-1 { min-width: 0; }

/* ---------- phones: larger, near edge-to-edge video ---------- */
@media (max-width: 639px) {
  #video-wrap {
    width: calc(100% + 2rem);
    max-width: none !important;
    margin-left: -1rem; margin-right: -1rem;
    border-radius: 1.25rem;
    aspect-ratio: var(--hv-ar) !important;
  }
  #controls { padding: 1.5rem .5rem .25rem; }
  #controls > div { margin-top: .25rem; gap: 0; }
  #controls button { min-width: 2.75rem; min-height: 2.75rem; display: inline-grid; place-items: center; }

  /* big button is centred in the space ABOVE the control bar, so it can
     never sit on the progress bar */
  #big-play { padding-bottom: var(--hv-bar-h); }
  #big-play > span { width: 3.75rem; height: 3.75rem; }
  #big-play svg { width: 1.75rem; height: 1.75rem; }
}
@media (max-width: 419px) {
  #rewind, #forward { display: none; }
}

/* ---------- fullscreen: fill the screen, never crop ---------- */
#video-wrap:fullscreen { width: 100% !important; height: 100% !important; max-width: none !important; aspect-ratio: auto !important; border-radius: 0; margin: 0; }
#video-wrap:-webkit-full-screen { width: 100% !important; height: 100% !important; max-width: none !important; aspect-ratio: auto !important; border-radius: 0; margin: 0; }
#video-wrap:fullscreen #hero-video { object-fit: contain; }
#video-wrap:-webkit-full-screen #hero-video { object-fit: contain; }
#video-wrap:fullscreen #controls { padding-bottom: max(.5rem, env(safe-area-inset-bottom)); }
#video-wrap:-webkit-full-screen #controls { padding-bottom: max(.5rem, env(safe-area-inset-bottom)); }