/* Elemento US Builder: Portblue Hoteles */

.portblue-hoteles {
    position: relative;
    isolation: isolate;
}

.portblue-hoteles__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.portblue-hoteles__bg-layer {
    position: absolute;
    inset: 0;
    background-size: var(--portblue-hoteles-bg-size, cover);
    background-position: var(--portblue-hoteles-bg-position, center center);
    background-repeat: no-repeat;
    opacity: 0;
    will-change: opacity;
    transition: opacity .9s ease-in-out;
}

.portblue-hoteles__bg-layer.is-active {
    opacity: 1;
}

/*
 * Overlay sobre todo el contenedor: cubre tanto las imágenes de fondo
 * (".portblue-hoteles__bg" es "position:absolute;inset:0" dentro de
 * ".portblue-hoteles") como el área sin imagen, por debajo de las
 * tarjetas (z-index:0 aquí, 1 en ".portblue-hoteles__list"). El color de
 * este rgba() es solo el valor por defecto — configurable por completo
 * con el campo "Color del overlay" (ver templates/elements/portblue_hoteles.php).
 */
.portblue-hoteles__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
}

.portblue-hoteles__list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--portblue-hoteles-column-gap, 30px);
    row-gap: var(--portblue-hoteles-row-gap, 30px);
}

@media (max-width: 991px) {
    .portblue-hoteles__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .portblue-hoteles__list {
        grid-template-columns: 1fr;
    }
}

.portblue-hoteles__card {
    position: relative;
    min-width: 0;
    padding: 50px;
    text-align: center;
    display: flex;
    overflow-wrap: break-word;
}

/*
 * Tarjeta clickable: enlace absoluto que cubre toda la tarjeta. El
 * contenido deja pasar los clics (pointer-events: none) para que lleguen
 * al enlace, salvo el botón, que recupera "pointer-events: auto" cuando es
 * visible (reglas de más abajo) y conserva así su propio enlace.
 */
.portblue-hoteles__card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.portblue-hoteles__card.has-link {
    cursor: pointer;
}

.portblue-hoteles__card.has-link .portblue-hoteles__content {
    pointer-events: none;
}

/* El botón queda por encima del enlace de la tarjeta para seguir siendo clickable */
.portblue-hoteles__card.has-link .portblue-hoteles__button {
    position: relative;
    z-index: 2;
}

.portblue-hoteles__content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.portblue-hoteles__text {
    margin-top: auto;
}

.portblue-hoteles__logo {
    margin: 0 auto 20px;
    max-width: 80px;
}

.portblue-hoteles__logo img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.portblue-hoteles__top-title {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: .7;
}

.portblue-hoteles__title {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
}

.portblue-hoteles__text-body {
    margin: 10px 0 15px;
    font-size: 15px;
    line-height: 1.6;
}

/*
 * El botón está envuelto en un contenedor que colapsa a altura 0
 * (grid-template-rows: 0fr) hasta el hover/focus, empujando el título
 * hacia arriba al revelarse (mismo truco que en Hover Cards). El aspecto
 * visual del botón en sí lo aporta "w-btn" (tema padre Impreza).
 */
.portblue-hoteles__button-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s ease;
}

.portblue-hoteles__button-wrap > * {
    min-height: 0;
    overflow: hidden;
}

.portblue-hoteles__card:hover .portblue-hoteles__button-wrap,
.portblue-hoteles__card:focus-within .portblue-hoteles__button-wrap {
    grid-template-rows: 1fr;
}

.portblue-hoteles__button {
    margin-top: 18px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}

.portblue-hoteles__card:hover .portblue-hoteles__button,
.portblue-hoteles__card:focus-within .portblue-hoteles__button {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/*
 * En pantallas táctiles el ":hover" no es fiable (requiere doble toque:
 * uno para simularlo y otro para el click real), así que el botón se deja
 * siempre visible, sin esperar a ningún hover/focus. Se cubren tanto el
 * breakpoint de tablet/móvil del propio elemento como cualquier
 * dispositivo sin puntero de precisión (por si es una pantalla ancha pero
 * táctil).
 *
 * Por el mismo motivo, el fondo de la tarjeta deja de depender del hover:
 * en vez del crossfade compartido de ".portblue-hoteles__bg" (que necesita
 * saber sobre qué tarjeta se está haciendo hover), cada tarjeta muestra
 * directamente su propia imagen de fondo (si tiene una asignada, vía la
 * variable "--portblue-hoteles-card-bg" que pone el propio PHP), con un
 * velo oscuro para que el texto siga siendo legible.
 */
@media (max-width: 991px), (hover: none) {
    .portblue-hoteles__button-wrap {
        grid-template-rows: 1fr;
    }

    .portblue-hoteles__button {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .portblue-hoteles__bg {
        display: none;
    }

    .portblue-hoteles__card[data-bg] {
        background-image: var(--portblue-hoteles-card-bg, none);
        background-size: var(--portblue-hoteles-bg-size, cover);
        background-position: var(--portblue-hoteles-bg-position, center center);
        background-repeat: no-repeat;
        color: #fff;
    }

    .portblue-hoteles__card[data-bg]::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: rgba(0, 0, 0, .35);
    }

    .portblue-hoteles__card[data-bg] .portblue-hoteles__content {
        position: relative;
        z-index: 1;
    }
}