/* ============================================================
   Blog Raeto Corretora de Seguros — estilos gerais
   Reaproveita a paleta e a fonte do site institucional:
   #263426 (verde escuro) / #3B543B (verde médio) / #C49109 (dourado)
   Fonte: Poppins
   ============================================================ */

/* ---- Faixa de topo (usada tanto no post quanto na listagem) ---- */
.blog-stripe{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 30.7vh;
    width: 100%;
    margin-bottom: 5vh;
    background-color: #263426;
}
.blog-stripe::before{
    content: '';
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    background-image: url('https://www.raeto.com.br/images/index/parallax.jpg');
    filter: brightness(0.35);
    top: 0; bottom: 0; right: 0; left: 0;
}
.blog-stripe-text{
    z-index: 1;
    color: #FFF;
    text-align: center;
    text-shadow: 0px 0px 7px rgb(0 0 0 / 60%);
    font-size: 4vh;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    width: 70%;
}

/* ---- Corpo do post ---- */
.blog-content{
    max-width: 760px;
    margin: 0 auto 6vh auto;
    padding: 0 5vw;
    font-family: 'Poppins', sans-serif;
    color: #343842;
    line-height: 1.7;
    font-size: 1.9vh;
}
.blog-content h2{
    color: #263426;
    font-size: 2.6vh;
    margin: 4vh 0 1.5vh 0;
}
.blog-content p{
    margin: 0 0 2vh 0;
}
.blog-content a{
    color: #3B543B;
    font-weight: 600;
    text-decoration: underline;
}
.blog-content a:hover{
    color: #C49109;
}
.blog-content ul, .blog-content ol{
    margin: 0 0 2vh 2vh;
}
.blog-meta{
    font-size: 1.5vh;
    color: #7a7a7a;
    margin-bottom: 3vh;
    text-align: center;
}
.blog-cover-image{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1.5vh;
    margin-bottom: 3vh;
}
.blog-author-box{
    margin-top: 5vh;
    padding: 2.5vh 3vw;
    background-color: #f5f6fa;
    border-left: 4px solid #C49109;
    font-size: 1.7vh;
    color: #263426;
    font-family: 'Poppins', sans-serif;
}
.blog-faq-item{
    margin-bottom: 2.5vh;
}
.blog-faq-question{
    font-weight: 600;
    color: #263426;
}

/* ---- Página de listagem (/blog/index.html) ---- */
.blog-list-title{
    text-align: center;
    font-size: 4vh;
    color: #263426;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    margin: 6vh 0 1vh 0;
}
.blog-list-subtitle{
    text-align: center;
    font-size: 2vh;
    color: #3B543B;
    font-family: 'Poppins', sans-serif;
    max-width: 700px;
    margin: 0 auto 5vh auto;
}
/* ---- Filtro de categorias (listagem) ----
   Barra de botões que filtra os cards por categoria via JS (blog/js/blog-list.js).
   Estilizada como uma faixa independente (fundo claro + linhas superior/inferior),
   separada da chamada acima e da grade de cards abaixo, para não parecer "grudada"
   nos cards. O botão "Todos" sempre existe; os demais só devem existir para
   categorias que já têm pelo menos 1 post publicado (ver taxonomia fixa em
   claude/plano-blog-seo-raeto.md no projeto claude.ai) — adicionar um novo botão
   quando uma categoria estrear. */
.blog-filters{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5vh 1.2vw;
    margin: 0 0 6vh 0;
    padding: 2.8vh 5vw;
    background-color: #f5f6fa;
    border-top: 1px solid #e3e5ea;
    border-bottom: 1px solid #e3e5ea;
}
.blog-filter-btn{
    font-family: 'Poppins', sans-serif;
    font-size: 1.5vh;
    font-weight: 600;
    padding: 1.2vh 2.4vw;
    border-radius: 3vh;
    border: 2px solid #3B543B;
    background-color: #FFF;
    color: #3B543B;
    cursor: pointer;
    transition: all .3s ease;
}
.blog-filter-btn:hover{
    background-color: #3B543B;
    color: #FFF;
}
.blog-filter-btn.active{
    background-color: #C49109;
    border-color: #C49109;
    color: #FFF;
}

.blog-grid{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 3vh 2vw;
    padding: 0 5vw 8vh 5vw;
}
.blog-card{
    display: flex;
    flex-flow: column;
    width: 26vw;
    min-width: 280px;
    border-radius: 2vh;
    box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.15);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: #FFF;
    transition: box-shadow .3s;
}
.blog-card:hover{
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.2);
}
.blog-card-body{
    padding: 2.5vh 1.5vw;
    font-family: 'Poppins', sans-serif;
}
.blog-card-category{
    font-size: 1.3vh;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #C49109;
    font-weight: 700;
}
.blog-card-date{
    font-size: 1.3vh;
    color: #999;
    margin: 0.3vh 0 0 0;
}
.blog-card-title{
    font-size: 2.1vh;
    color: #263426;
    margin: 1vh 0;
}
.blog-card-excerpt{
    font-size: 1.6vh;
    color: #555;
}

/* Corrige o widget de orçamento (#formEmpresa/#formVoce) nas páginas do blog:
   style.css define .apresentacao-form com fundo verde escuro (#263426) pensado
   para o hero escuro da Home, mas o texto do formulário (form.css) também é
   verde escuro (#263426) — texto invisível sobre fundo da mesma cor. Como o
   blog.css carrega depois de style.css e form.css, esta regra sobrescreve o
   fundo para transparente, igual ao visual já usado nas páginas de produto. */
.apresentacao-form{
    background-color: transparent;
}

@media (max-width: 768px){
    .blog-card{ width: 90%; }
    .blog-content{ font-size: 2.2vh; padding: 0 6vw; }
    .blog-stripe-text{ font-size: 3vh; width: 85%; }
    .blog-filters{ padding: 2.5vh 4vw; }
    .blog-filter-btn{ font-size: 1.6vh; padding: 1.2vh 4vw; }
}