/* ============================================================================
   Cicloway — estilos exclusivos do blog (/blog e /blog/<slug>).

   Complemento de `styles-v4.css`, nunca substituto: nav, rodapé, botões, cards
   e `.legal-body` (a tipografia de texto corrido) vêm de lá. Aqui entra só o
   que o blog tem e o resto do site não tinha: filtro por assunto, card de
   destaque, cabeçalho de artigo, coluna lateral e paginação.

   Prefixo `bl-` para deixar óbvio, ao ler qualquer página, de onde vem a regra.
   ========================================================================== */

/* -------------------------------------------------------------- listagem */

.bl-filtros{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.bl-filtro{display:inline-block;padding:8px 17px;border-radius:999px;font-size:.85rem;
  font-weight:500;color:var(--cinza);background:#fff;border:1px solid var(--linha);
  transition:var(--t)}
.bl-filtro:hover{border-color:var(--azul);color:var(--azul)}
.bl-filtro.ativo{background:var(--tinta);border-color:var(--tinta);color:#fff;font-weight:600}

/* O card de topo: uma peça só, foto à esquerda, texto à direita. */
.bl-destaque{display:grid;grid-template-columns:1.05fr 1fr;gap:0;margin-top:34px;
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;box-shadow:var(--sombra-sm)}
.bl-destaque-foto{min-height:320px;overflow:hidden}
.bl-destaque-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.bl-destaque:hover .bl-destaque-foto img{transform:scale(1.04)}
.bl-destaque-texto{padding:38px 40px;display:flex;flex-direction:column;justify-content:center}
.bl-destaque-texto .meta{font-size:.74rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--azul);margin-bottom:12px}
.bl-destaque-texto h2{font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.2;margin-bottom:12px}
.bl-destaque-texto h2 a{color:inherit}
.bl-destaque-texto h2 a:hover{color:var(--azul)}
.bl-destaque-texto p{color:var(--cinza);margin-bottom:22px;font-size:.98rem;line-height:1.65}
.bl-destaque-texto .btn{align-self:flex-start}

/* Título do card herda a cor do texto — o link inteiro é a área de clique. */
.posts-grid .post h3 a{color:inherit}
.posts-grid .post h3 a:hover{color:var(--azul)}
.posts-grid{margin-top:30px}

.bl-vazio{text-align:center;max-width:56ch;margin:40px auto;padding:44px 26px;
  background:#fff;border:1px dashed var(--linha);border-radius:var(--raio)}
.bl-vazio h2{font-size:1.3rem;margin-bottom:10px}
.bl-vazio p{color:var(--cinza);margin-bottom:18px}

.bl-pag{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:46px}
.bl-pag-item{min-width:42px;padding:9px 15px;text-align:center;border-radius:10px;
  border:1px solid var(--linha);background:#fff;color:var(--cinza);font-size:.9rem;
  font-weight:500;transition:var(--t)}
.bl-pag-item:hover{border-color:var(--azul);color:var(--azul)}
.bl-pag-item.atual{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:600}

/* ---------------------------------------------------------------- artigo */

.bl-artigo-topo{padding:calc(var(--nav-h,76px) + 52px) 0 30px;background:var(--cinza-claro);
  border-bottom:1px solid var(--linha)}
.bl-artigo-topo .container{max-width:820px}
.bl-artigo-topo .crumb{font-size:.86rem;color:var(--cinza);margin:0 0 14px}
.bl-artigo-topo .crumb a{color:var(--azul)}
.bl-artigo-topo h1{font-size:clamp(1.9rem,4vw,2.85rem);line-height:1.14;margin:0 0 16px}
.bl-lide{font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.6;color:var(--cinza);
  max-width:62ch;margin:0 0 22px}
.bl-assinatura{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:0;
  font-size:.86rem;color:var(--cinza)}
.bl-assinatura span:first-child{font-weight:600;color:var(--tinta)}

.bl-capa{margin:0}
.bl-capa .container{max-width:1000px;padding-top:34px}
.bl-capa img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:var(--raio);
  box-shadow:var(--sombra-sm)}

.bl-colunas{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:56px;
  align-items:start;max-width:1060px}
.bl-corpo{max-width:none}
.bl-corpo img{width:100%;height:auto;border-radius:var(--raio-sm);margin:26px 0}
.bl-corpo figure{margin:26px 0}
.bl-corpo figcaption{font-size:.83rem;color:var(--cinza);margin-top:8px;text-align:center}
.bl-corpo blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--azul);
  font-size:1.06rem;line-height:1.65;color:var(--tinta)}
