/**
 * Notícias — listagem. Só o miolo.
 *
 * Reset, base e utilitários vêm de `compartilhado/css/base.css`; topo e rodapé
 * de `topo.css` e `rodape.css`. Esta folha entra depois deles e depois do
 * `tokens.css` desta pasta.
 *
 * Mobile-first. Nenhum valor solto: tudo sai de token — os `--n-*` daqui ou os
 * do compartilhado (`--espaco-*`, `--gutter`, `--container-max`, `--raio-*`,
 * `--dur-*`, `--ease-*`, `--cor-marca-*`, `--cor-foco`).
 */

/* ==========================================================================
   estrutura comum
   ========================================================================== */

.lista {
  background: var(--n-cor-fundo);
  color: var(--n-cor-corpo);
}

.lista__container {
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}

/* Metadados (data • tempo de leitura) — mesmo desenho no destaque e no card,
   por isso vive solto e não dentro de um bloco. */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--n-texto-meta);
  color: var(--n-cor-apoio);
}

/* Chip de categoria. A cor chega no `--acento` do HTML: é CONTEÚDO (qual tema
   a matéria tem), não decisão de estilo — mesma exceção da cor de pill dos
   Materiais na /campanha. */
.chip {
  display: inline-block;
  padding: 0.1875rem 0.625rem;
  font-size: var(--n-texto-chip);
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--n-cor-manchete);
  background: color-mix(in srgb, var(--acento, var(--n-cor-chapeu)) 22%, transparent);
  border-inline-start: 3px solid var(--acento, var(--n-cor-chapeu));
  border-radius: var(--raio-s);
}

/* O chip virou link para a página do tema. Sem sublinhado porque a forma de
   pilha já diz que é alvo; o hover assume a cor cheia do acento para dar o
   retorno que o sublinhado daria. */
a.chip {
  text-decoration: none;
  transition: background-color var(--dur-rapida) var(--ease-padrao);
}

a.chip:hover {
  background: color-mix(in srgb, var(--acento, var(--n-cor-chapeu)) 40%, transparent);
}

/* ==========================================================================
   cabeçalho da página + busca
   ========================================================================== */

.lista__cabecalho {
  padding-block: var(--espaco-6) var(--espaco-5);
}

.lista__selo {
  font-family: var(--fonte-titulo);
  font-size: var(--n-texto-chip);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--n-cor-selo);
}

.lista__titulo {
  margin-top: var(--espaco-2);
  font-family: var(--fonte-titulo);
  font-size: var(--n-texto-titulo-pagina);
  font-weight: 900;
  line-height: var(--n-lh-titulo);
  text-transform: uppercase;
  color: var(--n-cor-manchete);
}

.lista__apoio {
  max-width: 52ch;
  margin-top: var(--espaco-3);
  font-size: var(--n-texto-resumo);
  line-height: var(--n-lh-corpo);
  color: var(--n-cor-apoio);
}

/* Três colunas — ícone, campo, botão. O `<label>` é `.so-leitor`, que é
   absoluto, então não conta como item da grade. */
.lista__busca {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  max-width: 34rem;
  margin-top: var(--espaco-4);
  padding: 0.375rem 0.375rem 0.375rem 0.875rem;
  background: var(--n-cor-superficie);
  border: 1px solid var(--n-cor-borda);
  border-radius: 999px;
}

/* O anel de foco vai no contêiner, não no input: o campo não tem borda própria
   e o outline dele ficaria escondido dentro da pílula. */
.lista__busca:focus-within {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
}

.lista__busca-icone {
  display: grid;
  place-items: center;
  color: var(--n-cor-apoio);
}

.lista__busca-campo {
  min-width: 0;
  min-height: 44px;
  font: inherit;
  font-size: var(--n-texto-resumo);
  color: inherit;
  background: none;
  border: 0;
}

.lista__busca-campo:focus {
  outline: none; /* o anel está no contêiner, acima */
}

.lista__busca-enviar {
  min-height: 44px;
  padding-inline: var(--espaco-4);
  font-family: var(--fonte-titulo);
  font-size: var(--n-texto-chip);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: var(--cor-marca-secundaria);
  border-radius: 999px;
  transition: transform var(--dur-rapida) var(--ease-padrao);
}

