/* Blog — usa os tokens de styles.css e a estrutura de catalogo.css (.cat-hero, .cat-toolbar etc.) */

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.blog-card { background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio); transition: transform .2s, box-shadow .2s, border-color .2s; }
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); border-color: #c3c9cf; }
.blog-card__body { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.blog-card__categoria { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--acento-texto); }
.blog-card__body h3 { font-size: 19px; line-height: 1.35; margin: 2px 0 4px; }
.blog-card__body h3 a { color: var(--primaria); }
.blog-card__body h3 a:hover { color: var(--acento-texto); }
.blog-card__body p { color: var(--texto-2); font-size: 15px; margin-bottom: 4px; }
.blog-card__meta { display: flex; gap: 8px; font-size: 13px; color: var(--texto-2); margin-bottom: 10px; }
.blog-card__body .card__link { font-size: 14px; font-weight: 600; color: var(--acento-texto); }
.blog-card__body .card__link span { display: inline-block; transition: transform .2s; }
.blog-card:hover .card__link span { transform: translateX(4px); }

/* Página de post individual */
.post { padding-top: 56px; }
.post-trilha { font-size: 13px; color: var(--texto-2); margin-bottom: 24px; }
.post-trilha a { color: var(--texto-2); text-decoration: underline; text-underline-offset: 2px; }
.post-trilha a:hover { color: var(--acento-texto); }
.post-cabecalho { max-width: 760px; margin-bottom: 40px; }
.post-cabecalho .eyebrow { display: block; margin-bottom: 12px; }
.post-cabecalho h1 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 16px; }
.post-meta { display: flex; gap: 10px; color: var(--texto-2); font-size: 14px; }
.post-corpo { max-width: 720px; color: var(--texto); font-size: 17px; line-height: 1.75; }
.post-corpo h2 { font-size: 26px; margin: 40px 0 16px; color: var(--primaria); }
.post-corpo h3 { font-size: 20px; margin: 28px 0 12px; color: var(--primaria); }
.post-corpo p { margin-bottom: 18px; color: var(--texto-2); }
.post-corpo ul, .post-corpo ol { margin: 0 0 18px 22px; color: var(--texto-2); }
.post-corpo li { margin-bottom: 8px; }
.post-corpo strong { color: var(--primaria); }
.post-img { margin: 28px 0; }
.post-img a { display: block; background: var(--fundo-2); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.post-img img { display: block; width: 100%; max-height: 360px; height: auto; object-fit: contain; margin: 0 auto; }
.post-img figcaption { margin-top: 8px; font-size: 13px; color: var(--texto-2); }
.post-img figcaption a { color: var(--acento-texto); text-decoration: underline; text-underline-offset: 2px; }
.post-resumo { max-width: 720px; background: var(--fundo-2); border: 1px solid var(--borda); border-left: 4px solid var(--acento); border-radius: var(--raio); padding: 24px 28px; margin-bottom: 32px; }
.post-resumo h2 { margin: 0 0 12px; font-size: 18px; color: var(--primaria); }
.post-resumo ul { margin: 0 0 0 20px; color: var(--texto-2); }
.post-resumo li { margin-bottom: 8px; }
.post-resumo li:last-child { margin-bottom: 0; }
.tabela { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
.tabela th, .tabela td { text-align: left; padding: 10px 14px; border: 1px solid var(--borda); }
.tabela th { background: var(--fundo-2); color: var(--primaria); font-weight: 700; }
.tabela td { color: var(--texto-2); }
.post-corpo { overflow-x: auto; }
.post-cta { max-width: 720px; background: var(--primaria); color: #fff; border-radius: var(--raio); padding: 32px; margin: 40px 0; }
.post-cta h3 { color: #fff; font-size: 20px; margin-bottom: 8px; }
.post-cta p { color: #c3c9cf; margin-bottom: 18px; }

@media (max-width: 1080px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .blog-grid { grid-template-columns: 1fr; }
  .post-cta { padding: 24px 20px; }
}