/*
Theme Name: Solaris Child
Template: solaris_tcd088
Version: 1.0
*/

/* =========================
   Slider: full-bleed y video a pantalla completa en móvil
   ========================= */

/* Base móvil: ancho de ventana y 16:9 por defecto */
@media (max-width: 768px){
  #header_slider_wrap,
  #header_slider{
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  /* Evita recortes del layout padre */
  #container{ overflow: visible; }

  /* Contenedor del video a 16:9 + altura mínima */
  #header_slider .item .video_wrap,
  #header_slider .item .video_wrap .youtube_inner{
    position: relative;
    width: 100vw;
    margin: 0;
    aspect-ratio: 16 / 9;
    height: auto;
    overflow: hidden;
    display: block;
    min-height: 45vh;
  }

  /* El medio ocupa todo (cover) */
  #header_slider .item .video_wrap .video-el,
  #header_slider .item .video_wrap video,
  #header_slider .item .video_wrap iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Texto y overlay por encima del video */
  #header_slider .item .caption,
  #header_slider .item .overlay{
    position: relative;
    z-index: 2;
  }
}

/* Móvil en vertical: ocupa toda la pantalla (forzamos altura en toda la cadena de slick) */
@media (max-width: 768px) and (orientation: portrait){
  html, body{ height: 100%; }

  /* Altura del viewport "real" (Safari/Chrome modernos) */
  #header_slider_wrap,
  #header_slider,
  #header_slider .slick-list,
  #header_slider .slick-track{
    height: 100svh !important;
    min-height: 100svh !important;
  }

  /* Fallback: dynamic viewport */
  @supports not (height: 100svh){
    #header_slider_wrap,
    #header_slider,
    #header_slider .slick-list,
    #header_slider .slick-track{
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }

  /* Fallback adicional: -webkit-fill-available para iOS antiguos */
  @supports (height: -webkit-fill-available){
    #header_slider_wrap,
    #header_slider,
    #header_slider .slick-list,
    #header_slider .slick-track{
      height: -webkit-fill-available !important;
      min-height: -webkit-fill-available !important;
    }
  }

  /* Último fallback clásico */
  @supports not (height: 100dvh){
    #header_slider_wrap,
    #header_slider,
    #header_slider .slick-list,
    #header_slider .slick-track{
      height: 100vh !important;
      min-height: 100vh !important;
    }
  }

  /* Cada slide ocupa toda la altura disponible */
  #header_slider .slick-slide,
  #header_slider .item{
    height: 100% !important;
  }

  /* Anula 16:9 y fuerza alto completo en slides con video */
  #header_slider .item.video .video_wrap,
  #header_slider .item.youtube .video_wrap,
  #header_slider .item .video_wrap .youtube_inner{
    aspect-ratio: auto !important;
    height: 100% !important;
    min-height: 100% !important;
  }

  /* El medio cubre todo el contenedor */
  #header_slider .item .video_wrap .video-el,
  #header_slider .item .video_wrap video,
  #header_slider .item .video_wrap iframe{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Coloca el texto sobre el video y hacia abajo */
  #header_slider .item .caption,
  #header_slider .item .overlay{
    position: absolute !important;
    left: 0; right: 0;
    bottom: 12vh;
    z-index: 2;
    padding: 0 20px;
  }
}

/* Fallback si el navegador NO soporta aspect-ratio */
@supports not (aspect-ratio: 16/9){
  #header_slider .item .video_wrap{
    height: 0;
    padding-top: 56.25%; /* 16:9 */
  }
  #header_slider .item .video_wrap .video-el,
  #header_slider .item .video_wrap video,
  #header_slider .item .video_wrap iframe{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
  }
}

/* Desktop: mantiene cover por si el contenedor es alto */
@media (min-width: 769px){
  #header_slider .item .video_wrap .video-el,
  #header_slider .item .video_wrap video,
  #header_slider .item .video_wrap iframe{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}