/* ============================================================
   TGA Sequence Player — base layout
   ============================================================ */

/* Disable any old pseudo-element sizing that might exist in theme CSS */
.tga-seq::before{
  content: none !important;
  display: none !important;
  padding-top: 0 !important;
}

.tga-seq{
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

/* In-flow sizer reserves height */
.tga-seq > .tga-seq__sizer{
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  padding-top: var(--tga-seq-pad, 56.25%) !important;
  pointer-events: none !important;
}

/* Optional: prevent upscaling on desktop */
@media (min-width: 1025px){
  .tga-seq{
    max-width: var(--tga-seq-maxw, 100%) !important;
  }
}

/* Fallback (first frame) */
.tga-seq > img.tga-seq__fallback{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;

  object-fit: var(--tga-seq-fit, cover) !important;
  object-position: center center !important;

  z-index: 0 !important;
  opacity: 1;
}

/* Animated layers */
.tga-seq img.tga-seq__img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;

  object-fit: var(--tga-seq-fit, cover) !important;
  object-position: center center !important;

  opacity: 0;
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;

  z-index: 1;
}

.tga-seq img.tga-seq__img.is-visible{
  opacity: 1;
}

/* ============================================================
   Dual mode (mode="dual")
   ============================================================ */

/* Height should match ONE panel width (half of the overall stage) */
.tga-seq.tga-seq--dual > .tga-seq__sizer{
  padding-top: calc(var(--tga-seq-pad, 56.25%) * 0.5) !important;
}

/* Allow up to 2× native width without upscaling each half */
@media (min-width: 1025px){
  .tga-seq.tga-seq--dual{
    max-width: var(--tga-seq-maxw-dual, 100%) !important;
  }
}

/* Side-by-side panels */
.tga-seq.tga-seq--dual .tga-seq__panel{
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  overflow: hidden !important;
  display: block !important;
  z-index: 1 !important;
}

/* Left panel occupies left half (minus half gap) */
.tga-seq.tga-seq--dual .tga-seq__panel--left{
  left: 0 !important;
  right: calc(50% + (var(--tga-seq-gap, 0px) / 2)) !important;
}

/* Right panel occupies right half (minus half gap) */
.tga-seq.tga-seq--dual .tga-seq__panel--right{
  right: 0 !important;
  left: calc(50% + (var(--tga-seq-gap, 0px) / 2)) !important;
}

/* ============================================================
   Elementor hardening (scoped via JS-added host class)
   JS will add .tga-seq-host to the relevant wrapper chain
   ============================================================ */
.tga-seq-host{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 1px !important;
}

.tga-seq-host.elementor-element.elementor-widget-shortcode{
  flex: 1 1 100% !important;
  align-self: stretch !important;
  min-width: 1px !important;
}

/* ============================================================
   Stage sizing override: stage="container"
   - Only affects SINGLE layout (not dual)
   - Height is set by JS to match an Elementor wrapper height
   ============================================================ */
.tga-seq.tga-seq--stage-container:not(.tga-seq--dual) > .tga-seq__sizer{
  display: none !important;
  padding-top: 0 !important;
}