/*
 * Proporção fixa das imagens do blog.
 *
 * O tema define só width:100% nos cards, então a altura seguia a proporção de
 * cada arquivo e o grid ficava desalinhado quando as imagens tinham formatos
 * diferentes. Aqui a proporção passa a ser do layout, não do arquivo: o que
 * sobra é recortado pelo object-fit, centralizado.
 *
 * 671:740 é a proporção das miniaturas originais do tema, e é a mesma que o
 * admin usa ao gerar a miniatura (UPLOAD_THUMB_W/H em admin/uploads.php).
 * Mudar uma sem mudar a outra faz o recorte do arquivo discordar do recorte
 * da tela.
 */

/* Cards da listagem /blog e do bloco de notícias da home */
.single-grid-overlay-blog-post__image a img,
.blog-post-slider__image a img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 671 / 740;
    object-fit: cover;
    object-position: center;
}

/* Imagem de topo da página do post. As capas do tema são 1770x740; capas
   enviadas pelo admin vêm em qualquer tamanho e são encaixadas nessa mesma
   proporção. */
.single-list-blog-post__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1770 / 740;
    object-fit: cover;
    object-position: center;
}

/* Navegadores antigos ignoram aspect-ratio e voltariam ao comportamento
   anterior. O padding-bottom reproduz a mesma proporção via wrapper. */
@supports not (aspect-ratio: 1 / 1) {
    .single-grid-overlay-blog-post__image a,
    .blog-post-slider__image a {
        position: relative;
        padding-bottom: 110.28%; /* 740 / 671 */
        height: 0;
        overflow: hidden;
    }

    .single-grid-overlay-blog-post__image a img,
    .blog-post-slider__image a img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .single-list-blog-post__media {
        position: relative;
        padding-bottom: 41.81%; /* 740 / 1770 */
        height: 0;
        overflow: hidden;
    }

    .single-list-blog-post__media img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}