/* Elemento US Builder: Masonry Grid */

/*
 * Masonry real con CSS Grid: "grid-auto-flow: row dense" hace que el
 * navegador coloque cada tarjeta en la columna más corta disponible,
 * respetando el orden en que aparecen en el listado (a diferencia de
 * "column-count", que reparte el contenido intentando igualar la altura
 * total de cada columna y puede agrupar varias tarjetas seguidas en la
 * misma columna). Cada tarjeta declara su propio "grid-row: span N" (en
 * unidades de 1px) — como el alto de cada tarjeta depende del texto, que
 * es de longitud variable, ese span se mide de verdad en el navegador con
 * JS (ver assets/js/portblue-masonry.js) en vez de calcularse en PHP.
 */
.portblue-masonry {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(var(--portblue-masonry-columns, 2), 1fr);
    grid-auto-flow: row dense;
    grid-auto-rows: 1px;
    column-gap: var(--portblue-masonry-column-gap, 24px);
    row-gap: 0;
}

/*
 * Margen superior por tarjeta (campo "Margen superior" de cada tarjeta):
 * el valor lo pone el propio PHP en "--portblue-masonry-item-margin-top"
 * (inline en Escritorio, con overrides "!important" por dispositivo — ver
 * templates/elements/portblue_masonry.php). assets/js/portblue-masonry.js
 * lo suma al alto medido de la tarjeta para reservarle el hueco correcto
 * en el grid.
 */
.portblue-masonry__item {
    break-inside: avoid;
    margin-top: var(--portblue-masonry-item-margin-top, 0);
}

.portblue-masonry__media {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/*
 * "!important" porque el tema trae una regla base "img { height: auto;
 * max-width: 100%; }" (Impreza/common/css/base/_general.css) y, además,
 * WordPress/algunos plugins de carga añaden width/height como atributo o
 * estilo inline en el propio <img> — un estilo inline gana siempre a
 * cualquier regla de una hoja de estilos por normal que sea, así que sin
 * "!important" la imagen se queda con su alto natural en vez de cubrir el
 * hueco. La posición absoluta (en vez de width/height:100% "a secas")
 * evita además que el <img> dependa de que el navegador ya conozca su
 * proporción natural para resolver el 100% de alto.
 */
.portblue-masonry__media img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
}

.portblue-masonry__media--large {
    height: 480px;
}

.portblue-masonry__media--small {
    height: 280px;
}

.portblue-masonry__body {
    padding: 18px 0 0;
}

.portblue-masonry__title {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.3;
}

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

/*
 * El aspecto visual del botón (colores, padding, border-radius, hover...)
 * lo aporta la clase "w-btn" del tema padre Impreza.
 */
.portblue-masonry__button-wrap {
    margin-top: 14px;
}

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

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

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

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