/*
 * blog.css — SÓ o que é específico do blog.
 *
 * Tokens (--ink, --brand, --line...), reset, header (.hd), footer (.ft) e botões (.btn)
 * vêm de /assets/css/laudario.css, o MESMO arquivo que a landing usa. Não redeclare
 * nada daquilo aqui: se a landing mudar de identidade, o blog tem que mudar junto.
 */

/* ---------- listagem ---------- */
.bl-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.bl-hero { padding: 72px 0 40px; border-bottom: 1px solid var(--line); }
.bl-hero h1 { font-size: 42px; letter-spacing: -.03em; margin: 0 0 12px; color: var(--ink); }
.bl-hero p { font-size: 18px; color: var(--gray); margin: 0; max-width: 620px; }

.bl-cats { display: flex; gap: 8px; flex-wrap: wrap; padding: 28px 0 0; }
.bl-cat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--ink-2);
    text-decoration: none; background: var(--paper); transition: .15s;
}
.bl-cat:hover { border-color: var(--brand); color: var(--brand); }
.bl-cat.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.bl-cat .n { opacity: .6; font-weight: 500; }

.bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; padding: 36px 0 80px; }

.bl-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 24px; border: 1px solid var(--line); border-radius: 14px;
    background: var(--paper); text-decoration: none; transition: .18s;
}
.bl-card:hover { border-color: var(--brand-line); box-shadow: 0 6px 24px rgba(16,24,40,.06); transform: translateY(-2px); }
.bl-card .meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-2); }
.bl-card .tag { color: var(--brand); font-weight: 700; }
.bl-card h2 { font-size: 18px; line-height: 1.35; letter-spacing: -.015em; color: var(--ink); margin: 0; }
.bl-card p { font-size: 14px; line-height: 1.6; color: var(--gray); margin: 0; }

/* ---------- artigo ---------- */
.bp-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }

.bp-head { padding: 56px 0 28px; }
.bp-crumb { font-size: 13px; color: var(--gray-2); margin-bottom: 18px; }
.bp-crumb a { color: var(--gray); text-decoration: none; }
.bp-crumb a:hover { color: var(--brand); }
.bp-head h1 { font-size: 38px; line-height: 1.2; letter-spacing: -.03em; color: var(--ink); margin: 0 0 16px; }
.bp-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gray); flex-wrap: wrap; }
.bp-meta .tag {
    background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line);
    padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 12px;
}

/* Corpo do post: o HTML vem do banco, então estilizamos por TAG e não por classe. */
.bp-body { padding: 8px 0 56px; font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.bp-body > *:first-child { margin-top: 0; }
.bp-body h2 { font-size: 26px; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); margin: 44px 0 14px; }
.bp-body h3 { font-size: 20px; line-height: 1.4; color: var(--ink); margin: 32px 0 10px; }
.bp-body p { margin: 0 0 18px; }
.bp-body ul, .bp-body ol { margin: 0 0 20px; padding-left: 22px; }
.bp-body li { margin: 0 0 8px; }
.bp-body a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.bp-body strong { color: var(--ink); font-weight: 700; }
.bp-body blockquote {
    margin: 24px 0; padding: 4px 0 4px 20px;
    border-left: 3px solid var(--brand-line); color: var(--gray); font-style: italic;
}

/* Tabelas do post rolam DENTRO do próprio wrapper: sem isto uma tabela larga
   empurra a página inteira e cria scroll horizontal no mobile. */
.bp-body .bp-tabela { overflow-x: auto; margin: 0 0 24px; }
.bp-body table { border-collapse: collapse; width: 100%; font-size: 15px; }
.bp-body th, .bp-body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.bp-body th { background: var(--paper-2); color: var(--ink); font-weight: 700; }

/* ---------- CTA e relacionados ---------- */
.bp-cta {
    margin: 8px 0 56px; padding: 28px; border-radius: 14px;
    background: var(--brand-soft); border: 1px solid var(--brand-line);
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.bp-cta b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.bp-cta span { color: var(--ink-2); font-size: 14px; }

.bp-rel { border-top: 1px solid var(--line); padding: 40px 0 80px; }
.bp-rel h2 { font-size: 20px; color: var(--ink); margin: 0 0 20px; }
.bp-rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

@media (max-width: 640px) {
    .bl-hero { padding: 48px 0 28px; }
    .bl-hero h1 { font-size: 32px; }
    .bp-head { padding: 36px 0 20px; }
    .bp-head h1 { font-size: 28px; }
    .bp-body { font-size: 16px; }
    .bp-body h2 { font-size: 22px; }
}