/* 1. ESTILOS GERAIS DO CONTÊINER FLEX */
.nav-artigos-m {
    /* Ativa o Flexbox no contêiner pai */
    display: flex; 

    /* Envolve os itens para a próxima linha em telas pequenas */
    flex-wrap: wrap; 

    /* Centraliza os artigos no contêiner */
    justify-content: center; 

    /* Adiciona um espaço entre os artigos e as bordas do contêiner */
    gap: 22px; 

    /* Define a largura máxima para o layout (opcional) */
    max-width: 1500px;
    margin: 10px 0 0 0;/*30px auto*/
    padding: 0; /*0 20px*/       
}

/* 2. ESTILOS DOS ITENS (ARTIGOS) */
.artigo-m {
    /* Define que cada artigo deve ocupar, no máximo, 
       cerca de 1/3 do contêiner. 
       
       flex-basis: 300px garante uma largura mínima inicial.
       flex-grow: 1 permite que o artigo cresça e ocupe o espaço
                  disponível de forma igual entre os 3.
    */
    flex: 1 1 300px; 

    background-color: #ffffff;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    text-align: left;
    transition: transform 0.3s ease;
    font-family: 'Montserrat', sans-serif; font-weight: 400; font-style: normal;
}

/* Efeito ao passar o mouse (opcional) */
.artigo-m:hover {
    /*transform: translateY(-5px);*/
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    /*box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);*/

}

/* 3. RESPONSIVIDADE (PARA TELAS PEQUENAS) */
@media (max-width: 960px) {
    /* Em telas menores que 960px, o 'gap' e 'flex: 1 1 300px'
       farão com que os artigos naturalmente quebrem para a linha de baixo
       quando não houver mais espaço suficiente para os três lado a lado.
       
       Se você quiser forçar 2 colunas e depois 1, pode ajustar o flex-basis:
    */
    .artigo-m {
        /* Garante que, se couberem 2, eles fiquem bem distribuídos */
        flex: 1 1 45%; 
    }
}

@media (max-width: 600px) {        
    .artigo-m {
        /* Em telas muito pequenas (celular), cada artigo ocupa sua própria linha (100%) */
        flex: 1 1 100%;
    }
}

/* Área da Imagem */
.artigo-m .post-imagem {
    float:left;
    width: 100px;
    height: auto; /* Altura fixa para a imagem 250px*/
    overflow: hidden;
    margin-right: 15px;
}

.artigo-m .post-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cobre a área sem distorcer, cortando se necessário */
    display: block; /* Remove espaço extra abaixo da imagem */
    transition: transform 0.3s ease-in-out;
    border-radius:7px;
}

.artigo-m .post-imagem img:hover {
    transform: scale(1.05); /* Efeito de zoom suave ao passar o mouse */
}

/* Conteúdo do Post 
.artigo-m .post-conteudo {

    float:right;
    width:74%;
    padding: 0 0 0 0;

}*/

.artigo-m .p-title {
    color: #069; /* Azul vibrante para o título #007bff*/
    font-size: 1.2em;
    margin-bottom: 1px;
    line-height: 1.2;
    font-weight:600;
}

.artigo-m .p-content {
    color: #444;
    font-size: 1em;
    margin-bottom: 5px;
    font-weight:400;
    line-height: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.artigo-m .p-sobre {
    color: #444;
    font-size: 0.9em;
    margin-bottom: 5px;
    font-weight:400;
    line-height: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}