:root {
  --outland-primary-color: #1e90ff;
  --outland-secondary-color: #324a6d;
  --outland-background-color: #000;
  --outland-text-color: #ffffff;
  --outland-text-menu-color: #ffffff8c;
  --outland-text-shadow: 0 8px 10px rgba(0, 0, 0, 0.5);
  --outland-font-family: "Antonio", sans-serif;
}

/* ==========================================================================
   Grid automática ([outland_film_grid])
   ========================================================================== */

.outland-film-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.outland-film-grid .outland-film-card {
  aspect-ratio: 16 / 9;
  min-height: 250px;
}

/* ======================================================================
   Tarjeta suelta ([outland_film id="X" ratio="W:H"])
   - Modo fill (default): rellena el contenedor de Elementor
   - Modo ratio: usa proporción fija cuando se pasa ratio="W:H"
   ====================================================================== */

.outland-film-embed {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0;
}

.outland-film-embed--fill {
  height: 100%;
  min-height: 0;
  /* Fallback si Elementor no propaga altura: evita colapso a 0px */
  aspect-ratio: 16 / 9;
}

/* ------------------------------------------------------------------------
   En widgets de shortcode de Elementor NO confiamos en que el % de altura
   se propague por toda la cadena de envoltorios (widget > widget-container
   > span.elementor-shortcode > embed): basta con que UN solo eslabón no
   tenga una altura "definida" (contenedor con min-height en vez de height,
   contenedor "ajustar al contenido", el span de Elementor renderizado como
   inline, etc.) para que el porcentaje no se resuelva y el embed caiga al
   aspect-ratio de fallback, dejando huecos.

   En su lugar, anclamos el embed con position:absolute + inset:0 al propio
   widget de Elementor. Así solo hace falta que ESE contenedor tenga tamaño
   real (Elementor se lo da vía flex/stretch de forma nativa) y da igual
   cómo esté maquetado todo lo que hay en medio.
   ------------------------------------------------------------------------ */
.elementor-widget-shortcode {
  position: relative;
  height: 100%;
  min-height: 0;
}

.elementor-widget-shortcode > .elementor-widget-container {
  position: relative;
  height: 100%;
  min-height: 0;
}

.elementor-widget-shortcode .elementor-shortcode {
  position: absolute;
  inset: 0;
}

.elementor-widget-shortcode .outland-film-embed--fill {
  position: absolute;
  inset: 0;
  height: auto;
  aspect-ratio: unset; /* con inset:0 ya no hace falta fallback de ratio */
}

/* Red de seguridad: si el Container en modo Grid se queda con filas en
   "auto" y sin una altura fijada en ningún punto, el widget (item del
   grid) mediría 0 y el vídeo desaparecería del todo (el embed ya no aporta
   altura propia porque es position:absolute). Este min-height evita ese
   colapso total; en cuanto fijes Min Height + Grid Rows en el panel de
   Elementor, este valor deja de notarse porque el widget ya mide más. */
.e-grid > .elementor-widget-shortcode {
  min-height: 260px;
}

.outland-film-embed--ratio {
  aspect-ratio: 16 / 9;
}

.outland-film-embed .outland-film-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ======================================================================
   Helpers para Elementor (layout manual por contenedores)
   - Clase en contenedor padre: of-films-row
   - Clase en cada contenedor hijo con shortcode: of-film-col

   Permite cambiar anchos desde los controles de Elementor sin que la
   columna estrecha colapse ni se deforme el poster/video.
   ====================================================================== */

.of-films-row {
  display: flex;
  align-items: stretch;
}

.of-films-row > .of-film-col {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

/* Mantiene el ancho definido en Elementor (width/flex-basis) sin encoger */
.of-films-row > .of-film-col.e-con {
  flex-grow: 0;
  flex-shrink: 0;
}

/* El widget dentro de la columna ya se estira por flex (align-items:stretch
   en .of-films-row y .of-film-col). Solo forzamos un min-height como red de
   seguridad por si la fila no tiene una altura real definida (p. ej. fila
   con "ajustar al contenido"). El anclaje absoluto de arriba se encarga del
   resto: el media siempre cubre el 100% de este widget, sin recortes ni
   huecos, y sin usar aspect-ratio aquí (primaría sobre la altura real de la
   columna y volveríamos a tener el mismo problema). */
.of-film-col > .elementor-widget-shortcode {
  width: 100%;
  min-height: var(--of-film-min-height, 220px);
}

/* ==========================================================================
   Tarjeta: base común
   ========================================================================== */

.outland-film-card {
  position: relative;
  overflow: hidden;
  background: #000;
}

.elementor-shortcode .outland-film-poster,
.elementor-shortcode .outland-film-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.outland-film-poster {
  display: block;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.3s ease;
  background-color: #1a1a1a;
}

.outland-film-card video {
  display: block;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Ocultar el poster / mostrar el vídeo al hacer hover, EXCEPTO en tarjetas
   con autoplay: esas se rigen solo por .is-playing (JS + viewport), nunca
   por el ratón. */
.outland-film-card:not(.outland-film-card--autoplay):hover .outland-film-poster,
.outland-film-card.is-playing .outland-film-poster {
  opacity: 0;
  pointer-events: none;
}

.outland-film-card:not(.outland-film-card--autoplay):hover video,
.outland-film-card.is-playing video {
  opacity: 1;
}

/* ==========================================================================
   Captions
   ========================================================================== */
.outland-film-card .outland-film-caption {
  position: absolute;
  font-family: var(--font-family, var(--outland-font-family));
  font-size: 1.5rem;
  margin: 0;
  padding: 1rem;
  z-index: 3;
  color: #fff;
  text-shadow: var(--text-shadow, var(--outland-text-shadow));
  width: auto;
  box-sizing: border-box;
  white-space: normal;
  line-height: 1.1;
  max-width: calc(100% - 40px);
  overflow-wrap: break-word;
  animation:
    outland-caption-fade linear both,
    outland-caption-move linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;

  line-height: 1.1;

  transform-style: preserve-3d;

    will-change:
        transform,
        opacity;

    transition:
        transform .12s linear,
        opacity .15s linear;

}

/* Fallback para Safari / Firefox sin soporte de scroll-driven animations:
   sin esto el título se quedaría invisible en vez de mostrarse fijo */
@supports not (animation-timeline: view()) {
  .outland-film-card .outland-film-caption {
    animation: none;
    opacity: 1;
    translate: 0 0;
  }
}

.outland-film-card .outland-film-caption.header {
  font-size: 3.5rem !important;
}

@keyframes outland-caption-move {
  0% {
    translate: 0 150%;
  }
  50% {
    translate: 0 0%;
  }
  100% {
    translate: 0 -150%;
  }
}

@keyframes outland-caption-fade {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ==========================================================================
   Animación de captions controlada por JS
   ========================================================================== */
.outland-film-card .outland-film-caption.is-animated {
  animation: none !important;

  will-change: transform, opacity, filter;

  transform-origin: center center;

  backface-visibility: hidden;

  perspective: 1000px;
}

/* Forzar caption centrado sin posición aleatoria */
.outland-film-card .outland-film-caption.centered.is-animated {
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  text-align: center !important;
}

.outland-film-card video,
.outland-film-poster{

    transition:

        transform
        .9s
        cubic-bezier(.22,.61,.36,1),

        opacity
        .35s ease;

    will-change:transform;

}