/*
 * Novedades destacadas: la pieza visual de cada tarjeta se presenta en 4:5.
 * Esta geometría pertenece al componente del plugin, no al normalizador global
 * de imágenes destacadas del tema.
 *
 * novedades-section.php contiene estilos históricos dentro del propio markup.
 * Por eso estas reglas usan una especificidad mayor: deben prevalecer también
 * cuando ese bloque inline intente volver la imagen horizontal.
 */
.flacso-main-page .flacso-novedades-section .flacso-novedades-3d__image-link {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden;
    background: #eef2f7;
}

.flacso-main-page .flacso-novedades-section .flacso-novedades-3d__image-link > .flacso-novedades-3d__image,
.flacso-main-page .flacso-novedades-section .flacso-novedades-3d__image-link > picture > .flacso-novedades-3d__image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover !important;
    object-position: center !important;
}

/*
 * En escritorio el carrusel puede seguir siendo horizontal, pero su columna
 * visual conserva 4:5: 22.4rem x 28rem.
 */
@media (min-width: 992px) {
    .flacso-main-page .flacso-novedades-section .flacso-novedades-3d__card {
        grid-template-columns: 22.4rem minmax(0, 1fr) !important;
    }

    .flacso-main-page .flacso-novedades-section .flacso-novedades-3d__image-link {
        height: 28rem !important;
    }
}

/* 19.2rem x 24rem mantiene exactamente 4:5 en tablet. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .flacso-main-page .flacso-novedades-section .flacso-novedades-3d__card {
        grid-template-columns: 19.2rem minmax(0, 1fr) !important;
    }

    .flacso-main-page .flacso-novedades-section .flacso-novedades-3d__image-link {
        height: 24rem !important;
    }
}

/*
 * En móvil la imagen ocupa todo el ancho de la tarjeta y crece en vertical.
 * La tarjeta gana altura para que el 4:5 no sea recortado por la fila de 44%
 * que definía el estilo editorial anterior.
 */
@media (max-width: 767.98px) {
    .flacso-main-page .flacso-novedades-section .flacso-novedades-3d {
        --card-height-mobile: 45rem !important;
    }

    .flacso-main-page .flacso-novedades-section .flacso-novedades-3d__viewport {
        min-height: 45.75rem !important;
    }

    .flacso-main-page .flacso-novedades-section .flacso-novedades-3d__card {
        height: 45rem !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
    }

    .flacso-main-page .flacso-novedades-section .flacso-novedades-3d__image-link {
        height: auto !important;
        aspect-ratio: 4 / 5 !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(22, 57, 112, 0.08);
    }
}

/*
 * Compatibilidad durante despliegues escalonados: versiones anteriores del
 * tema podían envolver esta imagen con .flacso-featured-image-45. El wrapper
 * no debe crear una segunda relación de aspecto dentro de la tarjeta.
 */
.flacso-main-page .flacso-novedades-section .flacso-novedades-3d__image-link > .flacso-featured-image-45 {
    width: 100%;
    height: 100% !important;
    aspect-ratio: auto !important;
    background: #eef2f7;
}

.flacso-main-page .flacso-novedades-section .flacso-novedades-3d__image-link > .flacso-featured-image-45::before,
.flacso-main-page .flacso-novedades-section .flacso-novedades-3d__image-link > .flacso-featured-image-45::after {
    content: none;
}

.flacso-main-page .flacso-novedades-section .flacso-novedades-3d__image-link > .flacso-featured-image-45 > .flacso-novedades-3d__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}