/* =========================================================
   RFR ADVOGADOS · BLOG
   Só o que é específico do blog.
   Cores, fontes, topo, rodapé, botões e .sec--papel vêm do
   /css/style.css da landing, carregado antes deste arquivo.
   ========================================================= */

/* o topo do blog é sempre sólido: não existe hero atrás dele */
.topo{position:sticky}

/* link do menu para a seção onde já se está */
.menu a.atual{color:var(--carimbo-viva)}
.menu a.atual::after{transform:scaleX(1);transform-origin:left}

/* pular para o conteúdo — só aparece no foco por teclado */
.pular{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--carimbo);color:var(--tinta);
  padding:12px 20px;font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
}
.pular:focus{left:0}

/* =========================================================
   CABEÇALHO DA LISTAGEM
   ========================================================= */
.blog-cab{padding-top:calc(var(--sec-y) * .8)}
.blog-cab .h-display{max-width:16ch}
.blog-cab .sec__sub{margin-bottom:34px}

/* =========================================================
   BUSCA
   ========================================================= */
.busca{max-width:440px}
.busca label{display:block;margin-bottom:10px}
.busca__linha{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--grafite);transition:border-color .3s}
.busca__linha:focus-within{border-color:var(--carimbo)}
.busca input{
  flex:1;background:transparent;border:0;outline:none;
  font-family:var(--sans);font-size:15px;font-weight:300;
  color:var(--branco);padding:11px 2px;
}
.busca input::placeholder{color:rgba(184,184,184,.45)}
.busca button{
  flex:none;width:34px;height:34px;color:var(--carimbo-viva);
  display:flex;align-items:center;justify-content:center;transition:color .25s;
}
.busca button:hover{color:var(--branco)}
.busca button svg{width:18px;height:18px}

.sec--papel .busca__linha{border-color:var(--papel-linha)}
.sec--papel .busca input{color:var(--tinta)}
.sec--papel .busca button{color:var(--carimbo)}

/* =========================================================
   NAVEGAÇÃO POR CATEGORIA
   ========================================================= */
.cats{margin-top:clamp(30px,3.4vw,42px)}
.cats__lbl{display:block;margin-bottom:14px}
.cats__lista{display:flex;flex-wrap:wrap;gap:8px}
.cats__item{
  display:inline-flex;align-items:baseline;gap:8px;
  padding:9px 15px;border:1px solid var(--grafite);
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--fumaca);
  transition:color .25s,border-color .25s,background .25s;
}
.cats__n{font-size:9.5px;opacity:.6;letter-spacing:.06em}
.cats__item:hover{color:var(--branco);border-color:var(--carimbo)}
.cats__item--on{
  background:var(--carimbo);border-color:var(--carimbo);color:var(--tinta);
}
.cats__item--on .cats__n{opacity:.75}

.blog-cab__contagem{margin-top:18px}
.blog-cab--cat .h-display{max-width:20ch}
.blog-cab .artigo__trilha{margin-bottom:22px}

/* =========================================================
   LISTAGEM DE ARTIGOS
   ========================================================= */
.blog-corpo{padding-bottom:var(--sec-y)}

.post-item{
  display:grid;grid-template-columns:300px 1fr;
  gap:clamp(20px,3vw,44px);align-items:center;
  padding:clamp(26px,3vw,38px) 0;
  border-top:1px solid var(--grafite);
  transition:padding-left .45s cubic-bezier(.65,0,.35,1);
}
.post-item:last-of-type{border-bottom:1px solid var(--grafite)}
.post-item--sem-img{grid-template-columns:1fr}

/* o primeiro da home ganha corpo: imagem larga em cima do texto */
.post-item--destaque{
  grid-template-columns:1fr;gap:clamp(22px,2.6vw,34px);
  border-top:0;padding-top:0;padding-bottom:clamp(34px,4vw,52px);
}
.post-item--destaque .post-item__img{aspect-ratio:16/9}
.post-item--destaque .post-item__tit{font-size:clamp(26px,3.4vw,44px)}
.post-item--destaque .post-item__desc{font-size:16px;max-width:62ch}

.post-item__img{
  display:block;overflow:hidden;aspect-ratio:3/2;
  background:var(--tinta-3);border:1px solid var(--grafite);
}
.post-item__img img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.04);
  transition:transform 1s cubic-bezier(.65,0,.35,1),filter .5s;
}

.post-item__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin-bottom:14px;
}
.post-item__meta > *{display:inline-block}
.post-item__meta > * + *::before{content:'·';margin-right:14px;opacity:.5}
.post-item__cat{color:var(--carimbo-viva);transition:color .25s}
a.post-item__cat:hover{color:var(--branco)}

