/*
Talanoa API Posts DEV
Version: 3.0-dev
*/


/* ===========================
   Estrutura principal
=========================== */


.ppi-container {
    width: 100%;
}


.ppi-container .ppi-post {

    display: flex !important;

    flex-direction: row !important;

    gap: 24px;

    margin-bottom: 32px;

    align-items: flex-start;

}


/* ===========================
   Imagem
=========================== */


.ppi-container .ppi-imagem {

    width: 36%;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 16px;

}


.ppi-container .ppi-imagem-link {

    display: block;

    overflow: hidden;

    border-radius: 16px;

}


.ppi-container .ppi-imagem img {

    width: 100%;

    height: auto;

    display: block;

    border-radius: 16px;

}



/* ===========================
   Conteúdo
=========================== */


.ppi-container .ppi-conteudo {

    width: 64%;

}



/* Chapéu */

.ppi-container .ppi-chapeu {

    margin: 0 0 10px;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    color: #666;

}



/* Título */


.ppi-container .ppi-titulo {

    margin: 0 0 14px;

    line-height: 1.15;

}


.ppi-container .ppi-titulo a {

    font-family: "Roobert", Arial, sans-serif;

    font-size: 24px;

    line-height: 1.25;

    font-weight: 700;

    color: #222;

    text-decoration: none;

}


.ppi-container .ppi-titulo a:hover {

    color: #222;

}



/* Resumo */


.ppi-container .ppi-resumo {

    font-family: "Roobert", Arial, sans-serif;

    font-size: 16px;

    line-height: 1.55;

    color: #333;

    margin-bottom: 22px;

}



/* Data */


.ppi-container .ppi-meta {

    margin: 0 0 18px;

    font-size: 14px;

    color: #777;

}



/* Link Saiba mais (futuro botão) */


.ppi-container .ppi-link {

    font-family: "Roobert", Arial, sans-serif;

    font-size: 15px;

    font-weight: 600;

    color: #333;

    text-decoration: none;

}


.ppi-container .ppi-link:hover {

    text-decoration: underline;

}



/* ===========================
   Responsivo
=========================== */


@media (max-width: 768px) {


    .ppi-container .ppi-post {

        flex-direction: column !important;

        gap: 22px;

    }


    .ppi-container .ppi-imagem,
    .ppi-container .ppi-conteudo {

        width: 100%;

    }


    .ppi-container .ppi-titulo a {

        font-size: 26px;

    }


}