/* =====================================================================
   BLOG · Dalla Costa International Law
   Usa os tokens de style.css (verde #214A3C, ouro #C9A56C, Georgia + Carlito).
   Texto maior que o restante do site para leitura confortável no celular.
   ===================================================================== */

.blog-coluna{max-width:760px;margin:0 auto}

/* ---------- topo (herda .ihero do site) ---------- */
.blog-hero h1{max-width:none;font-size:clamp(2.1rem,5.4vw,3.4rem);line-height:1.12;text-wrap:balance}
.blog-hero--artigo h1{font-size:clamp(2rem,4.6vw,3rem)}
.blog-hero .lede{font-size:1.2rem;line-height:1.6;max-width:none}

.blog-trilha{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:22px;font-size:1rem;color:var(--muted-d)}
.blog-trilha a{color:var(--muted-d);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.blog-trilha a:hover{color:var(--gold);border-color:var(--gold)}
.blog-trilha span{color:var(--gold)}

.blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;line-height:1.5;margin-top:26px;font-size:1.02rem;color:var(--muted-d)}
.blog-meta a{color:var(--cream);font-weight:700;border-bottom:1px solid var(--gold)}
.blog-meta a:hover{color:var(--gold)}
.blog-meta__item:first-child{flex-basis:100%}
.blog-meta__item + .blog-meta__item + .blog-meta__item::before{content:"·";color:var(--gold);margin-right:12px}

/* ---------- lista de artigos ---------- */
.blog-lista{display:grid;grid-template-columns:1fr;gap:22px}
.blog-cartao{position:relative;display:flex;flex-direction:column;padding:30px 26px 24px;background:var(--paper);
  border:1px solid var(--line-gold);border-radius:5px;transition:transform .25s,box-shadow .25s}
.blog-cartao:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(25,39,31,.10)}
.blog-cartao:focus-within{outline:2px solid var(--gold);outline-offset:3px}
.blog-cartao__categoria{font-family:var(--display);font-style:italic;color:var(--gold-deep);font-size:1.05rem;margin-bottom:12px}
.blog-cartao__titulo{font-family:var(--display);font-weight:400;font-size:1.55rem;line-height:1.22;margin-bottom:14px;color:var(--green)}
.blog-cartao__titulo a{color:inherit}
.blog-cartao__titulo a::after{content:"";position:absolute;inset:0;border-radius:5px}
.blog-cartao__titulo a:focus-visible{outline:none}
.blog-cartao__resumo{font-size:1.08rem;line-height:1.6;color:var(--ink-soft);margin-bottom:22px}
.blog-cartao__rodape{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:16px;
  border-top:1px solid var(--line-gold);font-size:1rem;color:var(--muted-l)}
.blog-cartao__ler{font-weight:700;color:var(--green);display:inline-flex;align-items:center;gap:8px}
.blog-cartao__ler::after{content:"→";transition:transform .2s}
.blog-cartao:hover .blog-cartao__ler{color:var(--gold-deep)}
.blog-cartao:hover .blog-cartao__ler::after{transform:translateX(4px)}
.blog-vazio{font-size:1.2rem;color:var(--ink-soft)}

/* ---------- corpo do artigo ---------- */
.blog-artigo__fundo{padding:56px 0 30px}
.blog-corpo{font-size:1.1875rem;line-height:1.78;color:var(--ink)}
.blog-corpo p{margin-bottom:1.3em}
.blog-corpo h2{font-size:clamp(1.65rem,3.4vw,2.1rem);line-height:1.2;color:var(--green);margin:1.9em 0 .7em;scroll-margin-top:100px}
.blog-corpo h2::before{content:"";display:block;width:46px;height:2px;background:var(--gold);margin-bottom:18px}
.blog-corpo > h2:first-child{margin-top:0}
.blog-corpo h3{font-family:var(--display);font-weight:400;font-size:1.32rem;line-height:1.35;color:var(--green);margin:1.5em 0 .5em}
.blog-corpo a{color:var(--green);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.blog-corpo a:hover{color:var(--gold-deep)}
.blog-corpo strong{color:var(--green-deep)}
.blog-corpo ul,.blog-corpo ol{margin:0 0 1.3em 1.2em}
.blog-corpo li{margin-bottom:.5em}
.blog-corpo li::marker{color:var(--gold-deep)}
.blog-corpo blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:2px solid var(--gold);
  font-family:var(--display);font-style:italic;font-size:1.32rem;line-height:1.5;color:var(--green)}
.blog-corpo hr{border:0;border-top:1px solid var(--line-gold);margin:2.4em 0}

/* ---------- perguntas frequentes ---------- */
.blog-faq{margin:2.8em 0 1em;padding:34px 26px 14px;background:var(--cream);border:1px solid var(--line-gold);border-radius:6px}
.blog-faq h2{margin-top:0}
.blog-faq .blog-faq__pergunta{font-style:italic;margin:1.3em 0 .45em;padding-top:1.2em;border-top:1px solid var(--line-gold)}
.blog-faq h2 + .blog-faq__pergunta{margin-top:.4em;padding-top:0;border-top:0}
.blog-faq .blog-faq__resposta{color:var(--ink-soft)}

/* ---------- autora ---------- */
.blog-autora{display:flex;gap:20px;align-items:flex-start;margin:22px auto 40px;padding:26px 24px;
  border:1px solid var(--line-gold);border-left:2px solid var(--gold);border-radius:5px;background:#fff;
  font-size:1.06rem;line-height:1.62;color:var(--ink-soft)}
.blog-autora__foto{flex:none;width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:top center;border:1px solid var(--line-gold)}
.blog-autora p{margin-bottom:10px}
.blog-autora p:last-child{margin-bottom:0}
.blog-autora__nome{font-family:var(--display);font-style:italic;font-size:1.35rem;color:var(--green);line-height:1.2}
.blog-autora__link{font-weight:700;color:var(--green);display:inline-flex;align-items:center;gap:8px}
.blog-autora__link::after{content:"→";color:var(--gold-deep)}
.blog-autora__link:hover{color:var(--gold-deep)}

/* ---------- leia também ---------- */
.blog-relacionados .sec-head{margin-bottom:34px}

@media (min-width:720px){
  .blog-lista{grid-template-columns:repeat(2,1fr);gap:26px}
  .blog-faq{padding:40px 38px 20px}
  .blog-artigo__fundo{padding:72px 0 40px}
}
@media (min-width:1040px){
  .blog-lista{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:520px){
  .blog-autora{flex-direction:column;gap:14px}
  .blog-cartao{padding:26px 22px 22px}
}

/* ---------- fontes ---------- */
.blog-corpo #fontes{font-size:1.45rem;margin-top:2.2em}
.blog-corpo #fontes + ul{list-style:none;margin:0;padding:0;font-size:1rem;line-height:1.6;color:var(--ink-soft)}
.blog-corpo #fontes + ul li{padding:12px 0;margin:0;border-top:1px solid var(--line-gold);overflow-wrap:anywhere}
.blog-corpo #fontes + ul li:last-child{border-bottom:1px solid var(--line-gold)}