.bl-corpo blockquote p:last-child{margin-bottom:0}
.bl-corpo a{color:var(--azul);text-decoration:underline;text-underline-offset:3px}
.bl-corpo hr{border:0;border-top:1px solid var(--linha);margin:34px 0}
.bl-corpo ol{margin:0 0 16px;padding-left:22px;display:grid;gap:10px}
.bl-corpo ol li{line-height:1.66;color:var(--cinza)}
.bl-corpo table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.92rem}
.bl-corpo th,.bl-corpo td{border:1px solid var(--linha);padding:11px 13px;text-align:left}
.bl-corpo th{background:var(--cinza-claro);font-weight:600}
.bl-corpo iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--raio-sm);margin:26px 0}

.bl-lateral{position:sticky;top:calc(var(--nav-h,76px) + 20px);display:grid;gap:16px}
.bl-box{background:var(--azul-noite);color:#fff;border-radius:var(--raio);padding:26px 24px}
.bl-box h3{font-size:1.02rem;margin-bottom:8px;color:#fff}
.bl-box p{font-size:.88rem;line-height:1.6;color:#c3cfeb;margin-bottom:18px}
.bl-box-claro{background:#fff;border:1px solid var(--linha);color:var(--tinta)}
.bl-box-claro h3{color:var(--tinta)}
.bl-box-claro p{color:var(--cinza)}

.bl-share{display:flex;align-items:center;gap:10px;padding:4px 2px}
.bl-share span{font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--cinza)}
.bl-share a{width:36px;height:36px;border-radius:50%;border:1px solid var(--linha);
  display:grid;place-content:center;color:var(--cinza);background:#fff;transition:var(--t)}
.bl-share a:hover{border-color:var(--azul);color:var(--azul);transform:translateY(-2px)}
.bl-share svg{width:17px;height:17px}

.bl-relacionados{background:var(--cinza-claro);border-top:1px solid var(--linha)}

/* ------------------------------------------- componentes do layout aprovado

   Card de contorno azul: a peça que a Sarah pediu para manter do mockup.
   Serve a quatro blocos — posts relacionados e categorias na coluna lateral,
   tags e anterior/próximo no pé do artigo.
   ------------------------------------------------------------------------ */

.bl-card{background:#fff;border:1px solid var(--azul);border-radius:var(--raio);
  padding:22px 22px 20px}
.bl-card h3{font-size:1.05rem;color:var(--azul);margin:0 0 14px}

.bl-sem-foto{background:var(--cinza-claro);border:1px solid var(--linha);display:block}

/* Posts relacionados ------------------------------------------------------ */
.bl-lista-posts{list-style:none;margin:0;padding:0}
.bl-lista-posts li + li{border-top:1px solid var(--linha);margin-top:14px;padding-top:14px}
.bl-lista-posts a{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;
  align-items:start;color:inherit}
.bl-lista-posts img,.bl-lista-posts .bl-sem-foto{width:64px;height:56px;object-fit:cover;
  border-radius:8px}
.bl-lista-posts strong{display:block;font-size:.92rem;line-height:1.3;color:var(--tinta);
  transition:var(--t)}
.bl-lista-posts em{display:block;font-style:normal;font-size:.8rem;line-height:1.45;
  color:var(--cinza);margin-top:4px}
.bl-lista-posts a:hover strong{color:var(--azul)}

/* Categorias -------------------------------------------------------------- */
.bl-lista-cats{list-style:none;margin:0;padding:0}
.bl-lista-cats li + li{border-top:1px solid var(--linha)}
.bl-lista-cats a{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 0;font-size:.92rem;font-weight:600;color:var(--tinta);transition:var(--t)}
.bl-lista-cats a:hover,.bl-lista-cats a[aria-current]{color:var(--azul)}
.bl-lista-cats span{font-size:.76rem;font-weight:600;color:var(--cinza);
  background:var(--cinza-claro);border-radius:999px;padding:2px 9px;min-width:26px;
  text-align:center}

/* Pé do artigo: tags e vizinhos, na largura do texto ---------------------- */
/* Alinha com a coluna de texto: 310px de coluna lateral + 56px de gap. */
.bl-rodape-artigo{max-width:1060px;display:grid;gap:16px;margin-top:44px;
  padding-right:calc(24px + 366px)}
.bl-chips{display:flex;flex-wrap:wrap;gap:10px}
.bl-chips a{padding:9px 19px;border-radius:999px;border:1px solid var(--verde);
  font-size:.86rem;font-weight:500;color:var(--tinta);background:#fff;transition:var(--t)}
.bl-chips a:hover{background:var(--verde-soft);border-color:var(--verde-escuro);
  color:var(--verde-escuro)}

.bl-vizinhos{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.bl-vizinho{display:flex;flex-direction:column;gap:12px;color:inherit}
.bl-vizinho.vazio{border:0}
.bl-vizinho-topo{display:grid;grid-template-columns:74px minmax(0,1fr);gap:13px;
  align-items:start}
.bl-vizinho img,.bl-vizinho .bl-sem-foto{width:74px;height:62px;object-fit:cover;
  border-radius:8px}
.bl-vizinho-texto strong{display:block;font-size:1rem;line-height:1.28;color:var(--tinta);
  transition:var(--t)}
.bl-vizinho-texto em{display:block;font-style:normal;font-size:.83rem;line-height:1.45;
  color:var(--cinza);margin-top:5px}
.bl-vizinho:hover .bl-vizinho-texto strong{color:var(--azul)}
.bl-vizinho-rotulo{display:flex;align-items:center;gap:6px;font-size:.86rem;
  color:var(--cinza);margin-top:auto}
/* No layout aprovado só o rótulo vai para a direita; o título e o resumo
   continuam alinhados à esquerda, ao lado da miniatura. */
.bl-vizinho.proximo .bl-vizinho-rotulo{justify-content:flex-end}
.bl-vizinho-rotulo svg{width:15px;height:15px}

/* Aviso de filtro por tag na listagem ------------------------------------- */
.bl-aviso-tag{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin-top:26px;padding:13px 20px;border-radius:var(--raio-sm);
  background:var(--cinza-claro);font-size:.92rem;color:var(--tinta)}
.bl-aviso-tag a{color:var(--azul);font-weight:600}

/* ----------------------------------------------------------- responsivo */

@media(max-width:980px){
  .bl-destaque{grid-template-columns:1fr}
  .bl-destaque-foto{min-height:220px;aspect-ratio:16/9}
  .bl-destaque-texto{padding:28px 26px}
  .bl-colunas{grid-template-columns:1fr;gap:38px}
  .bl-lateral{position:static;grid-template-columns:1fr 1fr;align-items:start}
  .bl-share{grid-column:1/-1}
  .bl-rodape-artigo{padding-right:24px}
}
@media(max-width:640px){
  .bl-lateral{grid-template-columns:1fr}
  /* Dois vizinhos lado a lado num celular deixa cada um com meia palavra por
     linha: viram um embaixo do outro, e o "próximo" volta a alinhar à esquerda. */
  .bl-vizinhos{grid-template-columns:1fr;gap:22px}
  .bl-vizinho.proximo .bl-vizinho-rotulo{justify-content:flex-start}
  .bl-vizinho.vazio{display:none}
  .bl-capa img{aspect-ratio:4/3}
  .bl-artigo-topo{padding-top:calc(var(--nav-h,76px) + 34px)}
}