/* ---------------------------------------------------------------------------
   Palavra que não quebra
   --------------------------------------------------------------------------- */

/* Título de notícia é texto de gente, e texto de gente traz endereço colado,
   nome de programa e palavra composta comprida. Nenhum deles tem espaço para o
   navegador quebrar, e sem esta regra um só deles põe a página inteira para
   rolar de lado: medido em 320px, um título de 60 caracteres sem espaço levava a
   largura de rolagem de 320 para 497px, e a rolagem lateral vale para o
   documento todo, não só para a linha que estourou.

   É a mesma proteção que o objeto do repasse já tem na página da cidade. Fica
   junta, aqui em cima, porque vale para toda a seção. */
.jw-noticias-abertura__titulo,
.jw-noticia__titulo,
.jw-noticia__resumo,
.jw-vazio__titulo,
.jw-vazio__texto,
.jw-post__titulo,
.jw-post__corpo,
.jw-post__vizinhas a {
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   A faixa teal do topo
   --------------------------------------------------------------------------- */

/* Ela encosta no cabeçalho do site, que é teal também, e os dois viram uma massa
   só, como nas telas de investimento. Nenhuma linha divisória entre eles: quem
   separa é o respiro e o tamanho do título.

   O que ela não tem é o peso do hero de investimentos. Lá a faixa carrega
   retrato, número grande e apresentação, porque aquela rota é destino de QR Code
   impresso e recebe gente que não sabe de quem é o site. Esta é uma lista para
   varrer: a faixa diz onde a pessoa está e sai da frente. */
.jw-noticias-abertura {
	padding-block: clamp(22px, 3.6vw, 46px) clamp(20px, 3.2vw, 38px);
}

/* Peso 400 dito na mão: a Anton só tem esse desenho, e o negrito que um h1
   herdaria sairia falsificado pelo navegador, lavado e com contorno sujo. */
.jw-noticias-abertura__titulo {
	margin: 0;
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.85rem, 6.4vw, 3.4rem);
	line-height: 1.02;
	/* Nenhuma palavra sozinha na última linha, que em "Notícias sobre
	   Agricultura e estradas rurais" é o que aconteceria no celular. */
	text-wrap: balance;
}

/* A medida é curta de propósito: é uma frase de apresentação, não texto para
   ler. Em 46ch ela fecha em duas linhas na tela larga e não vira um bloco. */
.jw-noticias-abertura__intro {
	margin: 14px 0 0;
	max-width: 46ch;
	color: #C8E6E4;
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   O caminho de volta
   --------------------------------------------------------------------------- */

/* O mesmo link da página da cidade, e o mesmo motivo para o padding: só a linha
   de texto media 23px de altura, um pixel abaixo do mínimo de 24px, e este é um
   link que se toca com o polegar. inline-flex para o min-height valer, e
   justify-self/align-self de lado nenhum: ele nunca deve atravessar a coluna,
   senão o alvo termina longe de onde o texto termina. */
.jw-voltar {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 24px;
	padding: 4px 0;
	font-size: 0.9rem;
	text-decoration: none;
	text-underline-offset: 0.25em;
}

.jw-voltar:hover {
	text-decoration: underline;
}

/* A seta recua no hover, na direção para onde o link leva. É o único movimento
   destas telas, e por isso ele pode existir: um gesto só, que diz para onde vai. */
.jw-voltar__seta {
	flex: none;
	transition: transform 0.18s ease;
}

.jw-voltar:hover .jw-voltar__seta {
	transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.jw-voltar__seta {
		transition: none;
	}

	.jw-voltar:hover .jw-voltar__seta {
		transform: none;
	}
}

/* Dentro da faixa o fundo é teal, e ali o azul-link do site some. Lime, como na
   página da cidade, e o foco em branco pelo mesmo motivo. */
.jw-voltar--faixa {
	display: inline-flex;
	margin-bottom: 10px;
	color: #85E234;
}

.jw-voltar--faixa:focus-visible {
	outline: 3px solid #FFFFFF;
	outline-offset: 3px;
}

/* Sobre o branco da página o azul-link volta a ser o certo: ele mede 5,9:1 contra
   o branco, e o lime mediria 1,6:1. */
.jw-voltar--topo,
.jw-voltar--rodape {
	color: #0369A6;
}

.jw-voltar--topo {
	margin-bottom: 12px;
}

/* ---------------------------------------------------------------------------
   A lista
   --------------------------------------------------------------------------- */

.jw-noticias {
	padding-block: clamp(20px, 3vw, 34px) clamp(28px, 5vw, 56px);
}

/* Os filetes: um no topo de cada linha, e o de baixo fechando a lista. É o mesmo
   arranjo da lista de cidades, e pelo mesmo motivo: assim a lista termina onde
   ela de fato termina, com qualquer quantidade de itens. */
.jw-noticias__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #E5EBEE;
}

/* position: relative porque é este retângulo que o link do título vai cobrir.
   A linha inteira é o alvo: numa lista de notícia, mirar exatamente na palavra
   do título com o polegar é o tipo de exigência que faz a pessoa errar o toque. */
