/* ============================================================
   Elementor HLS Video — frontend styles
   ============================================================ */

/* ── Wrapper & aspect ratios ─────────────────────────────── */
.ehv-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.ehv-ratio-16-9  { padding-top: 56.25%; }
.ehv-ratio-21-9  { padding-top: 42.86%; }
.ehv-ratio-4-3   { padding-top: 75%; }
.ehv-ratio-3-2   { padding-top: 66.67%; }
.ehv-ratio-1-1   { padding-top: 100%; }
.ehv-ratio-none  { padding-top: 0; height: 100%; }

/* ── Video element ───────────────────────────────────────── */
.ehv-wrapper .ehv-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ehv-ratio-none .ehv-video {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ── Debug HUD (widget) ─────────────────────────────────── */
.ehv-hud {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 99;
  font-family: monospace;
  font-size: 12px;
  color: #00ff9d;
  background: rgba(0, 0, 0, 0.65);
  padding: 10px 14px;
  line-height: 1.5;
  white-space: pre;
  pointer-events: none;
  border-radius: 6px;
}

/* ── Editor preview placeholder ─────────────────────────── */
.ehv-placeholder,
.ehv-editor-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #aaa;
  background: #1a1a2e;
  min-height: 180px;
  text-align: center;
}

.ehv-placeholder .eicon-video-camera,
.ehv-editor-preview .eicon-video-camera {
  font-size: 48px;
  margin-bottom: 12px;
  color: #666;
}

.ehv-editor-preview p {
  margin: 4px 0;
  font-size: 13px;
  word-break: break-all;
}

/* ============================================================
   Background video extension
   ============================================================ */

/* The parent element (section/container) must be relative */
.elementor-element:has(> .ehv-bg-wrap) {
  position: relative;
  overflow: hidden;
}

/* Fallback for browsers without :has() */
.elementor-section,
.e-container,
.elementor-column {
  /* position: relative is already Elementor's default — no change needed */
}

/* Wrapper sits behind all children */
.ehv-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Video fills the wrapper */
.ehv-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
}

/* Colour overlay (optional, set via controls) */
.ehv-bg-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Fallback image */
.ehv-bg-fallback {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Debug HUD for background mode — top-left of the section */
.ehv-bg-hud {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 100;
  font-family: monospace;
  font-size: 12px;
  color: #00ff9d;
  background: rgba(0, 0, 0, 0.65);
  padding: 10px 14px;
  line-height: 1.5;
  white-space: pre;
  pointer-events: none;
  border-radius: 6px;
}

/* Ensure section inner-wrap sits above the background video */
.elementor-section > .elementor-container,
.e-container > .e-con-inner,
.elementor-column > .elementor-widget-wrap {
  position: relative;
  z-index: 1;
}