/* ========================================
   VIDEO RESPONSIVO - TODAS LAS RESOLUCIONES
   ======================================== */

/* HUECO DE LA CABECERA FIJA
   La clase .stiky va escrita en el HTML (header.xsl) y el JS que la ponía al
   hacer scroll está desactivado, así que #header es position: fixed y opaco en
   TODAS las resoluciones. El hero reserva su alto con un margin-top en #slider
   (regla base en global/neobookings.css) para que la cabecera no le recorte la
   franja superior del vídeo, y a cambio TODAS las alturas de este archivo
   descuentan ese mismo hueco con calc(): así hueco + slider siguen midiendo el
   alto de pantalla de antes y el hero nunca pasa del 100vh.
   El valor vive en --sticky-header-height (global/neobookings.css), que cambia
   por tramo: 78px desde 1451px, 110px de 960 a 1450px, 100px de 768 a 959px y
   116px por debajo de 768px. */

/* VIDEO HERO - VISIBLE EN TODAS LAS RESOLUCIONES */
#home-video {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: -1;
    background-color: #000;
    transition: 1s opacity;
}

/* CONTENEDOR SLIDER - VISIBLE EN TODAS LAS RESOLUCIONES */
#slider > .container {
    display: block !important;
    position: absolute;
    height: 100%;
    right: 0;
    left: 0;
    width: 100%;
}

/* ========================================
   TABLET GRANDE / IPAD PRO (993px a 1180px)
   ======================================== */
@media (min-width: 993px) and (max-width: 1180px) {
    #slider {
        min-height: calc(60vh - var(--sticky-header-height));
        height: calc(60vh - var(--sticky-header-height));
        overflow: hidden;
    }

    #slider > .container {
        position: absolute;
        height: 100%;
    }

    #home-video {
        position: absolute;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    #slider .home-slider,
    #slider .owl-stage-outer,
    #slider .owl-stage,
    #slider .owl-item {
        width: 100%;
        height: calc(60vh - var(--sticky-header-height)) !important;
    }

    #slider .home-slider picture {
        height: 100%;
        width: 100%;
        display: block;
    }

    #slider .home-slider picture img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

/* ========================================
   TABLET Y MÓVIL (MENOR A 992px)
   ======================================== */
@media (max-width: 992px) {
    #slider {
        min-height: calc(60vh - var(--sticky-header-height));
        height: calc(60vh - var(--sticky-header-height));
        overflow: hidden;
    }

    #slider > .container {
        position: absolute;
        height: 100%;
    }

    #home-video {
        position: relative;
        width: 100%;
        height: calc(60vh - var(--sticky-header-height));
        min-height: calc(60vh - var(--sticky-header-height));
    }

    #slider .home-slider,
    #slider .owl-stage-outer,
    #slider .owl-stage,
    #slider .owl-item {
        width: 100%;
        height: calc(60vh - var(--sticky-header-height));
    }

    #slider .home-slider picture {
        height: 100%;
        width: 100%;
        display: block;
    }

    #slider .home-slider picture img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

/* ========================================
   MÓVIL PEQUEÑO (MENOR A 768px)
   ======================================== */
@media (max-width: 768px) {
    #slider {
        min-height: calc(80vh - var(--sticky-header-height));
        height: calc(80vh - var(--sticky-header-height));
    }

    #home-video {
        height: calc(80vh - var(--sticky-header-height));
        min-height: calc(80vh - var(--sticky-header-height));
    }

    #slider .home-slider,
    #slider .owl-stage-outer,
    #slider .owl-stage,
    #slider .owl-item {
        height: calc(80vh - var(--sticky-header-height));
    }

    #slider .home-slider picture img {
        object-fit: cover;
    }
}

/* ========================================
   MÓVIL EXTRA PEQUEÑO (MENOR A 480px)
   ======================================== */
@media (max-width: 480px) {
    #slider {
        min-height: calc(80vh - var(--sticky-header-height));
        height: calc(80vh - var(--sticky-header-height));
    }

    #home-video {
        height: calc(80vh - var(--sticky-header-height));
        min-height: calc(80vh - var(--sticky-header-height));
    }

    #slider .home-slider,
    #slider .owl-stage-outer,
    #slider .owl-stage,
    #slider .owl-item {
        height: calc(80vh - var(--sticky-header-height));
    }
}

/* ========================================
   DESKTOP PEQUEÑO (1181px a 1919px)
   ======================================== */
@media (min-width: 1181px) and (max-width: 1919px) {
    #slider {
        position: relative;
        float: left;
        width: 100%;
        overflow: hidden;
        min-height: calc(100vh - var(--sticky-header-height));
        height: calc(100vh - var(--sticky-header-height));
    }

    #slider > .container {
        position: absolute;
        height: 100%;
        right: 0;
        left: 0;
        display: block !important;
    }

    #home-video {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    /* 100% (no 100vw) para que el carrusel no se desplace por el ancho de la
       barra de scroll y sus controles cuadren con la máscara de reservas. */
    #slider .home-slider {
        width: 100%;
        height: calc(100vh - var(--sticky-header-height));
    }
}

/* ========================================
   DESKTOP GRANDE (MAYOR A 1920px)
   ======================================== */
@media (min-width: 1920px) {
    #slider {
        position: relative;
        float: left;
        width: 100%;
        overflow: hidden;
        min-height: calc(100vh - var(--sticky-header-height));
        height: calc(100vh - var(--sticky-header-height));
    }

    #slider > .container {
        position: absolute;
        height: 100%;
        right: 0;
        left: 0;
        display: block !important;
    }

    #home-video {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    /* 100% (no 100vw) para que el carrusel no se desplace por el ancho de la
       barra de scroll y sus controles cuadren con la máscara de reservas. */
    #slider .home-slider {
        width: 100%;
        height: calc(100vh - var(--sticky-header-height));
    }
}