.post-item__tit{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(21px,2.2vw,30px);line-height:1.14;
  letter-spacing:-.018em;color:var(--branco);margin-bottom:12px;
}
.post-item__tit a{transition:color .3s}
.post-item__desc{font-size:14.5px;color:var(--fumaca);max-width:56ch;margin-bottom:18px}
.post-item__ler{pointer-events:none}

@media (hover:hover){
  .post-item:hover{padding-left:clamp(10px,1.4vw,22px)}
  .post-item:hover .post-item__img img{transform:scale(1.05);filter:grayscale(0) contrast(1)}
  .post-item:hover .post-item__tit a{color:var(--carimbo-viva)}
  .post-item:hover .post-item__ler i{width:30px}
}

@media (max-width:760px){
  .post-item{grid-template-columns:1fr;gap:18px}
  .post-item__img{aspect-ratio:16/9}
}

/* =========================================================
   PAGINAÇÃO
   ========================================================= */
.navigation.pagination{margin-top:clamp(36px,4vw,58px)}
.navigation .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.navigation .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  color:var(--fumaca);border:1px solid var(--grafite);
  transition:color .25s,border-color .25s,background .25s;
}
.navigation .page-numbers:hover{color:var(--branco);border-color:var(--carimbo)}
.navigation .page-numbers.current{background:var(--carimbo);border-color:var(--carimbo);color:var(--tinta)}
.navigation .page-numbers.dots{border-color:transparent}

/* =========================================================
   ARTIGO
   ========================================================= */
.artigo{padding-top:calc(var(--sec-y) * .62)}

.artigo__trilha{display:flex;gap:8px;margin-bottom:clamp(26px,3vw,40px)}
.artigo__trilha a{border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.artigo__trilha a:hover{color:var(--carimbo);border-color:var(--carimbo)}

.artigo__cab{max-width:22ch;max-width:min(760px,100%)}
.artigo__meta{
  display:flex;flex-wrap:wrap;gap:8px 14px;margin-bottom:20px;
}
.artigo__meta > * + *::before{content:'·';margin-right:14px;opacity:.5}

.artigo__tit{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(30px,4.4vw,56px);line-height:1.05;
  letter-spacing:-.022em;color:var(--tinta);
  max-width:20ch;
}
.artigo__linha-fina{
  margin-top:22px;font-size:clamp(16px,1.3vw,19px);
  color:var(--papel-fraco);max-width:60ch;font-weight:300;
}
.artigo__autor{
  margin-top:26px;padding-top:18px;
  border-top:1px solid var(--papel-linha);
}

/* sem capa entre o cabeçalho e o texto, o autor colava no
   primeiro parágrafo — este respiro só entra nesse caso */
.artigo__cab + .artigo__corpo{margin-top:clamp(32px,3.6vw,52px)}

.artigo__capa{margin:clamp(34px,4vw,56px) 0}
.artigo__capa img{
  width:100%;height:auto;display:block;
  /* trava em 16:9 mesmo se subirem foto em pé — o recorte
     rfr-capa do WordPress já entrega nessa proporção */
  aspect-ratio:16/9;object-fit:cover;
  border:1px solid var(--papel-linha);
}
.artigo__capa figcaption{margin-top:12px;color:var(--papel-fraco)}

/* ---------- corpo do texto ----------
   Medida de leitura em ~68 caracteres: é o que a tipografia
   suporta sem cansar. O resto da largura fica de margem. */
.artigo__corpo{
  max-width:68ch;
  font-size:clamp(16px,1.15vw,17.5px);
  line-height:1.78;color:var(--tinta);font-weight:300;
}
.artigo__corpo > * + *{margin-top:1.35em}

.artigo__corpo h2,
.artigo__corpo h3,
.artigo__corpo h4{
  font-family:var(--disp);font-weight:500;color:var(--tinta);
  line-height:1.18;letter-spacing:-.016em;
  margin-top:2.1em;margin-bottom:.5em;
}
.artigo__corpo h2{font-size:clamp(23px,2.4vw,32px)}
.artigo__corpo h3{font-size:clamp(19px,1.8vw,24px)}
.artigo__corpo h4{font-size:clamp(17px,1.5vw,20px)}

.artigo__corpo strong,.artigo__corpo b{font-weight:600;color:var(--tinta)}

.artigo__corpo a{
  color:var(--tinta);
  background:linear-gradient(var(--carimbo),var(--carimbo)) 0 92%/100% .08em no-repeat;
  transition:background-size .3s;
}
.artigo__corpo a:hover{background-size:100% .5em}

.artigo__corpo ul,.artigo__corpo ol{padding-left:1.3em}
.artigo__corpo li{margin-top:.5em}
.artigo__corpo ul li{list-style:none;position:relative}
.artigo__corpo ul li::before{
  content:'';position:absolute;left:-1.05em;top:.72em;
  width:6px;height:1px;background:var(--carimbo);
}
.artigo__corpo ol{list-style:decimal}
.artigo__corpo ol li::marker{font-family:var(--mono);font-size:.82em;color:var(--carimbo)}

.artigo__corpo blockquote{
  margin:2em 0;padding-left:26px;
  border-left:2px solid var(--carimbo);
  font-family:var(--disp);font-style:italic;font-weight:400;
  font-size:clamp(18px,1.7vw,23px);line-height:1.45;
  letter-spacing:-.01em;color:var(--tinta);
}
.artigo__corpo blockquote p + p{margin-top:.6em}
.artigo__corpo blockquote cite{
  display:block;margin-top:14px;font:500 11px/1.5 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;font-style:normal;
  color:var(--papel-fraco);
}

/* imagem dentro do texto pode extravasar a medida de leitura */
.artigo__corpo figure,
.artigo__corpo .wp-block-image{margin:2.2em 0;max-width:none}
.artigo__corpo img{
  width:100%;height:auto;display:block;
  border:1px solid var(--papel-linha);
}
.artigo__corpo figcaption{
  margin-top:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;color:var(--papel-fraco);line-height:1.7;
}
.artigo__corpo .alignwide{width:min(100%,860px);margin-left:calc((68ch - min(100%,860px)) / 2)}

.artigo__corpo hr,
.artigo__corpo .wp-block-separator{
  border:0;border-top:1px solid var(--papel-linha);margin:2.6em 0;
}

.artigo__corpo table{width:100%;border-collapse:collapse;font-size:14.5px}
.artigo__corpo th,.artigo__corpo td{
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--papel-linha);
}
.artigo__corpo th{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}

