/* ==========================================================
   Padrão visual dos artigos do blog code.py
   Incluir via <link> no blog_detalhe.html (ou colar dentro
   de um <style> no próprio template) — NUNCA dentro do
   campo "Conteúdo" do CKEditor.
   ========================================================== */
:root{
  --brand:#0d6efd;
  --brand-dark:#0a58ca;
  --brand-tint:#e7f1ff;
  --ink:#212529;
  --muted:#6c757d;
  --line:#dee2e6;
  --bg:#ffffff;
  --soft:#f8f9fa;
  --code-bg:#0d1117;
  --code-ink:#e6edf3;
  --maxw:900px;
}

.blog-body{
  max-width:var(--maxw);
  margin:0 auto;
  font-size:18px;
  line-height:1.72;
}
.blog-body h2{
  font-size:1.5rem;
  font-weight:750;
  letter-spacing:-.01em;
  margin:2.1em 0 .55em;
  padding-left:14px;
  border-left:4px solid var(--brand);
}
.blog-body h3{
  font-size:1.16rem;
  font-weight:700;
  margin:1.6em 0 .4em;
  color:#0b3d91;
}
.blog-body p{
  margin:0 0 1.15em;
  text-align:justify;
  text-justify:inter-word;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
  hyphens:auto;
}
.blog-body strong{font-weight:700;}
.blog-body a{color:var(--brand);text-decoration:none;border-bottom:1px solid rgba(13,110,253,.35);}
.blog-body a:hover{color:var(--brand-dark);border-bottom-color:var(--brand-dark);}
.blog-body ul{margin:0 0 1.2em;padding-left:0;list-style:none;}
.blog-body ul li{
  position:relative;padding-left:26px;margin-bottom:.6em;
  text-align:justify;
  text-justify:inter-word;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
  hyphens:auto;
}
.blog-body ul li::before{
  content:"";position:absolute;left:6px;top:.62em;
  width:7px;height:7px;border-radius:2px;background:var(--brand);
}
.blog-body hr.rule{border:none;border-top:1px solid var(--line);margin:2.4em 0;}

.blog-body .stat{
  display:flex;align-items:baseline;gap:16px;
  background:var(--soft);
  border:1px solid var(--line);
  border-left:4px solid var(--brand);
  border-radius:10px;
  padding:18px 22px;margin:1.6em 0;
}
.blog-body .stat .num{font-size:2.1rem;font-weight:800;color:var(--brand-dark);line-height:1;white-space:nowrap;}
.blog-body .stat .lbl{font-size:.98rem;color:var(--muted);}
.blog-body .takeaway{
  background:var(--brand);
  color:#fff;
  border-radius:12px;
  padding:20px 24px;margin:1.8em 0;
  font-size:1.08rem;
}
.blog-body .takeaway strong{color:#fff;}
.blog-body .note{
  background:#fff8e6;
  border:1px solid #ffe08a;
  border-left:4px solid #f0ad4e;
  border-radius:10px;
  padding:14px 18px;margin:1.6em 0;
  font-size:.96rem;color:#6b5411;
}

.blog-body .table-scroll{overflow-x:auto;margin:1.4em 0;-webkit-overflow-scrolling:touch;}
.blog-body table{
  border-collapse:collapse;width:100%;min-width:640px;
  font-size:.93rem;border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.blog-body thead th{
  background:var(--brand);color:#fff;font-weight:700;text-align:left;
  padding:12px 14px;font-size:.9rem;
}
.blog-body thead th:first-child{background:var(--brand-dark);}
.blog-body tbody th{
  text-align:left;font-weight:700;color:var(--ink);
  background:var(--soft);padding:11px 14px;white-space:nowrap;
  border-top:1px solid var(--line);
}
.blog-body tbody td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top;color:#343a40;}
.blog-body tbody tr:nth-child(even) td{background:#fcfcfd;}

.blog-body .code-label{
  display:inline-block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--soft);border:1px solid var(--line);border-bottom:none;
  border-radius:8px 8px 0 0;padding:5px 12px;font-weight:700;margin-bottom:-1px;
}
.blog-body pre{
  background:var(--code-bg);color:var(--code-ink);
  border-radius:0 10px 10px 10px;
  padding:18px 20px;overflow-x:auto;margin:0 0 1.4em;
  font-size:.86rem;line-height:1.6;
}
.blog-body pre code{font-family:"SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;}
.blog-body code.inline{
  background:var(--soft);border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;font-size:.86em;
  font-family:"SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;
  color:#0b3d91;
}
.blog-body .flag{color:#7ee787;}

.blog-body .cta{
  border-top:1px solid var(--line);
  margin-top:2.6em;padding-top:1.6em;
  font-style:italic;color:var(--muted);font-size:1.05rem;
}

@media (max-width:560px){
  .blog-body{font-size:17px;}
  .blog-body h2{font-size:1.3rem;}
  .blog-body .stat{flex-direction:column;gap:6px;}
  .blog-body .stat .num{font-size:1.8rem;}
}