/* Widget WPBakery: Grid Alterno */

.portblue-alt-grid {
    display: flex;
    align-items: flex-start;
    column-gap: var(--portblue-alt-grid-column-gap, 20px);
}

.portblue-alt-grid__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    row-gap: var(--portblue-alt-grid-row-gap, 20px);
}

.portblue-alt-grid__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: 30px;
    background-color: var(--color-content-bg-alt, #eee);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

.portblue-alt-grid__card--large {
    height: 866px;
}

.portblue-alt-grid__card--small {
    height: 609px;
}

.portblue-alt-grid__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
    background-image: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .65) 100%);
}

.portblue-alt-grid__card:hover .portblue-alt-grid__overlay,
.portblue-alt-grid__card:focus-within .portblue-alt-grid__overlay {
    opacity: 1;
}

.portblue-alt-grid__content {
    position: relative;
    z-index: 1;
}

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

/*
 * El texto y el botón viven dentro de un contenedor que colapsa a altura
 * 0 (grid-template-rows: 0fr) hasta que se hace hover/focus. Como la
 * tarjeta ancla su contenido abajo (justify-content: flex-end), al
 * expandirse este bloque el título se desplaza hacia arriba en vez de
 * limitarse a aparecer en un hueco ya reservado.
 */
.portblue-alt-grid__reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s ease;
}

.portblue-alt-grid__reveal > div {
    min-height: 0;
    overflow: hidden;
}

.portblue-alt-grid__card:hover .portblue-alt-grid__reveal,
.portblue-alt-grid__card:focus-within .portblue-alt-grid__reveal {
    grid-template-rows: 1fr;
    margin-top: 12px;
}

.portblue-alt-grid__text {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.5;
}

/*
 * El aspecto visual del botón (colores, padding, border-radius, hover...)
 * lo aporta la clase "w-btn" del tema padre Impreza. Aquí solo se anima
 * su aparición.
 */
.portblue-alt-grid__button-wrap {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease;
}

.portblue-alt-grid__card:hover .portblue-alt-grid__button-wrap,
.portblue-alt-grid__card:focus-within .portblue-alt-grid__button-wrap {
    opacity: 1;
    transform: translateY(0);
}

/*
 * En tablet/móvil (y en cualquier pantalla sin ":hover" fiable, como una
 * táctil ancha) no tiene sentido depender del hover para ver el texto y
 * el botón: se dejan siempre visibles, en el mismo estado que el hover en
 * escritorio, en vez de escondidos hasta un hover que no va a llegar de
 * forma fiable.
 */
@media (max-width: 991px), (hover: none) {
    .portblue-alt-grid__overlay {
        opacity: 1;
    }

    .portblue-alt-grid__reveal {
        grid-template-rows: 1fr;
        margin-top: 12px;
    }

    .portblue-alt-grid__button-wrap {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * En Tablet/Móvil el número de columnas es configurable por separado (ver
 * los campos "Columnas (Tablet)"/"Columnas (Móvil)"), y ya no coincide
 * necesariamente con el de Escritorio — así que aquí se abandona el
 * layout de "una columna flex por cada .portblue-alt-grid__col" (pensado
 * para el patrón de alturas alternas de Escritorio) y se pasa a un grid
 * plano de verdad. ".portblue-alt-grid__col" se pone en "display:contents"
 * para que sus tarjetas entren directamente como hijos del grid, en vez
 * de quedarse agrupadas en su columna original.
 */
@media (max-width: 991px) {
    .portblue-alt-grid {
        display: grid;
        grid-template-columns: repeat(var(--portblue-alt-grid-columns-tablet, 2), 1fr);
        column-gap: var(--portblue-alt-grid-column-gap, 20px);
        row-gap: var(--portblue-alt-grid-row-gap, 20px);
    }

    .portblue-alt-grid__col {
        display: contents;
    }
}

@media (max-width: 767px) {
    .portblue-alt-grid {
        grid-template-columns: repeat(var(--portblue-alt-grid-columns-mobile, 1), 1fr);
    }

    .portblue-alt-grid__card {
        height: 320px;
    }
}

/*
 * Animación de entrada (opcional, campo "Animación de entrada (fade in)").
 * Cada tarjeta arranca invisible y desplazada, y assets/js/alt-grid.js le
 * añade "is-visible" (con IntersectionObserver) en cuanto entra en el
 * viewport. El retraso escalonado por tarjeta lo pone el propio PHP en
 * "--portblue-alt-grid-fade-in-delay" (ver portblue-alt-grid.php).
 */
.portblue-alt-grid--fade-in .portblue-alt-grid__card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--portblue-alt-grid-fade-in-delay, 0ms);
}

.portblue-alt-grid--fade-in .portblue-alt-grid__card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*
 * Si el navegador no soporta IntersectionObserver (ver alt-grid.js), el
 * JS añade esta clase al contenedor y se muestran todas sin animar, en
 * vez de quedarse invisibles para siempre.
 */
.portblue-alt-grid--fade-in.portblue-alt-grid--no-observer .portblue-alt-grid__card {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .portblue-alt-grid--fade-in .portblue-alt-grid__card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}