/* Duas colunas quando há capa, uma quando não há: `auto` só ocupa espaço se a
   figura existir, então notícia sem imagem não deixa buraco à esquerda. A
   maioria das notícias de gabinete chega sem imagem, e a lista precisa ficar
   inteira nos dois casos. */
.jw-noticias__lista > li {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: 20px;
	border-top: 1px solid #E5EBEE;
	padding: 16px 4px;
}
.jw-noticia__capa {
	grid-row: 1 / span 3;
	margin: 0;
}
.jw-noticia__capa img {
	display: block;
	border-radius: 3px;
}
@media (max-width: 599px) {
	/* No celular a capa vai para cima, em largura cheia: 180px ao lado do texto
	   deixariam a manchete com menos de 150px em 320px, e ela quebraria em cinco
	   linhas. */
	.jw-noticias__lista > li { grid-template-columns: minmax(0, 1fr); }
	.jw-noticia__capa { grid-row: auto; margin-bottom: 12px; }
	.jw-noticia__capa img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
}

.jw-noticias__lista > li:hover {
	background: #F4F7F9;
}

.jw-noticia__data {
	margin: 0 0 4px;
	color: #3B4C52;
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}

.jw-noticia__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.2rem, 2.4vw, 1.5rem);
	line-height: 1.15;
	/* A Anton é condensada, então cabe muito texto por linha. 30em aqui dá uma
	   manchete de umas duas linhas na tela larga, que é onde ela ainda se lê de
	   uma vez só. */
	max-width: 30em;
}

.jw-noticia__titulo a {
	color: #004F5F;
	text-decoration: none;
}

/* O link do título cobre o <li> inteiro. Um link por item, e não três: com data,
   título e resumo linkados, o leitor de tela anunciaria o mesmo destino três
   vezes por notícia, e a lista de dez viraria trinta links. */
.jw-noticia__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.jw-noticia__resumo {
	/* A medida do resumo, medida na Sora deste tamanho: 36rem dão perto de 70
	   caracteres por linha. Em duas linhas isso é o que se lê de relance, que é
	   o serviço que o resumo presta numa lista. */
	margin: 6px 0 0;
	max-width: 36rem;
	color: #3B4C52;
	font-size: 0.95rem;
	line-height: 1.55;
	overflow-wrap: break-word;
}

/* O anel de foco cerca a linha inteira, que é o alvo de verdade, e não só as
   palavras do título. Onde :has() não existir, as duas regras caem juntas e o
   link do título fica com o contorno padrão do tema: pior desenho, mesmo aviso. */
.jw-noticias__lista > li:has(a:focus-visible) {
	outline: 3px solid #0369A6;
	outline-offset: 2px;
}

.jw-noticias__lista > li:has(a:focus-visible) .jw-noticia__titulo a {
	outline: none;
}

/* ---------------------------------------------------------------------------
   A paginação
   --------------------------------------------------------------------------- */

.jw-noticias__paginacao {
	margin-top: clamp(22px, 3vw, 32px);
	gap: 8px 10px;
	align-items: center;
}

/* O core empacota os números num bloco só, e por padrão ele é display: block:
   com muitas páginas a fileira deixaria de quebrar e sairia da tela em 320px. */
.jw-noticias__paginacao .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}

/* box-sizing dito na mão porque este tema não tem reset: sem ele o padding e a
   borda se somam ao min-width e cada botão fica maior do que o desenho pede,
   o que em 320px empurra a fileira para fora da tela. */
