/* Blog (/blog e /blog/slug) e corpo do artigo no editor do /admin. Depende de base.css. */
/* ---------- Lista do blog ---------- */
.blog-titulo{font-size:clamp(38px,5vw,64px);letter-spacing:-.035em;max-width:15ch}
.blog-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:40px}
.busca{position:relative;flex:1 1 260px;max-width:440px}
.busca svg{position:absolute;left:18px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--muted);pointer-events:none}
.busca input{width:100%;font:16px var(--body);color:var(--ink);background:var(--walnut);border:1px solid var(--grain);border-radius:999px;padding:14px 18px 14px 46px;outline:none;transition:border-color .2s}
.busca input:focus{border-color:var(--orange)}
.busca input::placeholder{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{font:600 14px var(--body);color:var(--muted);background:none;border:1px solid var(--grain);border-radius:999px;padding:8px 16px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.chip:hover{color:var(--ink);border-color:#4A3C31}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ebony)}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px);margin-top:40px}
@media (max-width:980px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.blog-grid{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;text-decoration:none;background:var(--walnut);border:1px solid var(--grain);border-radius:24px;overflow:hidden;transition:border-color .25s,transform .25s}
.card:hover{border-color:#4A3C31;transform:translateY(-3px)}
.card-img{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--grain);background:var(--walnut)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card:hover .card-img img{transform:scale(1.03)}
.marca{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(closest-side at 72% 28%,rgba(224,123,34,.16),transparent 75%),var(--walnut);font-family:var(--display);font-weight:600;font-size:clamp(44px,5vw,60px);letter-spacing:-.045em;color:var(--ink);user-select:none}
.card-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:22px 24px 24px}
.card-cat{font-size:13px;font-weight:600;color:var(--orange)}
.card-titulo{font-size:clamp(20px,1.8vw,23px);line-height:1.22;letter-spacing:-.02em}
.card-data{margin-top:auto;padding-top:6px;font-size:14px;color:var(--muted)}
.blog-status{padding:56px 0 20px;text-align:center;color:var(--muted)}
.blog-status :is(h1,h2){font-size:clamp(24px,2.6vw,30px);color:var(--ink);margin-bottom:10px}
.blog-status .btn{margin-top:22px}
.blog-status a:not(.btn){color:var(--orange-hi)}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--grain);border-top-color:var(--orange);margin:64px auto;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---------- Artigo ---------- */
.post-wrap{max-width:calc(720px + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
.post-largo{max-width:calc(1000px + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
.post-voltar{display:inline-flex;align-items:center;gap:8px;font:15px var(--body);color:var(--muted);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;margin-bottom:28px;transition:color .2s}
.post-voltar:hover{color:var(--ink)}
.post-head h1{font-size:clamp(34px,4.6vw,54px);letter-spacing:-.035em;line-height:1.08}
.post-meta{display:flex;align-items:center;gap:14px;margin-top:28px;padding-bottom:28px;border-bottom:1px solid var(--grain);font-size:15px;color:var(--muted);line-height:1.4}
.post-meta b{display:block;color:var(--ink);font-weight:600}
.avatar{width:46px;height:46px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--grain);font-family:var(--display);font-weight:700;color:var(--ink)}
.avatar img{width:100%;height:100%;object-fit:cover}
.post-capa{margin:40px auto 0}
.post-capa img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:24px}
#postCorpo{margin-top:44px}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:48px;padding-top:28px;border-top:1px solid var(--grain)}
.share > span{font-size:14px;color:var(--muted);margin-right:6px;flex-basis:100%}
@media (min-width:640px){.share > span{flex-basis:auto}}
.share a,.share button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--grain);background:none;color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s}
.share a:hover,.share button:hover{border-color:var(--orange);color:var(--orange)}
.share svg{width:18px;height:18px}
.post-cta{position:relative;overflow:hidden;margin-top:64px;background:var(--walnut);border:1px solid var(--grain);border-radius:32px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:center}
.post-cta::before{content:"";position:absolute;inset:-60% -15% auto auto;width:60%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(224,123,34,.18),transparent 70%);pointer-events:none}
.post-cta > *{position:relative}
.post-cta h2{font-size:clamp(28px,3.4vw,40px);max-width:17ch}
.post-cta p:not(.eyebrow){color:var(--muted);margin-top:14px;max-width:50ch}
@media (max-width:760px){.post-cta{grid-template-columns:1fr}.post-cta .btn{width:100%}}
.post-mais{margin-top:clamp(64px,8vw,96px)}
.post-mais > h2{font-size:clamp(26px,3vw,34px)}

/* ---------- Corpo do artigo: o MESMO CSS vale no post e no editor ---------- */
.article-body{max-width:720px;margin-left:auto;margin-right:auto}
:is(.article-body,#editorCorpo .ql-editor){font-family:var(--body);font-size:clamp(17px,1.3vw,19px);line-height:1.75;color:#DCD5CB;overflow-wrap:break-word}
:is(.article-body,#editorCorpo .ql-editor) p{margin:0 0 1.3em}
:is(.article-body,#editorCorpo .ql-editor) h2{font-family:var(--display);font-weight:600;font-size:clamp(25px,2.4vw,30px);line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin:1.9em 0 .7em}
:is(.article-body,#editorCorpo .ql-editor) h3{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.25;color:var(--ink);margin:1.6em 0 .6em}
:is(.article-body,#editorCorpo .ql-editor) strong{color:var(--ink);font-weight:600}
:is(.article-body,#editorCorpo .ql-editor) a{color:var(--orange-hi);text-decoration:underline;text-underline-offset:3px}
:is(.article-body,#editorCorpo .ql-editor) mark{background:rgba(224,123,34,.26);color:var(--ink);padding:.05em .22em;border-radius:.25em}
:is(.article-body,#editorCorpo .ql-editor) blockquote{margin:1.8em 0;padding:.15em 0 .15em 1.2em;border-left:3px solid var(--orange);font-family:var(--display);font-weight:600;font-size:1.3em;line-height:1.38;letter-spacing:-.015em;color:var(--orange-hi)}
:is(.article-body,#editorCorpo .ql-editor) :is(ul,ol){margin:0 0 1.3em;padding-left:1.4em}
:is(.article-body,#editorCorpo .ql-editor) li{margin:0 0 .5em;padding-left:.3em}
:is(.article-body,#editorCorpo .ql-editor) li::marker{color:var(--orange)}
:is(.article-body,#editorCorpo .ql-editor) img{display:block;max-width:100%;height:auto;margin:2em auto;border-radius:16px}
/* Letra capitular (opcional por artigo): initial-letter alinha em 3 linhas; float é o plano B (Firefox) */
:is(.article-body p[data-capitular],#editorCorpo .ql-editor.com-capitular > p:first-of-type)::first-letter{float:left;font-family:var(--display);font-weight:700;font-style:normal;color:var(--orange);font-size:4.3em;line-height:.78;margin:.07em .1em 0 0}
@supports ((initial-letter:3) or (-webkit-initial-letter:3)){
  :is(.article-body p[data-capitular],#editorCorpo .ql-editor.com-capitular > p:first-of-type)::first-letter{float:none;font-size:inherit;line-height:inherit;margin:0 .12em 0 0;-webkit-initial-letter:3;initial-letter:3}
}