/* ==========================================================================
   AJUSTES DE MOBILE — 21/09/2026
   Quatro defeitos vistos no iPhone, todos medidos antes de corrigir.
   Este arquivo carrega por último: é ele que manda.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO INTERNO — a compensação do header fixo estava sendo feita duas vezes

   A faixa de folderes (.gr-folder-bar) já empurra todo o conteúdo para baixo
   do header: app.js mede a altura real do header e aplica como margin-top
   nela. O hero somava var(--gr-header-height) de novo no padding-top, o que
   dava 142px de vazio entre o botão "Baixar Folderes" e o breadcrumb.

   Medido em 414px: header 92px + faixa 72px = conteúdo começa em 164px, e o
   hero ainda abria com padding-top de 142,4px.

   A faixa só existe até 1180px, então a correção vive dentro desse limite e
   depende da presença dela no documento — acima disso o hero continua tendo
   de compensar o header sozinho.
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .gr-page-internal .gr-folder-bar ~ main .gr-page-hero {
    padding-top: clamp(2.2rem, 5.5vw, 3.2rem);

    /* 27rem de altura mínima eram meia tela de celular só de capa */
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   2. METADADOS DA MATÉRIA — dois blocos espremidos lado a lado

   O cabeçalho era flex com space-between e sem wrap. Em 342px de largura o
   autor ficava com 139px (três linhas) e a data/leitura/comentários com 140px
   (mais três linhas), e parte ainda saía da tela. Vira uma coisa só: autor em
   cima, informações da publicação embaixo, cada uma na sua linha.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .gr-page-single-news .gr-news-article__header,
  .gr-page-single-action .gr-news-article__header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
  }

  .gr-page-single-news .gr-news-article__author,
  .gr-page-single-action .gr-news-article__author {
    gap: 0.65rem;
    min-width: 0;
  }

  /* o nome cabe numa linha; quem assina vem embaixo, menor */
  .gr-page-single-news .gr-news-article__author div:last-child,
  .gr-page-single-action .gr-news-article__author div:last-child {
    min-width: 0;
  }

  .gr-page-single-news .gr-news-article__author strong,
  .gr-page-single-action .gr-news-article__author strong {
    display: block;
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .gr-page-single-news .gr-news-article__author span,
  .gr-page-single-action .gr-news-article__author span {
    font-size: 0.78rem;
  }

  /* as três informações em linha, alinhadas à esquerda, com respiro */
  .gr-page-single-news .gr-news-article__details,
  .gr-page-single-action .gr-news-article__details {
    justify-content: flex-start;
    gap: 0.4rem 0.9rem;

    padding-top: 0.8rem;
    border-top: 1px solid var(--gr-border, rgba(12, 69, 155, 0.12));

    font-size: 0.8rem;
  }

  .gr-page-single-news .gr-news-article__details > *,
  .gr-page-single-action .gr-news-article__details > * {
    gap: 0.35rem;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   3. BOTÃO DE ENVIAR COMENTÁRIO — quebrava em duas linhas

   As ações do formulário eram flex com space-between e sem wrap: o botão
   ficava com 162px e "Enviar comentário" partia no meio. No celular o botão
   ocupa a linha inteira e o aviso de antispam desce para baixo dele.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .gr-page-single-news .gr-comment-form__actions,
  .gr-page-single-action .gr-comment-form__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }

  .gr-page-single-news .gr-comment-form__actions .gr-btn,
  .gr-page-single-action .gr-comment-form__actions .gr-btn {
    width: 100%;
    white-space: nowrap;
  }

  .gr-page-single-news .gr-comment-form__actions > span,
  .gr-page-single-action .gr-comment-form__actions > span {
    justify-content: center;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   4. LOGO DO RODAPÉ — nove regras disputando o mesmo elemento

   Havia .gr-theme-vs1 .gr-footer__logo { margin: 0 0 1rem } fora de qualquer
   media query, declarada depois do margin-inline:auto do mobile e com a mesma
   especificidade. Dependendo do navegador uma ou outra vencia: no Chrome o
   logo ficava centralizado, no Safari do iPhone ia para a esquerda — enquanto
   o texto e os ícones abaixo já estavam centralizados.

   Aqui a intenção fica declarada uma vez só: no celular, o bloco da marca é
   centralizado inteiro.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .gr-theme-vs1 .gr-footer__brand {
    display: block;
    text-align: center;
  }

  .gr-theme-vs1 .gr-footer__logo {
    margin-right: auto;
    margin-left: auto;
  }

  .gr-theme-vs1 .gr-footer__brand p,
  .gr-theme-vs1 .gr-footer__social-title {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .gr-theme-vs1 .gr-footer .gr-social-links {
    justify-content: center;
  }
}