/* Ajustes para padronizar cards de artigos */
#artigos .flex.flex-wrap {
    align-items: stretch; /* força alinhamento vertical dos filhos */
}

/* Cada article vira um cartão com altura/espacamento uniformes */
#artigos .flex.flex-wrap > article {
    flex: 0 0 320px; /* largura base */
    max-width: 320px;
    min-height: 220px; /* altura mínima para homogeneidade */
    box-sizing: border-box;
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    display: flex !important;
    flex-direction: column !important;
    margin: 0; /* evita espaçamentos inesperados */
}

/* Garante que o botão/texto 'Ler Artigo' fique sempre no rodapé do cartão */
#artigos .flex.flex-wrap > article > div[aria-hidden="true"] {
    margin-top: auto;
    color: #059669; /* mantém cor teal */
}

/* Pequenas melhorias de espaçamento do conteúdo */
#artigos .flex.flex-wrap > article h2 {
    margin-bottom: 6px;
}

#artigos .flex.flex-wrap > article time {
    margin-bottom: 8px;
}

#artigos .flex.flex-wrap > article p {
    margin-bottom: 12px;
    color: #4b5563;
}

/* Responsividade: duas colunas em telas médias, uma coluna em mobile */
@media (max-width: 1024px) {
    #artigos .flex.flex-wrap > article {
        flex: 0 1 45%;
        max-width: 48%;
    }
}

@media (max-width: 640px) {
    #artigos .flex.flex-wrap > article {
        flex: 0 1 100%;
        max-width: 100%;
    }

    #artigos .flex.flex-wrap {
        gap: 1rem;
    }
}