.lista__busca-enviar:hover {
  transform: scale(1.04);
}

/* Em tela estreita o botão desce para a própria linha; senão sobram ~4rem para
   digitar. */
@media (width < 30rem) {
  .lista__busca {
    border-radius: var(--raio-g);
  }

  .lista__busca-enviar {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

/* ==========================================================================
   destaque principal
   ========================================================================== */

.destaque {
  padding-block: var(--espaco-3) var(--espaco-6);
}

/*
 * A página é branca e o card também: a sombra sozinha não desenha mais o
 * limite. Quem faz isso agora é a borda — e a tarja de categoria continua por
 * cima dela, porque `border-top` vem depois na cascata.
 */
.destaque__card {
  display: grid;
  background: var(--n-cor-superficie);
  border: 1px solid var(--n-cor-borda);
  border-radius: var(--n-raio);
  box-shadow: var(--n-sombra);
  overflow: hidden;
  /* tarja da categoria, no topo
  border-top: 5px solid var(--acento, var(--cor-marca-secundaria)); */
}

.destaque__foto {
  display: block;
  background: var(--n-cor-borda);
}

/* `height: 100%` junto de `aspect-ratio` briga: no desktop a coluna do texto
   é mais alta e a imagem esticava para acompanhar. A proporção manda, e o
   `cover` corta o excedente. */
.destaque__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.destaque__corpo {
  display: grid;
  gap: var(--espaco-3);
  align-content: start;
  padding: var(--espaco-4);
}

.destaque__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--n-texto-destaque);
  font-weight: 900;
  line-height: var(--n-lh-titulo);
  color: var(--n-cor-manchete);
}

.destaque__titulo a,
.cartao__titulo a {
  color: inherit;
  text-decoration: none;
}

.destaque__titulo a:hover,
.cartao__titulo a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.destaque__resumo {
  max-width: 62ch;
  font-size: var(--n-texto-resumo);
  line-height: var(--n-lh-corpo);
}

/* A partir de 52rem o destaque vira duas colunas com a foto no lado maior — é
   o que o diferencia dos cards da grade. */
@media (width >= 52rem) {
  .destaque__card {
    grid-template-columns: 3fr 2fr;
    align-items: stretch;
  }

  .destaque__corpo {
    padding: var(--espaco-5);
    align-content: center;
  }

  /* Aqui a coluna do texto é quem manda na altura: a foto acompanha e o
     `cover` corta o excedente, em vez de deixar faixa vazia embaixo. */
  .destaque__foto,
  .destaque__foto img {
    height: 100%;
  }

  .destaque__foto img {
    aspect-ratio: auto;
  }
}

/* ==========================================================================
   filtros
   ========================================================================== */

.grade {
  padding-block: 0 var(--espaco-7);
}

.grade__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--n-texto-destaque);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--n-cor-manchete);
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--espaco-3);
}

/* `<a>` desde 15/08/2026 — cada tema é uma página. Daí o `inline-flex` e o
   `text-decoration: none`: um link não herda o alinhamento nem a ausência de
   sublinhado que o `<button>` trazia de graça. A altura de 44px continua sendo
   o alvo mínimo de toque. */
.filtro {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--espaco-3);
  font-size: var(--n-texto-chip);
  font-weight: 600;
  text-decoration: none;
  color: var(--n-cor-corpo);
  background: var(--n-cor-superficie);
  border: 1px solid var(--n-cor-borda);
  border-radius: 999px;
  transition:
    background-color var(--dur-rapida) var(--ease-padrao),
    border-color var(--dur-rapida) var(--ease-padrao);
}

.filtro:hover {
  border-color: var(--acento, var(--cor-marca-secundaria));
}

/* Tema aberto. Não é só cor: a borda engrossa e o peso muda, para continuar
   legível em alto contraste e para quem não distingue cor. */
