/* Elemento US Builder: Grid Alterno */

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

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

.portblue-mosaic__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-mosaic__card--large {
    height: 866px;
}

.portblue-mosaic__card--small {
    height: 609px;
}

/*
 * Overlay en dos capas superpuestas (mismo patrón que
 * ".portblue-hover-cards__bg-layer" en portblue-hover-cards.php): la capa
 * inicial se ve siempre, con su propio color sólido ("Color inicial del
 * overlay"); la capa de hover está encima, empieza en opacity:0 y aparece
 * con un crossfade al hacer hover/focus, con su propio color ("Color del
 * overlay al hacer hover") — así la tarjeta puede cambiar de color de
 * overlay al pasar el ratón, no solo de opacidad. Cada capa cubre el
 * 100% del ancho/alto de la tarjeta ("inset: 0" sobre el
 * "position: relative" de ".portblue-mosaic__card"), como color plano sin
 * degradado — la legibilidad del texto encima se controla con la
 * opacidad/transparencia del propio color elegido, no con un degradado.
 */
.portblue-mosaic__overlay,
.portblue-mosaic__overlay--hover {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: rgba(0, 0, 0, .65);
}

.portblue-mosaic__overlay--hover {
    opacity: 0;
    transition: opacity .3s ease;
}

.portblue-mosaic__card:hover .portblue-mosaic__overlay--hover,
.portblue-mosaic__card:focus-within .portblue-mosaic__overlay--hover {
    opacity: 1;
}

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

.portblue-mosaic__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-mosaic__reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s ease;
}

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

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

.portblue-mosaic__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-mosaic__button-wrap {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease;
}

.portblue-mosaic__card:hover .portblue-mosaic__button-wrap,
.portblue-mosaic__card:focus-within .portblue-mosaic__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-mosaic__overlay--hover {
        opacity: 1;
    }

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

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

/*
 * Disposición "Destacado" (campo "Disposición"): patrón fijo que se
 * repite cada 6 tarjetas — la 1ª a todo el ancho, las 3 siguientes en
 * fila, y las 2 últimas centradas debajo. Se usa un grid de 6 columnas
 * como unidad mínima común: cada tarjeta de la fila de 3 ocupa 2 de esas
 * 6 columnas (2 = 6/3), y las 2 de la última fila ocupan también 2
 * columnas cada una pero empezando en la columna 2, dejando una columna
 * libre a cada lado para que queden centradas con el mismo ancho que las
 * de la fila de 3 (ver portblue_mosaic__card--hero/--row3/--row2-a/-b,
 * asignadas en templates/elements/portblue_mosaic.php según la posición
 * de cada tarjeta dentro del ciclo de 6).
 */
.portblue-mosaic--featured {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--portblue-mosaic-column-gap, 20px);
    row-gap: var(--portblue-mosaic-row-gap, 20px);
}

@media (min-width: 992px) {
    .portblue-mosaic--featured .portblue-mosaic__card--hero {
        grid-column: 1 / -1;
    }

    .portblue-mosaic--featured .portblue-mosaic__card--row3 {
        grid-column: span 2;
    }

    .portblue-mosaic--featured .portblue-mosaic__card--row2-a {
        grid-column: 2 / span 2;
    }

    .portblue-mosaic--featured .portblue-mosaic__card--row2-b {
        grid-column: 4 / span 2;
    }
}

@media (max-width: 991px) {
    .portblue-mosaic--featured {
        grid-template-columns: 1fr;
    }
}

/*
 * Disposición "Destacado (1 + 3 + 1)": patrón fijo que se repite cada 5
 * tarjetas — la 1ª y la última a todo el ancho, con las 3 del medio en
 * fila. Al no haber una fila final de 2 tarjetas que centrar (a diferencia
 * de "--featured"), basta un grid de 3 columnas: la fila de 3 ocupa 1
 * columna cada una, y "grid-column: 1/-1" en ambas tarjetas a ancho
 * completo (misma clase ".portblue-mosaic__card--hero" para las dos,
 * asignada en templates/elements/portblue_mosaic.php) hace que cada una
 * ocupe su propia fila completa vaya donde vaya en el orden de lectura —
 * no hace falta un rol distinto para la última.
 */
.portblue-mosaic--featured-ends {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--portblue-mosaic-column-gap, 20px);
    row-gap: var(--portblue-mosaic-row-gap, 20px);
}

@media (min-width: 992px) {
    .portblue-mosaic--featured-ends .portblue-mosaic__card--hero {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991px) {
    .portblue-mosaic--featured-ends {
        grid-template-columns: 1fr;
    }
}

/*
 * Fallback de apilado simple para pantallas estrechas: en condiciones
 * normales, la propia plantilla (templates/elements/portblue_mosaic.php)
 * ya genera siempre una regla "display:grid" por instancia para Tablet y
 * Móvil (campos "Columnas (Tablet)"/"Columnas (Móvil)"), que gana por ir
 * en un <style> más adelante en el documento. Esta regla solo entra en
 * juego como red de seguridad si esa generación no llega a producirse
 * (p.ej. us_get_responsive_states() no disponible).
 */
@media (max-width: 767px) {
    .portblue-mosaic {
        flex-direction: column;
        row-gap: var(--portblue-mosaic-row-gap, 20px);
    }

    .portblue-mosaic__card {
        height: 320px;
    }
}

/*
 * Animación de entrada (opcional, campo "Animación de entrada (fade in)").
 * Cada tarjeta arranca invisible y desplazada, y assets/js/portblue-mosaic.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-mosaic-fade-in-delay" (ver templates/elements/portblue_mosaic.php).
 */
.portblue-mosaic--fade-in .portblue-mosaic__card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--portblue-mosaic-fade-in-delay, 0ms);
}

.portblue-mosaic--fade-in .portblue-mosaic__card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

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

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