/*
 * Blog publico (app/View/site/blog.php e blogPost.php). Base em site.css
 * (prefixo st-); aqui o prefixo blog-. Cores com !important pelo motivo de
 * sempre: o style.css global pinta p, span, a, li e label de #111 com !important.
 */

/* ------------------------------------------------------------------ lista */
.blog-topo { padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0 1.5rem; }
.st-root .blog-topo .st-h1 .st-gradiente {
    background: linear-gradient(90deg, var(--st-marca), var(--st-ceu));
    -webkit-background-clip: text; background-clip: text;
    color: transparent !important;
}
.blog-lista-secao { padding: 1rem 0 4rem; }
.blog-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.25rem; }
.blog-cartao {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.5rem;
    background: var(--st-sup);
    border: 1px solid var(--st-borda);
    border-radius: var(--st-raio);
    box-shadow: var(--st-sombra);
}
.st-root .blog-cartao time { font-size: .85rem; color: var(--st-apagado) !important; }
.blog-cartao h2 { margin: 0; font-size: 1.2rem; line-height: 1.35; font-weight: 800; }
.st-root .blog-cartao h2 a { color: var(--st-tinta) !important; text-decoration: none !important; }
.st-root .blog-cartao h2 a:hover { color: var(--st-marca) !important; }
.st-root .blog-cartao p { margin: 0 0 .5rem; color: var(--st-tinta-2) !important; line-height: 1.6; }
.blog-cartao .st-link { margin-top: auto; }
/* Capa no cartao: encosta nas bordas (anula o padding do cartao) */
.blog-cartao-capa { display: block; margin: -1.5rem -1.5rem .5rem; overflow: hidden; border-radius: var(--st-raio) var(--st-raio) 0 0; }
.blog-cartao-capa img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.st-root .blog-vazio { color: var(--st-tinta-2) !important; }

/* ------------------------------------------------------------------ post */
.blog-post { padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 4rem; }
.blog-estreito { max-width: 48rem; }
.st-root .blog-trilha { font-size: .88rem; color: var(--st-apagado) !important; margin-bottom: 1rem; }
.st-root .blog-trilha a { color: var(--st-marca) !important; }
.st-root .blog-trilha span, .st-root .blog-trilha i { color: var(--st-apagado) !important; }
.blog-titulo { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem); }
.st-root .blog-meta { margin: .75rem 0 0; font-size: .9rem; color: var(--st-apagado) !important; }
.st-root .blog-meta * { color: var(--st-apagado) !important; }
.blog-resumo { margin-top: 1rem; }
.blog-capa { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; margin-top: 1.5rem; object-fit: cover; border-radius: var(--st-raio); box-shadow: var(--st-sombra); }

.blog-conteudo { margin-top: 2rem; font-size: 1.07rem; line-height: 1.8; }
.st-root .blog-conteudo p, .st-root .blog-conteudo li { color: #334155 !important; }
.blog-conteudo h2 { margin: 2.5rem 0 .75rem; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); font-weight: 800; line-height: 1.3; }
.blog-conteudo h3 { margin: 2rem 0 .5rem; font-size: 1.25rem; font-weight: 700; }
.blog-conteudo h4 { margin: 1.5rem 0 .5rem; font-size: 1.08rem; font-weight: 700; }
.blog-conteudo h2, .blog-conteudo h3 { scroll-margin-top: 1rem; }
.blog-conteudo ul, .blog-conteudo ol { padding-left: 1.3rem; }
.blog-conteudo li { margin-bottom: .35rem; }
.st-root .blog-conteudo a { color: var(--st-marca) !important; text-decoration: underline !important; }
.blog-conteudo code { padding: .1rem .35rem; font-size: .92em; background: var(--st-marca-wash); border-radius: 6px; }
.blog-conteudo img { max-width: 100%; height: auto; border-radius: 12px; }
.blog-conteudo hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--st-borda); }

/* Modelo de mensagem (citacao) com o botao Copiar */
.blog-modelo {
    position: relative;
    margin: 1rem 0 1.5rem;
    padding: 1.1rem 1.25rem 3.25rem;
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
    border-left: 5px solid var(--st-verde);
    border-radius: 14px;
}
.st-root .blog-modelo p { margin: 0; color: #14532d !important; line-height: 1.7; }
.blog-copiar {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .85rem;
    font-size: .88rem;
    font-weight: 600;
    background: #fff;
    border: 1px solid #86efac;
    border-radius: 999px;
    cursor: pointer;
}
.st-root .blog-copiar, .st-root .blog-copiar * { color: #166534 !important; }
.blog-copiar.ok { background: var(--st-verde); border-color: var(--st-verde); }
.st-root .blog-copiar.ok, .st-root .blog-copiar.ok * { color: #fff !important; }

.blog-tabela { margin: 1.25rem 0; overflow-x: auto; }
.blog-tabela table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.blog-tabela th, .blog-tabela td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--st-borda); }
.blog-tabela th { background: var(--st-fundo); font-weight: 700; }

/* Chamada no fim do post */
.blog-cta {
    display: grid;
    gap: 1rem;
    margin-top: 3rem;
    padding: 1.75rem;
    background: var(--st-marca-wash);
    border: 1px solid #bfdbfe;
    border-radius: var(--st-raio);
}
.blog-cta h2 { margin: 0 0 .4rem; font-size: 1.35rem; font-weight: 800; }
.st-root .blog-cta p { margin: 0; color: var(--st-tinta-2) !important; line-height: 1.6; }
.blog-cta-botoes { display: flex; flex-wrap: wrap; gap: .75rem; }

.blog-outros { margin-top: 2.5rem; }
.blog-outros h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: .75rem; }
.blog-outros ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.blog-outros li { padding: 1rem 1.25rem; background: var(--st-sup); border: 1px solid var(--st-borda); border-radius: 14px; }
.st-root .blog-outros li a { display: block; font-weight: 700; color: var(--st-tinta) !important; text-decoration: none !important; }
.st-root .blog-outros li span { display: block; margin-top: .2rem; font-size: .92rem; color: var(--st-tinta-2) !important; }
.blog-voltar { margin-top: 2rem; }

@media (max-width: 575.98px) {
    .blog-cta { padding: 1.25rem; }
    .blog-cta-botoes .st-btn { width: 100%; }
}