.jw-noticias__paginacao a,
.jw-noticias__paginacao .page-numbers {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px é o alvo mínimo confortável para o dedo, e aqui são botões pequenos
	   numa fileira: sem isto eles ficariam com 24px de altura. */
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid #D9E2E6;
	border-radius: 4px;
	color: #0369A6;
	font-size: 0.9rem;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.jw-noticias__paginacao a:hover {
	background: #F4F7F9;
	border-color: #0369A6;
}

/* A página atual é um bloco chapado teal, e não um número sublinhado: numa
   fileira de números iguais, cor de fundo é o que se enxerga sem ler. */
.jw-noticias__paginacao .page-numbers.current {
	background: #004F5F;
	border-color: #004F5F;
	color: #FFFFFF;
}

/* As reticências entre blocos de páginas não são botão: sem borda e sem alvo. */
.jw-noticias__paginacao .page-numbers.dots {
	border-color: transparent;
	color: #3B4C52;
	min-width: 0;
	padding: 0 4px;
}

/* ---------------------------------------------------------------------------
   O estado vazio
   --------------------------------------------------------------------------- */

/* Esta é a tela que a campanha vai ao ar mostrando, porque no dia da estreia não
   há notícia nenhuma. Ela não pode ser um beco: diz o que vai aparecer aqui e
   oferece a saída que já existe, que é a prestação de contas por cidade.

   O bloco fica sobre o cinza da casa, e não sobre o branco: assim ele é uma
   PEÇA, com começo e fim, em vez de duas frases soltas onde deveria haver uma
   lista. box-sizing na mão pelo mesmo motivo de sempre. */
.jw-vazio {
	box-sizing: border-box;
	max-width: 44rem;
	margin-top: 4px;
	padding: clamp(22px, 4vw, 36px);
	background: #F4F7F9;
}

.jw-vazio__titulo {
	margin: 0;
	color: #004F5F;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.3rem, 3vw, 1.8rem);
	line-height: 1.15;
	text-wrap: balance;
}

.jw-vazio__texto {
	margin: 12px 0 0;
	max-width: 36rem;
	color: #3B4C52;
	line-height: 1.6;
}

/* A saída é a mesma pílula lime do convite do resto do site, com a mesma sombra
   discreta: lime chapado sobre fundo claro mede 1,6:1 contra o branco, ou seja,
   a borda quase não existe para quem enxerga pouco. */
.jw-vazio__saida {
	display: inline-flex;
	align-items: center;
	margin-top: 20px;
	padding: 14px 22px;
	border-radius: 999px;
	background: #85E234;
	color: #004F5F;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 30, 36, 0.24);
	transition: background 0.18s ease;
}

.jw-vazio__saida:hover {
	background: #9BEB57;
}

.jw-vazio__saida:focus-visible {
	outline: 3px solid #0369A6;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.jw-vazio__saida {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   A notícia
   --------------------------------------------------------------------------- */

.jw-post {
	padding-block: clamp(20px, 3.2vw, 40px) clamp(28px, 5vw, 56px);
}

.jw-post__titulo {
	margin: 0;
	color: #004F5F;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.9rem, 5.4vw, 3rem);
	line-height: 1.04;
	text-wrap: balance;
}

.jw-post__data {
	margin: 12px 0 0;
	color: #3B4C52;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

/* A imagem usa a coluna inteira, um pouco mais larga que o texto. É o que a
   separa do corpo sem precisar de moldura, e o bloco do core já traz width e
   height, então a página não salta quando ela pinta. */
.jw-post__imagem {
	margin: clamp(20px, 3vw, 32px) 0 0;
}

.jw-post__imagem img {
	display: block;
	width: 100%;
	height: auto;
}

.jw-post__corpo {
	margin-top: clamp(22px, 3.2vw, 34px);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.7;
}

/* A medida de leitura, o motivo de este bloco existir. Medida na Sora de 19px, a
   largura média do caractere é 9,6px: 41rem (656px) dão 68 caracteres por linha,
   dentro da faixa de 65 a 75 em que a linha se lê sem a vista perder o começo da
   seguinte. Antes o texto usava os 720px da coluna e saía com 84.

   A medida vale por ELEMENTO de texto, e não na coluna inteira, para a imagem e
   a citação no meio do texto continuarem podendo usar os 720px. */
.jw-post__corpo > :where(p, ul, ol, dl, h2, h3, h4, blockquote, figcaption, .wp-block-quote) {
	max-width: 41rem;
}

.jw-post__corpo > :where(h2, h3, h4) {
	margin-top: 1.6em;
}

.jw-post__corpo img {
	max-width: 100%;
	height: auto;
}

/* As vizinhas na linha do tempo. Fileira, e não pilha: os dois links são a mesma
   coisa em direções opostas, e um embaixo do outro eles pareceriam níveis
   diferentes. */
.jw-post__vizinhas {
	gap: 10px 20px;
	margin-top: clamp(32px, 5vw, 52px);
	padding-top: 18px;
	border-top: 1px solid #E5EBEE;
	font-size: 0.9rem;
}

/* min-width: 0 porque item de flex não encolhe abaixo do conteúdo mais largo dele
   por padrão, e o conteúdo aqui é um título de tamanho imprevisível: sem isto o
   bloco fica com os 22rem inteiros dentro de uma coluna de 272px em 320px. */
.jw-post__vizinhas .wp-block-post-navigation-link {
	min-width: 0;
	max-width: 22rem;
}

/* Só o título da vizinha fica sublinhado. Com o sublinhado no link inteiro, o
   rótulo e o título viravam um risco só de duas linhas, que lê como um link
   quebrado no meio em vez de um rótulo e o nome da notícia. */
.jw-post__vizinhas a {
	color: #0369A6;
	text-decoration: none;
}

.jw-post__vizinhas .post-navigation-link__title {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* "Anterior" e "Próxima" em linha própria, acima do título da vizinha. Na mesma
   linha, em 320px, o rótulo comia metade do espaço e o título começava no meio
   da linha, com cara de frase partida. Não é sobrelinha: é o rótulo de um link,
   em caixa de texto e sem tracking, e o título logo abaixo é que é o link. */
.jw-post__vizinhas .post-navigation-link__label {
	display: block;
	margin-bottom: 2px;
	color: #3B4C52;
	font-size: 0.78rem;
}

/* Sem vizinha de um dos lados o bloco não desenha nada, e aí o único link
   existente ficaria no meio da fileira. Encostado na ponta certa, ele continua
   dizendo para que lado vai. */
.jw-post__vizinhas .post-navigation-link-next {
	margin-inline-start: auto;
	text-align: right;
}

.jw-voltar--rodape {
	margin-top: clamp(24px, 3.5vw, 36px);
}