/*
  noticias.css
  Estilos compartilhados pelas páginas de listagem e detalhe de Notícias e
  de Fotos e Coberturas (noticias.html, noticia.html, coberturas.html,
  cobertura.html) — todas seguem o mesmo padrão visual de listagem/detalhe.
*/

.adjuto-listing-header {
  padding-block: var(--adjuto-space-7) var(--adjuto-space-5);
  background: var(--adjuto-color-blue-lighter);
}

.adjuto-listing-toolbar {
  display: grid;
  gap: var(--adjuto-space-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--adjuto-space-6);
  align-items: end;
}

@media (min-width: 700px) {
  .adjuto-listing-toolbar {
    grid-template-columns: repeat(3, 1fr);
  }
}

.adjuto-listing-toolbar__count {
  font-size: var(--adjuto-font-size-sm);
  color: var(--adjuto-color-text-muted);
  grid-column: 1 / -1;
}

.adjuto-listing-grid {
  display: grid;
  gap: var(--adjuto-space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .adjuto-listing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .adjuto-listing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== Detalhe (notícia individual / cobertura individual) ===== */
.adjuto-detail-header {
  padding-block: var(--adjuto-space-6) var(--adjuto-space-5);
}

.adjuto-detail-header__eyebrow {
  color: var(--adjuto-color-navy-700);
  font-weight: 700;
  font-size: var(--adjuto-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.adjuto-detail-header__meta {
  color: var(--adjuto-color-text-muted);
  font-size: var(--adjuto-font-size-sm);
}

.adjuto-detail-image-wrap {
  border-radius: var(--adjuto-radius-lg);
  overflow: hidden;
  box-shadow: var(--adjuto-shadow-md);
  aspect-ratio: 16 / 9;
  margin-bottom: var(--adjuto-space-6);
}

.adjuto-detail-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.adjuto-detail-body {
  max-width: 68ch;
}

.adjuto-detail-body p {
  margin-bottom: var(--adjuto-space-4);
}

.adjuto-detail-source {
  font-size: var(--adjuto-font-size-sm);
  color: var(--adjuto-color-text-muted);
  border-top: 1px solid var(--adjuto-color-border);
  padding-top: var(--adjuto-space-4);
  margin-top: var(--adjuto-space-6);
}

.adjuto-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--adjuto-space-3);
  margin-top: var(--adjuto-space-6);
}

.adjuto-detail-related {
  margin-top: var(--adjuto-space-8);
}

.adjuto-detail-related__title {
  margin-bottom: var(--adjuto-space-5);
}

/* ==========================================================================
   Notícia individual — refino editorial
   Ajustes de leitura, não redesenho. A página já funcionava; o que faltava
   era hierarquia entre título, capa e texto, e um título longo não podia
   tomar a tela inteira antes de a matéria começar.
   ========================================================================== */

/* Título: escala com a viewport e para de crescer. Sem o clamp, um título de
   quatro linhas empurrava o começo do texto para fora da primeira tela. */
.adjuto-detail-header h1,
.adjuto-detail-header__title {
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 34ch;
  margin-block: var(--adjuto-space-3) var(--adjuto-space-2);
}

/* Metadados numa linha só, separados por ponto, em vez de blocos soltos. */
.adjuto-detail-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.adjuto-detail-header__meta > * + *::before {
  content: "•";
  margin-right: 0.5rem;
  opacity: 0.55;
}

/* Capa: proporção mais editorial e sombra mais discreta. 16/9 com sombra
   forte fazia a imagem competir com o título em vez de apoiá-lo. */
.adjuto-detail-image-wrap {
  aspect-ratio: 3 / 2;
  box-shadow: var(--adjuto-shadow-sm, 0 1px 2px rgba(16, 31, 57, 0.06));
  max-height: 60vh;
}

/* Corpo: medida de leitura e ritmo vertical.

   A medida subiu de 66ch para 82ch por causa da composição lateral abaixo: a
   imagem ocupa 45% dela, e com 66ch o texto ao lado caía para cerca de 33
   caracteres — coluna de classificado, não de matéria. Com 82ch a imagem
   ganha presença real e o texto ao lado fica na casa dos 45 caracteres, que é
   largura de coluna de jornal. Depois que a imagem termina, o texto volta aos
   82ch, um pouco acima do ideal de leitura corrida, e é por isso que o
   line-height generoso de 1.75 fica como está: ele é o que sustenta a linha
   mais longa. */
/* A medida vive numa propriedade só, e em rem de propósito: `ch` resolve
   contra a fonte de CADA elemento, e a capa e o corpo têm tamanhos de fonte
   diferentes. Com ch, os 45% da imagem eram calculados sobre um "82ch" que
   não era o mesmo 82ch do corpo, e ela saía a 42% da medida. rem é
   relativo à raiz: os dois chegam ao mesmo número. 56rem ≈ 82 caracteres na
   fonte do corpo. */
/* A medida vive no wrapper da página, não nos filhos. Declarada só no corpo
   e na imagem, ela não existia no .adjuto-container — o calc() do container
   virava inválido e derrubava o max-width inteiro, jogando o container para
   100% da viewport. Era daí que vinha o vazio azul ao lado da manchete. */
#adjuto-noticia-content {
  /* 60rem = 960px, e este número é o resultado de uma medição, não de gosto.

     Com float, a FAIXA da composição é igual à largura do corpo — a imagem
     flutua dentro da medida. Então faixa larga e cauda estreita não coexistem:
     é o mesmo número.

     Medi as 24 matérias que estão no ar: 20 delas passam da altura da foto.
     A cauda não é exceção, é a maior parte da leitura. Numa faixa de 1240 a
     cauda sairia a 110 caracteres por linha, e a maior parte do texto do site
     ficaria ilegível para ganhar largura.

     A 64rem (1024px): ao lado da foto dá ~43 caracteres, que é coluna de
     jornal; depois da foto dá ~94, que o line-height de 1.75 sustenta com
     esforço. É o teto: cada rem a mais alarga a cauda na mesma proporção, e
     a cauda é onde mora a maior parte do texto. */
  /* DUAS medidas, e é o ponto de toda esta seção.

     Enquanto a composição era float, faixa e cauda eram forçosamente o mesmo
     número — a imagem flutuava dentro do corpo, então a largura do bloco ERA
     a largura do parágrafo. Dava para ter desktop ocupado ou texto legível,
     nunca os dois. Com o bloco inicial em grid, a cauda virou um elemento
     separado e pode ter medida própria.

     CANVAS (76rem = 1216px) manda no hero, no container e no bloco inicial:
     é o que dá presença à página. Numa tela de 1440 sobram 88px de margem de
     cada lado.

     CORPO (56rem = 896px ≈ 82 caracteres) manda só no texto que continua
     abaixo. Ele não cresce junto com o canvas, e é isso que impede a cauda de
     ir a 110 caracteres por linha — o defeito que travava as versões
     anteriores. */
  --adjuto-canvas-materia: 76rem;
  --adjuto-medida-corpo: 56rem;
}

/* Com float, a FAIXA da composição é a largura do corpo: a imagem flutua
   dentro dele. Por isso o corpo usa o canvas, e não uma medida menor — foi a
   consequência assumida ao escolher o float. */
.adjuto-detail-body {
  max-width: var(--adjuto-canvas-materia);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 1.75;
}

/* A manchete acompanha a grade da matéria.

   Ela estava presa a 34ch — cerca de 710px — dentro de um hero bem mais
   largo, e sobrava faixa azul vazia à direita enquanto o título quebrava em
   cinco linhas. 54rem (864px) é largura de manchete de portal: o título real
   de 132 caracteres cai para três linhas sem que a fonte precise crescer, e
   ainda restam ~220px de respiro até a borda do canvas. Subiu de 54rem
   quando o canvas passou a 76rem: a manchete acompanha a grade, em vez de
   ficar sendo o elemento mais estreito de um hero largo.

   Fica em noticias.css e não em campaign.css porque aqui já estamos no
   contexto da matéria; a regra de campanha continua valendo para listagem e
   materiais, que têm títulos curtos. Por isso o seletor repete o
   :root[data-site-mode] — sem isso a regra de campanha vence por
   especificidade. */
:root[data-site-mode="officialCampaign"] .adjuto-detail-header h1,
.adjuto-detail-header h1 {
  max-width: min(100%, 62rem);
}

/* ==========================================================================
   COMPOSIÇÃO EDITORIAL: A CAPA FLUTUA, O TEXTO ABRAÇA

   Esta página passou por float, depois grid, e voltou ao float — por decisão
   visual, não por engano. Vale registrar o porquê, porque a diferença é sutil
   e alguém vai querer "consertar" isto de novo.

   O grid punha a foto e o primeiro parágrafo lado a lado e mandava o resto
   para baixo. Garantia que nenhum parágrafo mudasse de largura no meio, ao
   preço de deixar espaço vazio ao lado da foto sempre que o parágrafo inicial
   fosse curto, e de dar à página um aspecto modular, de blocos independentes.

   O float faz o texto contornar a fotografia e retomar a largura inteira
   quando ela termina — inclusive no meio de um parágrafo. Essa ruptura foi
   comparada em A/B e ACEITA: em troca dela vêm o aproveitamento da altura da
   foto, menos branco e a fluidez de página de revista. Não é bug.

   O que o float cobra em contrapartida está logo abaixo: tudo que vem depois
   da matéria precisa limpar o float explicitamente, ou sobe para o lado da
   fotografia numa matéria curta.
   ========================================================================== */
@media (min-width: 980px) {
  /* O container acompanha o canvas. O hero usa o mesmo cálculo, então hero,
     foto e corpo ficam no mesmo eixo e a página lê como uma composição só. */
  .adjuto-detail-header .adjuto-container,
  .adjuto-section:has(.adjuto-detail-image-wrap) .adjuto-container {
    max-width: min(
      calc(var(--adjuto-canvas-materia) + 2 * var(--adjuto-space-5)),
      92vw
    );
  }

  .adjuto-detail-image-wrap {
    float: left;
    width: 52%;
    /* margem direita é o gap da composição; a de baixo dá respiro às linhas
       que passarem por baixo da foto */
    margin-right: 2.5rem;
    margin-bottom: var(--adjuto-space-4);
    max-width: calc(var(--adjuto-canvas-materia) * 0.52);
  }

  /* Justificado só no desktop, e só com hifenização junto.

     Medi o déficit natural de cada linha antes de ligar isto: na coluna ao
     lado da foto, 541px, a média é 4% e a pior linha 12% — cerca de 65px
     distribuídos por umas oito palavras. Na coluna larga o déficit é 1%. São
     números pequenos, e é por isso que justificar aqui não abre buracos.

     hyphens depende do idioma declarado, e o documento é lang="pt-BR": sem
     isso o navegador não sabe onde partir a palavra e o justificado piora em
     vez de melhorar.

     A última linha de cada parágrafo continua alinhada à esquerda, que é o
     padrão de text-align-last e o comportamento tipográfico correto.

     No mobile fica alinhado à esquerda: coluna estreita com justificação
     produz exatamente os rios de espaço que esta regra evita no desktop. */
  .adjuto-detail-body > p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Nada disto participa da composição. Sem o clear, numa matéria curta a
     fonte e os botões subiriam para o espaço que sobra ao lado da foto. */
  .adjuto-detail-source,
  .adjuto-detail-actions,
  .adjuto-detail-related,
  .adjuto-detail-body .adjuto-cobertura {
    clear: both;
  }
}

/* Ritmo entre parágrafos.

   O padrão herdado dava 1rem — cerca de 0,93em nesta tipografia — e, com o
   line-height de 1.75, os parágrafos liam como blocos separados em vez de
   texto corrido. 0.8em separa com clareza sem fragmentar. Zerar a margem de
   baixo e usar só a de cima torna o espaçamento previsível, em vez de
   depender de colapso entre regras de arquivos diferentes. Sem indentação de
   primeira linha. */
.adjuto-detail-body > p {
  margin-bottom: 0;
}
.adjuto-detail-body > p + p {
  margin-top: 0.8em;
}
.adjuto-detail-body > p:first-child {
  font-size: 1.1em;
  line-height: 1.65;
}

/* O carrossel acompanha a medida de leitura em vez de romper a coluna. */
.adjuto-detail-body .adjuto-cobertura {
  max-width: 100%;
}

/* Fonte e ações com separação clara do corpo. */
/* Fonte e ações pertencem ao texto, não à composição: acompanham a medida do
   corpo. As relacionadas são uma vitrine de cards e ficam no canvas, onde
   cabem três por linha. */
.adjuto-detail-source {
  max-width: var(--adjuto-medida-corpo);
  margin-top: var(--adjuto-space-6);
  padding-top: var(--adjuto-space-4);
  border-top: 1px solid var(--adjuto-color-border, rgba(12, 47, 110, 0.12));
}
.adjuto-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: var(--adjuto-space-4);
}

