/* =========================================================
   B2 Rocket Layout — Distribuidora Paris
   post.css: a matéria individual.

   Duas colunas: a matéria à esquerda, e à direita uma coluna fina que
   acompanha a rolagem com categoria, data, tempo de leitura, a chamada e o
   compartilhar. Tudo que é sobre a matéria sai de dentro dela e vai para a
   lateral — o texto fica com a largura inteira da sua coluna e nada
   interrompe a leitura no meio.
   ========================================================= */

.brl-post{
  max-width:var(--paris-larg-grade);
  margin:0 auto;
  padding:clamp(32px, 3.5vw, 56px) var(--paris-pad) 0;
}

/* ---------- topo ---------- */

.brl-migalhas{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--paris-cinza);
}
.brl-migalhas a{color:var(--paris-cinza);transition:color .2s ease}
.brl-migalhas a:hover{color:var(--paris-vermelho)}
.brl-migalha-sep{
  width:4px;height:4px;
  background:currentColor;opacity:.5;
  display:inline-block;
}

.brl-post-topo h1{
  margin:22px 0 0;
  font-family:var(--fonte-titulo);
  font-size:clamp(32px, 4vw, 52px);
  font-weight:600;line-height:1.1;letter-spacing:-.018em;
  color:var(--paris-azul);
}

/* ---------- grade ---------- */

/* Migalha e título entram na MESMA coluna da imagem e do texto: fora da
   grade, eles usavam a largura inteira e o título passava da borda direita da
   foto. A lateral começa na segunda linha, alinhada com o topo da imagem. */
.brl-post-grade{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,282px);
  gap:0 clamp(40px, 4.5vw, 80px);
  margin-top:clamp(28px, 3vw, 44px);
}
.brl-post-topo{grid-column:1;grid-row:1}
.brl-post-corpo{grid-column:1;grid-row:2;margin-top:clamp(28px, 3vw, 44px)}
.brl-post-lado{grid-column:2;grid-row:2;margin-top:clamp(28px, 3vw, 44px)}

.brl-post-arte{margin:0;background:var(--paris-fundo-claro)}
.brl-post-arte img{width:100%;height:auto;display:block}

/* ---------- a lateral ---------- */

.brl-post-lado-fixo{
  position:sticky;
  top:118px;
}
.brl-pilula{
  display:inline-block;
  padding:9px 16px;
  border:1px solid var(--paris-marcador);
  font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--paris-vermelho);
  transition:background .22s ease,color .22s ease;
}
.brl-pilula:hover{background:var(--paris-vermelho);border-color:var(--paris-vermelho);color:#FFFFFF}

.brl-post-data{
  margin:22px 0 0;
  font-size:15.5px;color:var(--paris-tinta-2);
}
.brl-post-min{
  margin:6px 0 0;
  font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--paris-cinza);
}
.brl-post-share{
  margin-top:28px;
  padding-top:26px;
  border-top:1px solid var(--paris-linha);
}
.brl-post-share .brl-rotulo{margin:0 0 14px}
.brl-share-botoes{display:flex;gap:9px;flex-wrap:wrap}
/* O seletor leva o pai junto porque o reset global de button zera borda, e
   ele tem especificidade maior que uma classe sozinha: sem isso o botão de
   copiar fica sem o quadrado que os outros três têm. */
.brl-post-share .brl-share{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  border:1px solid var(--paris-linha-forte);
  border-radius:0;
  background:none;
  cursor:pointer;
  transition:background .22s ease,border-color .22s ease,color .22s ease;
}
.brl-post-share .brl-share,
.brl-post-share .brl-share:focus,
.brl-post-share .brl-share:active{color:var(--paris-azul) !important;background:none}
.brl-post-share .brl-share:hover{background:var(--paris-azul);border-color:var(--paris-azul);color:#FFFFFF !important}
.brl-post-share .brl-share svg{width:18px;height:18px}
.brl-share-aviso{
  display:inline-block;
  margin-top:12px;
  font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--paris-vermelho);
}
.brl-share-aviso[hidden]{display:none}

/* ---------- o texto da matéria ---------- */
/* O conteúdo vem do editor do WordPress, então as regras valem para as tags
   soltas que ele produz. Título e texto acompanham a largura da imagem em
   destaque: as três coisas terminam na mesma linha vertical. */

