/* ========================================
   HERO VIDEO SLIDER
   Slides de vídeo dentro del carrusel del hero.
   Comparten caja con los slides de imagen (#slider .item),
   así que aquí solo se resuelve el vídeo y su control de pausa.
   ======================================== */

#slider .hero-slide-video {
    position: relative;
}

#slider .hero-slide-video__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #000;
}

/* ========================================
   RÓTULO DEL HERO
   El título y el subtítulo solo acompañan a los slides de imagen:
   sobre el vídeo estorban. El JS marca #slider mientras el slide
   activo es de vídeo.
   ======================================== */

#slider #Caption {
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

#slider.has-video-slide #Caption {
    opacity: 0;
    /* visibility, y no display, para que además salga del árbol de accesibilidad */
    visibility: hidden;
}

/* ========================================
   CONTROL DE PAUSA (WCAG 2.2.2)
   Abajo a la izquierda para no chocar con las flechas
   y los puntos, que van abajo a la derecha.
   ======================================== */

#slider .hero-slide-video__toggle {
    position: absolute;
    bottom: 23px;
    left: calc((100vw - var(--container-width)) / 2);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#slider .hero-slide-video__toggle:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

#slider .hero-slide-video__toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Icono de pausa: dos barras */
#slider .hero-slide-video__toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

#slider .hero-slide-video__toggle-icon::before,
#slider .hero-slide-video__toggle-icon::after {
    content: "";
    display: block;
    width: 4px;
    height: 16px;
    background-color: #fff;
}

/* Icono de play: triángulo, cuando el vídeo está pausado */
#slider .hero-slide-video__toggle.is-paused .hero-slide-video__toggle-icon::before {
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid #fff;
    background-color: transparent;
}

#slider .hero-slide-video__toggle.is-paused .hero-slide-video__toggle-icon::after {
    display: none;
}

/* ========================================
   DESKTOP (desde 1181px)
   Con la máscara de reservas visible, el botón arranca justo donde
   arranca la máscara (mismo eje vertical que su borde izquierdo).
   ======================================== */
@media (min-width: 1181px) {
    #slider .hero-slide-video__toggle {
        left: var(--booking-mask-offset);
    }
}

/* ========================================
   TABLET (hasta 992px)
   ======================================== */
@media (max-width: 992px) {
    #slider .hero-slide-video__toggle {
        left: 15px;
    }
}

/* ========================================
   MÓVIL (hasta 767px)
   Sin máscara visible: el botón se alinea con el relleno del contenedor,
   igual que los puntos del carrusel al otro lado.
   ======================================== */
@media (max-width: 767px) {
    #slider .hero-slide-video__toggle {
        bottom: 15px;
        left: 15px;
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* ========================================
   PREFERENCIA DE MOVIMIENTO REDUCIDO
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    #slider .hero-slide-video__toggle,
    #slider #Caption {
        transition: none;
    }
}