/* ========================== Video Header (clean) ========================= */

.vh-hero{
  --vh-offset: 0px;                 /* sticky header height */
  --vh-overlay: rgba(0,0,0,.35);    /* readability veil */
  --vh-text-color: #fff;            /* default text color */
  --vh-ctrl-bg: rgba(20,20,20,.55); /* controls background */
  --vh-video-fit: cover;            /* NEW: video fit mode */
  --vh-video-position-x: 50%;      /* NEW: horizontal focal point */
  --vh-video-position-y: 50%;      /* NEW: vertical focal point */
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  font-family: "Kanit", Arial, sans-serif;
  color: var(--vh-text-color);
}
.vh-hero::before{
  content:"";
  position:absolute; inset:0;
  background: var(--vh-overlay);
  z-index:1; pointer-events:none;
}

/* Video layer (NO z-index to avoid stacking-context traps) */
.vh-video-wrap{ position:absolute; inset:0; }
.vh-video{ 
  position:absolute; 
  inset:0; 
  width:100%; 
  height:100%; 
  object-fit: cover;
  object-position: center 5%; 
}

/* NEW: Focal point helper classes - clients can add these to vh-hero element */
.vh-focus-top    { --vh-video-position-y: 25%; }  /* Keeps heads visible */
.vh-focus-center { --vh-video-position-y: 50%; }  /* Default behavior */
.vh-focus-bottom { --vh-video-position-y: 75%; }  /* Focus on lower portion */
.vh-focus-left   { --vh-video-position-x: 25%; }  /* Horizontal adjustments */
.vh-focus-right  { --vh-video-position-x: 75%; }  

/* NEW: Video fit mode helper classes */
.vh-fit-cover   { --vh-video-fit: cover; }    /* Default: fills container, may crop */
.vh-fit-contain { --vh-video-fit: contain; }  /* Shows full video, may have bars */
.vh-fit-auto    { --vh-video-fit: cover; }    /* See responsive rules below */

/* NEW: Responsive adjustments for ultra-wide displays */
@media (min-aspect-ratio: 21/9) {
  /* On ultra-wide screens, automatically adjust focal point to keep heads visible */
  .vh-hero:not(.vh-focus-center):not(.vh-focus-bottom) {
    --vh-video-position-y: 30%;
  }
}

/* NEW: Auto mode switches to contain on very wide screens */
@media (min-aspect-ratio: 21/9) {
  .vh-fit-auto {
    --vh-video-fit: contain;
    background-color: #000;  /* Black bars for letterboxing */
  }
}

/* Content layer fills hero area (above overlay and video) */
.vh-content{
  position:absolute; z-index:2;
  inset: var(--vh-offset, 0) 0 0 0;
  display:flex !important; flex-direction:column;
  gap:.75rem;
  max-width: 1400px; width:100%;
  margin-inline:auto;
  padding: clamp(3rem, 8vh, 6rem) 30px;

  /* defaults: left + top */
  text-align:left;
  align-items:flex-start;     /* horizontal */
  justify-content:flex-start; /* vertical */
}

/* Ensure headings are white by default (builder can override) */
.vh-hero .vh-h1, .vh-hero .vh-sub{ color: var(--vh-text-color); }

/* Horizontal alignment helpers */
.vh-content.align-left{   text-align:left;  align-items:flex-start; }
.vh-content.align-center{ text-align:center;align-items:center; }
.vh-content.align-right{  text-align:right; align-items:flex-end; }

/* Vertical alignment helpers */
.vh-content.valign-top{    justify-content:flex-start; }
.vh-content.valign-middle{ justify-content:center; }
.vh-content.valign-bottom{ justify-content:flex-end; }

/* Typography defaults */
.vh-h1{  font-weight:600; font-size: clamp(2.4rem, 6.8vw, 5.4rem); line-height:1.1; margin:0; letter-spacing:-.015em; }
.vh-sub{ font-size: clamp(1rem, 2.2vw, 1.25rem); opacity:.92; margin:0; }

/* Controls (overlay glass) — SIBLING of .vh-video-wrap so it sits above */
.vh-ctrls{
  position:absolute;
  z-index:4;
  display:flex; gap:.5rem;
  padding:.5rem .6rem; border-radius:999px;
  background: var(--vh-ctrl-bg);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  color:#fff;
  pointer-events:auto;
}

/* Overlay placements */
.vh-ctrls--left{   left:1rem; bottom:1rem; }
.vh-ctrls--center{ left:50%; top:60%; transform: translate(-50%,-50%); }

/* Below-video placement (outside the hero) */
.vh-ctrls--below{
  position:static;
  margin:0 auto .75rem auto;
  padding-top:.75rem;
  background:transparent; border:0; box-shadow:none;
  display:flex; justify-content:center; align-items:center; gap:.6rem;
}

/* Buttons */
.vh-btn{
  appearance:none; border:0; background: rgba(255,255,255,.10);
  color:#fff; cursor:pointer; padding:.55rem; border-radius:999px;
  display:grid; place-items:center;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.vh-ctrls--below .vh-btn{ background: rgba(20,20,20,.85); }
.vh-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.18); }
.vh-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.vh-btn svg{ display:block; }

/* Toggle icon swap */
.vh-toggle .icon-pause{ display:none; }
.vh-toggle.is-playing .icon-play{ display:none; }
.vh-toggle.is-playing .icon-pause{ display:block; }

/* Caption styling (visual polish; position is nudged via JS) */
.vh-video::cue{
  color:#fff;
  background: rgba(0,0,0,.55);
  font-weight:600;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height:1.2;
  text-shadow: 0 2px 3px rgba(0,0,0,.6);
  padding: .15em .4em;
  border-radius:.25em;
}

/* Mobile defaults: center unless explicitly set */
@media (max-width:600px){
  .vh-content{
    text-align:center; align-items:center; justify-content:center;
    padding: clamp(2rem, 12vh, 5rem) 5vw;
  }
  .vh-content.align-left{  text-align:left;  align-items:flex-start; }
  .vh-content.align-right{ text-align:right; align-items:flex-end; }
  .vh-content.valign-top{    justify-content:flex-start; }
  .vh-content.valign-bottom{ justify-content:flex-end; }
  .vh-ctrls--center{ left:50%; top:68%; transform: translate(-50%,-50%); }
}

/* where you want them vertically (middle of bottom third ≈ 72–75%) */
.vh-hero { 
  --ctrl-y: clamp(66%, 78%, 85%);   /* min, preferred, max */
}

/* apply to the centered overlay controls AND your play button */
.vh-ctrls--center,
.hero-toggle {
  top: var(--ctrl-y) !important;    /* move them down */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;                       /* above video/overlay */
}

/* mobile: nudge a bit higher so they don't crowd the edge */
@media (max-width: 600px){
  .vh-hero { --ctrl-y: 68%; }
}