.brl-post-texto{margin-top:clamp(28px, 3vw, 44px)}
.brl-post-texto > *:first-child{margin-top:0}
.brl-post-texto p{
  margin:0 0 20px;
  font-size:17.5px;line-height:1.85;color:var(--paris-tinta-2);
}
.brl-post-texto h2{
  margin:44px 0 16px;
  font-family:var(--fonte-titulo);
  font-size:clamp(24px, 2.4vw, 30px);
  font-weight:600;line-height:1.22;letter-spacing:-.012em;
  color:var(--paris-azul);
}
.brl-post-texto h3{
  margin:34px 0 12px;
  font-size:19px;font-weight:600;line-height:1.35;
  color:var(--paris-azul);
}
.brl-post-texto ul,
.brl-post-texto ol{margin:0 0 20px;padding:0;list-style:none}
.brl-post-texto li{
  position:relative;
  margin:0 0 11px;
  padding-left:28px;
  font-size:17.5px;line-height:1.8;color:var(--paris-tinta-2);
}
.brl-post-texto ul > li::before{
  content:"";
  position:absolute;left:0;top:.8em;
  width:14px;height:1px;
  background:var(--paris-vermelho);
}
.brl-post-texto ol{counter-reset:brl-ol}
.brl-post-texto ol > li{counter-increment:brl-ol}
.brl-post-texto ol > li::before{
  content:counter(brl-ol);
  position:absolute;left:0;top:0;
  font-size:12px;font-weight:600;
  color:var(--paris-vermelho);
  line-height:2.4;
}
.brl-post-texto strong{color:var(--paris-azul)}
.brl-post-texto a{
  color:var(--paris-vermelho);
  border-bottom:1px solid rgba(151,33,32,.35);
}
.brl-post-texto a:hover{border-bottom-color:var(--paris-vermelho)}
.brl-post-texto img{max-width:100%;height:auto;display:block}
.brl-post-texto figure{margin:32px 0}
.brl-post-texto figcaption{
  margin-top:10px;
  font-size:13.5px;color:var(--paris-cinza);
}
.brl-post-texto blockquote{
  margin:32px 0;
  padding-left:26px;
  border-left:2px solid var(--paris-vermelho);
}
.brl-post-texto blockquote p{
  font-family:var(--fonte-titulo);
  font-size:21px;line-height:1.5;color:var(--paris-azul);
}

/* ---------- continue lendo ---------- */

.brl-post-mais{
  max-width:var(--paris-larg-grade);
  margin:clamp(64px, 6vw, 100px) auto 0;
  padding:clamp(44px, 4vw, 64px) var(--paris-pad) 0;
  border-top:1px solid var(--paris-linha);
}
.brl-post-mais ul{
  list-style:none;
  margin:28px 0 0;padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(24px, 2.6vw, 40px);
}
.brl-post-mais-arte{display:block;overflow:hidden;background:var(--paris-fundo-claro)}
.brl-post-mais-arte img{
  width:100%;height:100%;display:block;
  aspect-ratio:16 / 10;object-fit:cover;
  transition:transform .55s ease;
}
.brl-post-mais a:hover .brl-post-mais-arte img{transform:scale(1.04)}
.brl-post-mais time{
  display:block;margin-top:16px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paris-cinza);
}
.brl-post-mais-tit{
  display:block;margin-top:9px;
  font-size:17px;font-weight:600;line-height:1.4;
  color:var(--paris-azul);
  transition:color .2s ease;
}
.brl-post-mais a:hover .brl-post-mais-tit{color:var(--paris-vermelho)}

/* ---------- telas menores ---------- */

@media (max-width:1000px){
  /* A lateral deixa de acompanhar e vira uma faixa horizontal acima do texto:
     coluna fina grudada rouba largura justamente de quem tem pouca. */
  .brl-post-grade{grid-template-columns:minmax(0,1fr);gap:0}
  .brl-post-topo{grid-column:1;grid-row:1}
  .brl-post-lado{grid-column:1;grid-row:2;margin-top:26px}
  .brl-post-corpo{grid-column:1;grid-row:3;margin-top:26px}
  .brl-post-lado-fixo{
    position:static;
    display:flex;align-items:center;flex-wrap:wrap;
    gap:16px 26px;
    padding-bottom:24px;
    border-bottom:1px solid var(--paris-linha);
  }
  .brl-post-data,.brl-post-min{margin:0}
  .brl-post-share{
    margin:0;padding:0;border:0;
    display:flex;align-items:center;gap:14px;
  }
  .brl-post-share .brl-rotulo{display:none}
  .brl-post-texto{max-width:none}
  .brl-post-mais ul{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

@media (max-width:620px){
  .brl-post-texto p,.brl-post-texto li{font-size:16.5px}
  .brl-post-mais ul{grid-template-columns:minmax(0,1fr)}
}