/* Blog Ei, Doc! — complementa eidoc.css (mesmo sistema visual do hub) */
.blog-head{padding:var(--s5) 0 var(--s4);border-bottom:1px solid var(--linha);background:var(--papel)}
.blog-head h1{max-width:22ch;margin-bottom:var(--s2)}
.blog-head .lede{margin-bottom:var(--s3)}
.cat-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.cat-chips a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--linha-forte);border-radius:999px;background:var(--superficie);color:var(--tinta);font-size:var(--t-sm);text-decoration:none}
.cat-chips a:hover{border-color:var(--tinta)}
.cat-chips span{font-family:var(--f-mono);font-size:12px;color:var(--suave)}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--s3);padding:var(--s4) 0}
.pcard a{display:flex;flex-direction:column;height:100%;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.pcard a:hover{border-color:var(--linha-forte);transform:translateY(-2px)}
.pcard img,.card-ph{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--papel-2)}
.pcard-body{display:flex;flex-direction:column;gap:6px;padding:var(--s2) var(--s2) var(--s3)}
.pcard-body .mono{margin:0;color:var(--verde-texto)}
.pcard-body strong{font-family:var(--f-titulo);font-size:19px;line-height:1.25;letter-spacing:-.01em}
.pcard-desc{font-size:var(--t-sm);color:var(--suave);line-height:1.5}

.post{padding:var(--s4) 0 var(--s5)}
.post h1{margin:var(--s2) 0 var(--s2)}
.byline{font-size:var(--t-sm);color:var(--suave);margin-bottom:var(--s3)}
.byline a{color:var(--tinta);font-weight:600}
.byline .mono{margin:4px 0 0;display:inline-block;text-transform:none;letter-spacing:.02em}
.hero-img{display:block;width:100%;height:auto;border-radius:var(--raio);margin:0 0 var(--s3);background:var(--papel-2)}
.post-toc{background:var(--superficie);border:1px solid var(--linha);border-left:3px solid var(--verde);border-radius:var(--raio);padding:var(--s2) var(--s3);margin:0 0 var(--s4)}
.post-toc .mono{margin:0 0 6px}
.post-toc ol{margin:0;padding-left:20px;font-size:var(--t-sm);line-height:1.7}
.post-body{max-width:none}
.post-body h2{margin:var(--s4) 0 var(--s2)}
.post-body h3{margin:var(--s3) 0 var(--s1)}
.post-body ul,.post-body ol{padding-left:24px;margin:0 0 var(--s2)}
.post-body li{margin:4px 0}
.post-body li p{margin:0}
.post-body img{display:block;border-radius:var(--raio);margin:var(--s3) auto}
.post-body blockquote{margin:var(--s3) 0;padding:var(--s2) var(--s3);background:var(--verde-tinta);border-left:3px solid var(--verde);border-radius:0 var(--raio) var(--raio) 0}
.post-body table{width:100%;border-collapse:collapse;margin:var(--s3) 0;font-size:var(--t-sm);display:block;overflow-x:auto}
.post-body th,.post-body td{border:1px solid var(--linha);padding:8px 10px;text-align:left;vertical-align:top}
.post-body th,.post-body tr:first-child td{background:var(--papel-2);font-weight:600;color:var(--tinta)}
.post-body td p,.post-body th p{margin:0}
/* "Resposta rápida": primeiro H2 + parágrafo ganham destaque de resposta */
.post-body h2:first-child{font-size:var(--t-lg);font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--verde-texto);margin-top:0}
.tools-note{font-size:var(--t-sm);color:var(--suave)}
.post-cats{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s3) 0}
.post-cats a{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border:1px solid var(--linha-forte);border-radius:999px;text-decoration:none;color:var(--suave)}
.disclaimer{font-size:var(--t-sm);color:var(--suave);border-top:1px solid var(--linha);padding-top:var(--s2)}
.nl{display:grid;gap:var(--s2);background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--raio);padding:var(--s3);margin:var(--s4) 0}
.nl h2{font-size:var(--t-h3)}
.nl p{margin:0;color:var(--suave)}
.related h2{font-size:var(--t-h3);margin-top:var(--s4)}
.related .pgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));padding-top:var(--s2)}
@media(max-width:620px){.post-body h2{margin-top:var(--s3)}.pgrid{gap:var(--s2)}}