/* Widget WPBakery: Hover Cards */

.portblue-hover-cards {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
}

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

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

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

.portblue-hover-cards__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
}

.portblue-hover-cards__list {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(var(--portblue-hover-cards-columns, 3), 1fr);
    grid-auto-rows: 1fr;
    align-items: stretch;
    column-gap: var(--portblue-hover-cards-column-gap, 30px);
    row-gap: var(--portblue-hover-cards-row-gap, 30px);
}

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

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

.portblue-hover-card {
    position: relative;
    height: 100%;
    min-width: 0;
    padding: 50px 30px;
    text-align: center;
    display: flex;
    overflow-wrap: break-word;
}

/*
 * El logo queda arriba de forma natural (primer elemento del flujo) y el
 * bloque de textos + botón se ancla abajo con "margin-top: auto" (truco
 * clásico de flexbox para empujar un elemento al final del contenedor).
 */
/*
 * 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-hover-card__card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.portblue-hover-card.has-link {
    cursor: pointer;
}

.portblue-hover-card.has-link .portblue-hover-card__content {
    pointer-events: none;
}

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

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

.portblue-hover-card__text {
    margin-top: auto;
}

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

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

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

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

/*
 * El botón está envuelto en un contenedor que colapsa a altura 0
 * (grid-template-rows: 0fr) cuando la tarjeta no está en hover. Como el
 * contenido de la tarjeta está centrado verticalmente, al expandirse este
 * contenedor el bloque completo (logo + textos + botón) crece desde su
 * centro: el texto se desplaza hacia arriba y el botón aparece debajo.
 * El aspecto visual del botón en sí (colores, padding, border-radius...)
 * lo aporta la clase "w-btn" del tema padre Impreza (ver buttons.css).
 */
.portblue-hover-card__button-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s ease;
}

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

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

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

.portblue-hover-card:hover .portblue-hover-card__button,
.portblue-hover-card:focus-within .portblue-hover-card__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 widget 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-hover-cards__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-hover-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-hover-card__button-wrap {
        grid-template-rows: 1fr;
    }

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

    .portblue-hover-cards__bg {
        display: none;
    }

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

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

    .portblue-hover-card[data-bg] .portblue-hover-card__content {
        position: relative;
        z-index: 1;
    }
}