/* =====================================================================
   Noticiário IA — ajustes para telas pequenas e toque

   Este ficheiro contém APENAS regras dentro de media queries `max-width`,
   `hover: none` ou `prefers-reduced-motion`. Nada aqui altera o layout de
   desktop: é carregado depois de style.css e main.css justamente para que
   qualquer correção fique contida na faixa de largura a que se destina.

   Larguras de referência validadas: 320, 360, 390, 414, 480, 600 e 768 px.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Até 1023 px — tablets e celulares
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
    /* O cabeçalho é mais baixo sem a barra de busca fixa: a âncora acompanha */
    html {
        scroll-padding-top: 72px;
    }

    /* Nada deve empurrar a página para os lados. Elementos de largura fixa
       (imagens antigas com width=, incorporações, código) ficam contidos. */
    img,
    video,
    iframe,
    canvas,
    svg:not(.icone):not(.marca-simbolo) {
        max-width: 100%;
        height: auto;
    }

    pre,
    code {
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }

    /* URLs longas no corpo do texto e nas fontes não estouram a coluna */
    .texto a,
    .lista-fontes a,
    .glossario-aliases,
    .comentario-texto {
        overflow-wrap: anywhere;
    }
}

/* ---------------------------------------------------------------------
   2. Até 767 px — celulares
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Tipografia: títulos grandes de desktop ficam desconfortáveis aqui */
    .titulo-pagina {
        font-size: clamp(1.55rem, 7vw, 2.1rem);
        line-height: 1.2;
    }

    .artigo-titulo {
        font-size: clamp(1.7rem, 7.5vw, 2.3rem);
        line-height: 1.18;
    }

    .artigo-linha-fina {
        font-size: 1.05rem;
    }

    .texto {
        font-size: 1.08rem;
        line-height: 1.7;
    }

    .secao-titulo {
        font-size: 1.3rem;
    }

    /* Ferramentas do artigo: duas filas legíveis em vez de uma apertada */
    .artigo-ferramentas {
        gap: .5rem .4rem;
    }

    .artigo-meta {
        gap: .85rem;
    }

    /* Compartilhar e botões de ícone: alvo de toque de 44px */
    .partilha .botao-icone,
    .botao-icone,
    .botao-ferramenta {
        min-width: 44px;
        min-height: 44px;
    }

    .partilha {
        gap: .4rem;
    }

    /* Listas de etiquetas e índices: alvos maiores e espaçados */
    .lista-tags a,
    .glossario-indice a,
    .lista-tendencias a,
    .rodape-coluna a,
    .paginacao a,
    .paginacao span {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .lista-tags,
    .glossario-indice {
        gap: .5rem;
    }

    /* Paginação: rola na horizontal em vez de quebrar em várias linhas */
    .paginacao ul {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        flex-wrap: nowrap;
        scrollbar-width: none;
        padding-bottom: .25rem;
    }

    .paginacao ul::-webkit-scrollbar {
        display: none;
    }

    /* Formulários: 16px evita o zoom automático do iOS ao focar um campo */
    input,
    select,
    textarea {
        font-size: max(1rem, 16px);
    }

    /* Botão de voltar ao topo acima da área de gestos do sistema */
    .voltar-topo {
        right: .75rem;
        bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    }

    /* Cartões e caixas: menos preenchimento, mais texto visível */
    .resumo-rapido,
    .contexto-editorial,
    .fontes-metodo,
    .glossario-card,
    .bloco {
        padding-inline: 1rem;
    }

    /* Grades que ainda assumiam duas colunas passam a uma */
    .grade-cartoes,
    .grade-4,
    .galeria-grade {
        grid-template-columns: 1fr;
    }

    /* Editor de sugestão de edição: altura utilizável sem esconder o resto */
    .form-revisao #revisao-conteudo {
        min-height: 60vh;
        font-size: max(.95rem, 16px);
    }

    /* Menu "Seções": painel rolável em vez de empurrar a página */
    .menu-secoes-painel {
        max-height: 70vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Faixa rolável do menu: o contorno de foco fica dentro do link (a rolagem
       cortaria um contorno externo) e, quando o navegador rola até o link
       focado, deixa folga das bordas esfumadas. O navegador só rola se o link
       estiver todo fora da faixa; o main.js traz também os parcialmente visíveis. */
    .menu-lista {
        scroll-padding-inline: 2.5rem;
    }

    .menu-lista a:focus-visible {
        outline-offset: -3px;
    }
}

/* ---------------------------------------------------------------------
   3. Até 479 px — telas estreitas (360 px e abaixo)
   --------------------------------------------------------------------- */
@media (max-width: 479px) {
    .lista-semana li {
        grid-template-columns: 1.9rem 1fr;
        gap: .6rem;
    }

    .lista-semana-numero {
        font-size: 1.25rem;
    }

    .glossario-alfabeto {
        gap: .3rem;
    }

    .glossario-alfabeto a {
        min-width: 40px;
    }

    /* Chapéus e selos: quebram em duas linhas em vez de estreitar o título */
    .chapeu,
    .artigo-rotulos {
        flex-wrap: wrap;
        gap: .35rem;
    }

    /* Cartões em lista: imagem menor para o título sobrar */
    .cartao-lista .cartao-midia {
        width: 110px;
    }

    .form-acoes .botao,
    .form-acoes button[type="submit"] {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------
   4. Aparelhos sem ponteiro fino (toque)
   --------------------------------------------------------------------- */
@media (hover: none) {
    /* A dica do glossário abre no toque (ver assets/js/main.js): o cursor de
       ajuda não faz sentido, e o sublinhado pontilhado já sinaliza o termo. */
    .termo-glossario {
        cursor: pointer;
    }

    /* Links do corpo do texto ganham área de toque sem mudar a entrelinha */
    .texto a {
        padding-block: .15em;
    }

    /* Rolagem horizontal com inércia nas faixas do menu e das tabelas */
    .menu-lista,
    .tabela-rolagem,
    .faixa-destaques {
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------------------------------------------------------------------
   5. Movimento reduzido (complementa a regra de style.css)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .voltar-topo,
    .botao,
    .botao-icone {
        transition: none;
    }
}