/* Blog (/blog e /blog/{slug}): reaproveita servico.css (container, breadcrumb, FAQ, chamada final) e acrescenta o corpo do artigo. */

.blog-page .svc-detail { max-width: 860px; }
.blog-page .svc-breadcrumb { max-width: none; margin: 1rem 0 1.6rem; padding: 0; }
.blog-page .svc-detail-h1 { max-width: none; font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.18; }

/* Linha de autor, data e tempo de leitura */
.blog-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: 1.2rem; font-size: .9rem; color: var(--sage); }
.blog-meta span:not(:last-child)::after { content: "·"; margin-left: .9rem; color: var(--muted); }
.blog-meta strong { color: var(--forest); font-weight: 600; }

/* Corpo */
.blog-body { margin-top: 2.2rem; font-size: 1.0625rem; line-height: 1.8; color: #2F4A3B; }
.blog-body p { margin-top: 1.1rem; }
.blog-body h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.45rem, 2.6vw, 1.85rem); line-height: 1.25; color: var(--forest); margin-top: 3rem; scroll-margin-top: 150px; }
.blog-body ul, .blog-body ol { margin: 1rem 0 0 1.3rem; display: grid; gap: .55rem; }
.blog-body li { padding-left: .2rem; }
.blog-body li::marker { color: var(--accent); }
.blog-body strong { color: var(--forest); font-weight: 600; }
.blog-body a:not(.btn-whatsapp) { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.blog-body a:not(.btn-whatsapp):hover { color: var(--forest); }
.blog-abertura p:first-child { margin-top: 0; font-size: 1.15rem; color: var(--forest); }

/* Sumário */
.blog-sumario { margin-top: 2.2rem; background: var(--bg-alt); border-radius: var(--r-card); padding: 1.4rem 1.6rem; }
.blog-sumario-titulo { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--forest); }
.blog-sumario ol { margin: .8rem 0 0 1.2rem; display: grid; gap: .4rem; font-size: .95rem; }
.blog-sumario a { color: var(--sage); text-decoration: none; }
.blog-sumario a:hover { color: var(--forest); text-decoration: underline; }

/* Fotos (Artigo 2) */
.blog-fotos { margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.blog-fotos img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; border-radius: var(--r-card); }

/* Caixa "Fale com um engenheiro" */
.blog-cta-meio { margin-top: 3rem; background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-card); border-left: 4px solid var(--accent); padding: 1.6rem 1.8rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; }
.blog-cta-meio-titulo { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--forest); }
.blog-cta-meio-texto { margin-top: .3rem; font-size: .98rem; line-height: 1.6; color: var(--sage); }
.blog-cta-meio .svc-cta-btn { flex-shrink: 0; }

/* FAQ dentro do artigo */
.blog-page .svc-faq-list { margin-top: 1.2rem; }

/* Autor */
.blog-autor { margin-top: 3.5rem; display: flex; gap: 1rem; align-items: flex-start; padding: 1.4rem 1.6rem; border-radius: var(--r-card); background: var(--bg-alt); }
.blog-autor img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.blog-autor p { font-size: .95rem; line-height: 1.65; color: var(--sage); }
.blog-autor strong { color: var(--forest); }

/* Cartões de artigo (lista /blog, relacionados e "Artigos sobre este tema") */
.blog-cards { list-style: none; display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.blog-card { position: relative; display: flex; flex-direction: column; gap: .6rem; height: 100%; background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 1.6rem; transition: transform .22s var(--ease-out), box-shadow .22s; }
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
.blog-card-tema { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.blog-card-titulo { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; color: var(--forest); }
.blog-card-titulo a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.blog-card-titulo a:focus-visible { outline: none; }
.blog-card:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.blog-card-resumo { font-size: .95rem; line-height: 1.6; color: var(--sage); }
.blog-card-meta { margin-top: auto; padding-top: .4rem; font-size: .82rem; color: var(--muted); }
@media (min-width: 768px) { .blog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.blog-lista .blog-cards { margin-top: 2.5rem; }
@media (min-width: 1025px) { .blog-lista .blog-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.blog-page.blog-lista-page .svc-detail { max-width: 1200px; }
.blog-intro { margin-top: 1rem; max-width: 62ch; font-size: 1.05rem; line-height: 1.7; color: var(--sage); }
.blog-relacionados { margin-top: 4rem; }
.blog-relacionados .blog-cards { margin-top: 1rem; }

@media (max-width: 767px) {
  .blog-body { font-size: 1rem; }
  .blog-cta-meio { padding: 1.4rem 1.2rem; }
  .blog-cta-meio .btn-par, .blog-cta-meio .svc-cta-btn { width: 100%; justify-content: center; }
  .blog-autor { padding: 1.2rem; }
}

/* "Artigos sobre este tema" nas páginas de serviço */
.blog-temas { margin-top: 4rem; }
.blog-temas-titulo { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--forest); margin-bottom: 1rem; }
.blog-temas-hub { max-width: 1180px; margin: 0 auto; padding: 4rem 3rem; }
@media (max-width: 1024px) { .blog-temas-hub { padding: 3rem 1.5rem; } }