.artigo__corpo code{
  font-family:var(--mono);font-size:.88em;
  background:rgba(178,156,108,.14);padding:.15em .4em;
}
.artigo__corpo pre{
  background:var(--tinta);color:var(--branco);
  padding:20px;overflow-x:auto;font-size:13px;
}
.artigo__corpo pre code{background:none;padding:0}

/* ---------- rodapé do artigo ---------- */
.artigo__tags{
  margin-top:clamp(36px,4vw,56px);padding-top:24px;
  border-top:1px solid var(--papel-linha);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
}
.artigo__tags ul{display:flex;flex-wrap:wrap;gap:8px}
.artigo__tags a{
  display:inline-block;padding:7px 13px;
  border:1px solid var(--papel-linha);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--papel-fraco);
  transition:border-color .25s,color .25s;
}
.artigo__tags a:hover{border-color:var(--carimbo);color:var(--tinta)}

.artigo__aviso{
  margin-top:clamp(30px,3.4vw,44px);padding:18px 20px;
  border:1px solid var(--papel-linha);
  font-size:13px;line-height:1.7;color:var(--papel-fraco);
  max-width:68ch;
}

/* =========================================================
   RELACIONADOS
   ========================================================= */
.relacionados{padding:var(--sec-y) 0}
.relacionados__grade{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,30px);
}
.rel-card__img{
  display:block;overflow:hidden;aspect-ratio:3/2;margin-bottom:16px;
  background:var(--tinta-3);border:1px solid var(--grafite);
}
.rel-card__img img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1);transition:transform 1s cubic-bezier(.65,0,.35,1),filter .5s;
}
.rel-card h3{
  font-family:var(--disp);font-weight:500;font-size:clamp(17px,1.5vw,21px);
  line-height:1.2;letter-spacing:-.015em;color:var(--branco);margin-top:8px;
}
.rel-card h3 a{transition:color .3s}
@media (hover:hover){
  .rel-card:hover .rel-card__img img{transform:scale(1.05);filter:grayscale(0)}
  .rel-card:hover h3 a{color:var(--carimbo-viva)}
}
@media (max-width:820px){.relacionados__grade{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.relacionados__grade{grid-template-columns:1fr}}

/* =========================================================
   ESTADOS VAZIOS
   ========================================================= */
.vazio{max-width:60ch}
.vazio p{color:var(--fumaca);margin:16px 0 26px}
.vazio__acoes{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 40px}

/* =========================================================
   BARRA DE PROGRESSO DE LEITURA
   Reaproveita .topo__prog da landing; aqui ela é preenchida
   pelo blog.js conforme a rolagem do artigo.
   ========================================================= */
.rfr-artigo .topo__prog{background:var(--carimbo-viva)}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .post-item,.post-item__img img,.rel-card__img img{transition:none!important}
}

/* =========================================================
   REVELAÇÃO NA ROLAGEM (aplicada pelo blog.js)
   ========================================================= */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.65,0,.35,1)}
.rv--on{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}