/* ------------------------------------------------------------------
   Correções de responsividade das páginas do blog.

   Problema 1: o cabeçalho do blog não possui o botão hambúrguer (.tog)
   que existe na home. A regra @media(max-width:760px) do site.css esconde
   o .nl e mostra o .tog — como o .tog não existe aqui, o blog ficava
   SEM NENHUMA navegação no celular. Entre 761px e ~900px o menu também
   estourava a lateral da tela.

   Problema 2: a capa do artigo (img.cover) herdava o transform 3D da
   regra .cover do site.css, feita para as capas de ebook. Uma imagem
   de 100% de largura rotacionada em rotateY(-15deg) com origem à
   esquerda estourava ~96px para fora do viewport.
   ------------------------------------------------------------------ */

/* --- cabeçalho --- */
#navblog .ni{flex-wrap:wrap;gap:16px}

@media(max-width:980px){
  #navblog .nl{gap:18px}
  #navblog .nl a{font-size:13.5px}
  #navblog .nr .btn{padding:10px 16px;font-size:13px}
}

@media(max-width:860px){
  #navblog .nr{display:none}           /* o menu importa mais que o CTA */
}

@media(max-width:760px){
  #navblog .nl{display:flex !important;order:3;width:100%;gap:20px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
  #navblog .nl::-webkit-scrollbar{display:none}
  #navblog .nl a{font-size:13px;white-space:nowrap;padding-bottom:0}
  #navblog .nl a::after{display:none}
  #navblog .ni{padding-block:12px;gap:10px}
  #navblog .brand__s{display:none}
  #navblog .brand__n{font-size:16px}
  body{padding-top:104px}
}

@media(max-width:420px){
  #navblog .brand__img{width:30px;height:30px}
  #navblog .brand__n{font-size:15px}
  #navblog .nl{gap:17px}
}

/* --- capa do artigo --- */
article.post img.cover,
.blog-wrap img.cover,
.blog-list-wrap img.cover{
  transform:none !important;
  transform-origin:center !important;
  box-shadow:none !important;
  align-self:auto !important;
  width:100% !important;
  max-width:100%;
  height:auto;
  border-radius:14px;
}

/* --- CTA dentro do artigo ---
   O .btn tem white-space:nowrap e, com texto longo, ficava mais largo
   que o .cta-box em telas de 320px. */
@media(max-width:520px){
  article.post .cta-box .btn,
  .blog-wrap .cta-box .btn,
  article.post .btn{
    white-space:normal;
    max-width:100%;
    text-align:center;
    line-height:1.35;
  }
}

/* --- alvos de toque no celular (WCAG 2.5.8: mínimo 24px, recomendado 44px) --- */
@media(max-width:760px){
  #navblog .nl a{
    display:inline-flex;
    align-items:center;
    min-height:40px;
  }
}