.filtro[aria-current='page'] {
  font-weight: 800;
  color: var(--n-cor-manchete);
  background: color-mix(in srgb, var(--acento, var(--cor-marca-secundaria)) 24%, transparent);
  border: 2px solid var(--acento, var(--cor-marca-secundaria));
}

.grade__contador {
  margin-top: var(--espaco-3);
  font-size: var(--n-texto-meta);
  color: var(--n-cor-apoio);
}

/* ==========================================================================
   grade de cards
   ========================================================================== */

.grade__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--n-card-min), 1fr));
  gap: var(--espaco-4);
  margin: var(--espaco-4) 0 0;
  padding: 0;
  list-style: none;
}

.cartao {
  display: flex;
  flex-direction: column;
  background: var(--n-cor-superficie);
  border: 1px solid var(--n-cor-borda);
  border-radius: var(--n-raio);
  box-shadow: var(--n-sombra);
  overflow: hidden;
  transition:
    transform var(--dur-rapida) var(--ease-padrao),
    box-shadow var(--dur-rapida) var(--ease-padrao);
}

.cartao:hover {
  transform: translateY(-3px);
  box-shadow: var(--n-sombra-alta);
}

.cartao__foto {
  display: block;
  background: var(--n-cor-borda);
  /*border-top: 4px solid var(--acento, var(--cor-marca-secundaria));*/
}

.cartao__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.cartao__corpo {
  display: grid;
  gap: 0.625rem;
  align-content: start;
  /* cresce para os cards da mesma linha terminarem juntos */
  flex: 1;
  padding: var(--espaco-3);
}

.cartao__titulo {
  font-size: var(--n-texto-card);
  font-weight: 800;
  line-height: 1.25;
  color: var(--n-cor-manchete);
}

.cartao__resumo {
  font-size: var(--n-texto-resumo);
  line-height: var(--n-lh-corpo);
}

/* A meta encosta no fim do card, alinhada entre os vizinhos. */
.cartao .meta {
  margin-top: auto;
  padding-top: 0.25rem;
}

.lista__ligacao a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  font-size: var(--n-texto-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--n-cor-chapeu);
  text-decoration: none;
}

.lista__ligacao a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- vazio ---------- */

.grade__vazio {
  margin-top: var(--espaco-5);
  font-size: var(--n-texto-resumo);
  line-height: var(--n-lh-corpo);
  color: var(--n-cor-apoio);
}

.grade__vazio a {
  color: var(--n-cor-chapeu);
  text-underline-offset: 3px;
}

/* ==========================================================================
   paginação
   --------------------------------------------------------------------------
   Substituiu o `.botao-mais`, que era o "carregar mais" por AJAX. O cache de
   borda devolvia sempre a mesma leva e a listagem não avançava; uma URL por
   página é o que o cache guarda sem estragar.

   Nunca houve estilo para `.paginacao` nesta base — o `partes/paginacao.php`
   existia desde o começo, mas só a busca e o arquivo caíam nele, e ninguém
   olhou. Sobem sem folha própria até hoje se `inc/contexto.php` não mapear.
   ========================================================================== */

.paginacao {
  margin-top: var(--espaco-6);
}

.paginacao__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Mesmo alvo de 44px dos filtros, e quadrado: número em pílula fica largo
   demais quando o acervo passa de dois dígitos. */
.paginacao .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--espaco-2);
  font-size: var(--n-texto-chip);
  font-weight: 700;
  text-decoration: none;
  color: var(--n-cor-manchete);
  background: var(--n-cor-superficie);
  border: 1px solid var(--n-cor-borda);
  border-radius: var(--n-raio);
  transition:
    color var(--dur-rapida) var(--ease-padrao),
    background-color var(--dur-rapida) var(--ease-padrao),
    border-color var(--dur-rapida) var(--ease-padrao);
}

.paginacao a.page-numbers:hover {
  border-color: var(--n-cor-chapeu);
  background: color-mix(in srgb, var(--n-cor-chapeu) 10%, transparent);
}

/* A página atual é `<span>`, não `<a>`: preenchida, e não só grifada, porque
   contraste de cor sozinho não distingue para quem não enxerga cor. */
