/*
 * Ajustes temporários para padronizar e centralizar os blocos de notícias.
 * Idealmente estes estilos devem ser migrados para o SCSS do bloco e recompilados,
 * mas são carregados aqui enquanto o build do webpack não pode ser executado.
 */

/* ==== Padronização e centralização dos cards de notícias (modo blocos) ==== */
.lista-noticias--wrapper.modo-blocos .noticia-item-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
}

.lista-noticias--wrapper.modo-blocos .noticia-item-wrapper > a {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.lista-noticias--wrapper.modo-blocos .noticia-item-content--wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 100% !important;
  max-height: none;
}

.lista-noticias--wrapper.modo-blocos .noticia-item-content--wrapper.destaque-grande {
  justify-content: flex-start;
}

.lista-noticias--wrapper.modo-blocos .noticia-item-conteudo-layout {
  flex: 1 1 auto;
  min-height: 0;
}

/* Células de imagem e texto preenchem a linha e centralizam o conteúdo */
.lista-noticias--wrapper.modo-blocos .noticia-item-conteudo-layout > div:not(.noticia-item-conteudo-heading-mobile) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: 100%;
}

/* Destaque: mantém imagem e texto centralizados horizontalmente */
.lista-noticias--wrapper.modo-blocos .noticia-item-conteudo-layout.destaque-grande > div:not(.noticia-item-conteudo-heading-mobile) {
  align-items: center;
}

/* Padroniza tamanho da imagem/placeholder nos cards menores */
.lista-noticias--wrapper.modo-blocos .noticia-item-conteudo-layout:not(.destaque-grande) .noticias-item-conteudo--imagem,
.lista-noticias--wrapper.modo-blocos .noticia-item-conteudo-layout:not(.destaque-grande) .noticias-item-conteudo--imagem.semImagem {
  height: 150px;
  width: 200px;
}

@media (max-width: 576px) {
  .lista-noticias--wrapper.modo-blocos .noticia-item-conteudo-layout:not(.destaque-grande) .noticias-item-conteudo--imagem,
  .lista-noticias--wrapper.modo-blocos .noticia-item-conteudo-layout:not(.destaque-grande) .noticias-item-conteudo--imagem.semImagem {
    width: 100%;
    height: 200px;
  }
}