/* Relacionadas e respiro antes do rodapé. */
.adjuto-detail-related {
  margin-top: var(--adjuto-space-8, 4rem);
  padding-top: var(--adjuto-space-6);
  border-top: 1px solid var(--adjuto-color-border, rgba(12, 47, 110, 0.12));
  padding-bottom: var(--adjuto-space-8, 4rem);
}

@media (max-width: 640px) {
  .adjuto-detail-header h1,
  .adjuto-detail-header__title { max-width: 100%; }
  .adjuto-detail-image-wrap { aspect-ratio: 4 / 3; max-height: 48vh; }
}

/* ==========================================================================
   Link dentro do corpo da notícia
   ==========================================================================
   Vale tanto para a âncora que o editor criou no Gutenberg quanto para a URL
   que o autolink transforma — as duas saem com a mesma classe, e devem ser
   indistinguíveis para quem lê.

   O foco ganha contorno próprio: o link herdava do site um `outline: none` e
   ficava invisível para quem navega por teclado, que é justamente quem mais
   depende do indicador. */
.adjuto-noticia__link {
  color: var(--adjuto-campaign-ink, #114093);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: text-decoration-thickness 0.12s ease, color 0.12s ease;
}
.adjuto-noticia__link:hover {
  color: #0d3272;
  text-decoration-thickness: 2px;
}
.adjuto-noticia__link:focus-visible {
  outline: 2px solid var(--adjuto-campaign-accent, #6db800);
  outline-offset: 2px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .adjuto-noticia__link { transition: none; }
}