.paginacao .page-numbers.current {
  color: #fff;
  background: var(--n-cor-manchete);
  border-color: var(--n-cor-manchete);
}

/* "Anterior" e "Próxima" são palavras, não números — precisam de largura. */
.paginacao .prev,
.paginacao .next {
  padding-inline: var(--espaco-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* As reticências não são alvo: nem borda, nem fundo, nem alvo de toque. */
.paginacao .dots {
  min-width: auto;
  color: var(--n-cor-apoio);
  background: none;
  border-color: transparent;
}

/* ==========================================================================
   ponte para a agenda
   ========================================================================== */

.ponte {
  padding-block: var(--espaco-6) var(--espaco-7);
  background: var(--cor-marca-secundaria);
  color: #fff;
}

.ponte__caixa {
  display: grid;
  gap: var(--espaco-4);
  align-items: center;
}

.ponte__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--n-texto-destaque);
  font-weight: 900;
  text-transform: uppercase;
}

.ponte__texto {
  max-width: 52ch;
  margin-top: var(--espaco-2);
  font-size: var(--n-texto-resumo);
  line-height: var(--n-lh-corpo);
}

.ponte__acao {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.5rem;
  min-height: 48px;
  padding-inline: var(--espaco-5);
  font-family: var(--fonte-titulo);
  font-size: var(--n-texto-chip);
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cor-marca-secundaria);
  background: #fff;
  border-radius: 999px;
  transition: transform var(--dur-rapida) var(--ease-padrao);
}

.ponte__acao:hover {
  transform: scale(1.04);
}

/* O anel de foco padrão é azul e sumiria sobre esta faixa azul. */
.ponte a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (width >= 48rem) {
  .ponte__caixa {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cartao,
  .filtro,
  a.chip,
  .paginacao .page-numbers,
  .ponte__acao,
  .lista__busca-enviar {
    transition: none;
  }

  .cartao:hover {
    transform: none;
  }
}

/* ==========================================================================
   Página especial (taxonomia `pagina-especial`)
   --------------------------------------------------------------------------
   Esta folha serve também às páginas especiais, que reaproveitam o vocabulário
   da listagem (`.lista`, `.grade`, `.cartao`). Só a capa precisa de regra
   própria: sem ela a imagem sai na altura natural do arquivo — a do editorial
   tem 1218px e empurra a página inteira para fora da dobra.
   ========================================================================== */

.especial__capa {
  margin: 0;
  /* Faixa larga, não retrato. `aspect-ratio` + `object-fit` recortam sem
     depender de o arquivo ter a proporção certa — e quem sobe a capa não
     deveria precisar saber disso. */
  aspect-ratio: 1920 / 720;
  overflow: hidden;
}

.especial__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Alto: o assunto de foto de campanha costuma estar na metade de cima. */
  object-position: center 35%;
  display: block;
}

@media (max-width: 48rem) {
  /* No estreito a faixa fica alta demais em proporção: mais quadrada. */
  .especial__capa {
    aspect-ratio: 4 / 3;
  }
}

/* ---- ladrilhos de app da página especial ---- */

.especial__apps {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.especial__ladrilhos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.ladrilho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  /* 44px de alvo mínimo já vêm do padding + ícone; o texto não encosta na
     borda em nenhuma largura. */
  padding: 1rem 0.5rem;
  border: 1px solid var(--n-cor-borda);
  border-radius: var(--n-raio);
  background: var(--n-cor-superficie);
  color: var(--n-cor-corpo);
  text-decoration: none;
  text-align: center;
  transition: transform 160ms ease, border-color 160ms ease;
}

.ladrilho:hover {
  /* O acento vem do termo, então cada página especial destaca na cor dela. */
  border-color: var(--acento);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .ladrilho {
    transition: none;
  }
  .ladrilho:hover {
    transform: none;
  }
}

.ladrilho__icone {
  width: clamp(3.5rem, 7vw, 5rem);
  height: auto;
  border-radius: 18px;
}

.ladrilho__rotulo {
  font-size: var(--n-texto-meta);
  font-weight: 700;
  line-height: 1.2;
}