/**
 * Página Integridade.
 *
 * Carregado apenas onde o conteúdo usa a classe raiz `page-integrity` — ver
 * page_integrity_style_load() em functions.php. O critério é o conteúdo, e não
 * um ID fixo, para cobrir as traduções WPML e o rascunho de validação.
 * Toda regra aqui é escopada em `.page-integrity`: nada vaza para o resto do site.
 *
 * Todas as cores vêm da paleta global do Astra (--ast-global-color-0..8).
 * Nenhum hex literal, nenhuma família tipográfica nova: as variações escuras
 * são derivadas com color-mix() sobre a própria paleta.
 */

.page-integrity {
	/* Espaçamento — um único par de variáveis alimenta a regra de seção */
	--pi-space-section: clamp(40px, 5vw, 72px);
	/* Respiro interno do hero: menor que o das seções, para o bloco ficar
	   compacto como na referência aprovada (era 7rem = 105px de cada lado). */
	--pi-space-hero: clamp(2.5rem, 6vw, 4.5rem);
	--pi-gap: clamp(1rem, 2.5vw, 2rem);

	/* Largura de conteúdo = site-content-width do Astra */
	--pi-content: 1200px;

	/* Cores derivadas da paleta global */
	--pi-accent: var(--ast-global-color-0);
	--pi-text: var(--ast-global-color-3);
	--pi-heading: var(--ast-global-color-2);
	--pi-surface: var(--ast-global-color-5);
	--pi-surface-alt: var(--ast-global-color-6);
	--pi-border: color-mix(in srgb, var(--ast-global-color-3) 22%, transparent);
	/* Azul institucional escurecido para os blocos em destaque */
	--pi-dark: color-mix(in srgb, var(--ast-global-color-0) 32%, var(--ast-global-color-8));
	--pi-on-dark: var(--ast-global-color-5);

	/* Família de headings do Astra (headings-font-family) */
	--pi-font-heading: "Montserrat", sans-serif;

	color: var(--pi-text);
}

/* ---------------------------------------------------------------------------
   Espaçamento vertical — REGRA ÚNICA.
   Seções que precisam de respiro diferente redefinem a variável, nunca o padding.
   --------------------------------------------------------------------------- */

/* O intervalo entre seções é o gap do container — não o padding de cada uma.
   Com padding nas duas bordas o espaço somava (75px + 75px = 150px) e a página
   ficava "furada" entre os blocos. */
.page-integrity {
	display: flex;
	flex-direction: column;
	gap: var(--pi-space-section);
}

/* Respiro entre a última seção e o rodapé do site, no mesmo valor do gap.
   O Astra aplica `padding` (shorthand, 45px) em `.entry-content > .wp-block-group`
   e vence o container por especificidade — por isso o respiro final é aplicado
   na última seção, e o padding-bottom do tema é neutralizado. */
.entry-content > .page-integrity.wp-block-group {
	padding-bottom: 0;
}

.page-integrity > [class*="section-"]:last-child {
	padding-block-end: var(--pi-space-section);
}

.page-integrity > [class*="section-"] {
	padding-block: 0;
}

/* O hero é a exceção: tem fundo próprio e precisa de respiro interno */
.page-integrity > .section-hero {
	padding-block: var(--pi-space-hero);
}

/* Filhos diretos de cada seção respeitam a largura de conteúdo.
   O cover fica de fora: seus filhos diretos são a imagem de fundo e o overlay,
   que precisam preencher a seção inteira. Nele, quem limita é o inner-container. */
.page-integrity > [class*="section-"]:not(.wp-block-cover) > * {
	max-width: var(--pi-content);
	margin-inline: auto;
}

.page-integrity .wp-block-cover__inner-container {
	max-width: var(--pi-content);
	margin-inline: auto;
	width: 100%;
}

/* O layout "flow" do WordPress injeta margin-block-start entre blocos irmãos.
   Onde o espaçamento é dado por gap, essa margem soma e desalinha: entre as
   seções virava 72px + 24px, e dentro dos grids derrubava os itens em cascata. */
.page-integrity > *,
.page-integrity .indicator-grid > *,
.page-integrity .policy-grid > *,
.page-integrity .code-layout > *,
.page-integrity .channel-layout > * {
	margin-block: 0;
}

/* ---------------------------------------------------------------------------
   Tipografia comum de seção
   --------------------------------------------------------------------------- */

.page-integrity .section-eyebrow {
	font-family: var(--pi-font-heading);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pi-accent);
	margin-bottom: 0.75rem;
}

.page-integrity .section-title {
	color: var(--pi-heading);
	margin-bottom: 0.75rem;
}

.page-integrity .section-lead {
	font-size: 1.125rem;
	margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------------------
   1. Hero
   --------------------------------------------------------------------------- */

/* Fundo escuro sob a imagem: garante o contraste do texto mesmo enquanto a
   imagem carrega, ou se ela for clara demais */
.page-integrity .section-hero {
	min-height: clamp(360px, 55vh, 560px);
	background-color: var(--pi-dark);
	/* Container mais largo que o das demais seções: aproxima o texto da borda
	   esquerda sem encostar nela. Redefine a variável, não a regra. */
	--pi-content: 1560px;
}

.page-integrity .section-hero .wp-block-cover__inner-container {
	padding-inline: clamp(1rem, 3vw, 2.5rem);
	/* referência para as unidades cqi do título — ver comentário abaixo */
	container-type: inline-size;
}

/* O Astra injeta `body .wp-block-cover:not(...) p` (especificidade 0,3,2).
   Os quatro níveis de classe abaixo superam isso sem precisar de !important. */
.page-integrity .section-hero .wp-block-cover__inner-container .hero-title,
.page-integrity .section-hero .wp-block-cover__inner-container .hero-subtitle,
.page-integrity .section-hero .wp-block-cover__inner-container .hero-support {
	color: var(--pi-on-dark);
}

/* O H1 global do Astra tem 90px e não cabe na coluna de texto do hero.
   O tamanho acompanha a largura do CONTAINER (cqi), não da janela (vw): dentro
   do editor o canvas é mais estreito que a janela, e com vw a fonte era
   calculada grande demais, quebrando "INTEGRIDADE" em duas linhas.
   "INTEGRIDADE" ocupa 7,34px de largura por px de fonte e a coluna de texto é
   41% do container, logo o teto seguro é 41/7,34 = 5,59cqi — 5,4 dá folga.
   A primeira declaração é o fallback para navegadores sem unidades de container.
   O teto é em px, e não em rem, porque 45px foi pedido como medida fechada — o
   root do Astra é 15px, então o mesmo valor em rem deixaria de bater se o tema
   mudasse a base. */
.page-integrity .hero-title {
	font-size: clamp(2rem, 4.2vw, 45px);
	font-size: clamp(2rem, 5.4cqi, 45px);
	line-height: 1.05;
	margin-bottom: 0.5rem;
	/* O customizer do Astra aplica `text-transform: uppercase` em `h1,
	   .entry-content h1` (0,1,1) por style inline — global, portanto fora do
	   escopo desta página. Aqui só o título do hero volta à caixa do texto
	   digitado; as duas classes bastam para vencer sem !important. */
	text-transform: none;
}

/* Entrelinha própria no hero. O corpo do Astra usa 1,857, que é bom para texto
   corrido mas espalha demais um bloco curto: as 4 linhas do subtítulo somavam
   149px só de entrelinha. Aqui o bloco é uma chamada, não leitura longa. */
.page-integrity .hero-subtitle {
	font-family: var(--pi-font-heading);
	font-size: clamp(1.125rem, 2.5vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
	max-width: 34ch;
	margin-bottom: 0.75rem;
}

/* 1,5 é o piso confortável para texto de apoio — abaixo disso a leitura sofre,
   e é também o valor que a WCAG 1.4.12 usa como referência de espaçamento. */
.page-integrity .hero-support {
	line-height: 1.5;
	max-width: 52ch;
	margin-bottom: 1.25rem;
}

/* Layout de duas faixas (desktop): texto sobre o azul sólido à esquerda,
   foto à direita. O texto fica sempre sobre cor chapada, com contraste
   garantido — quem cuida disso é a "cortina" (::before), não a foto. */
@media (min-width: 922px) {
	/* Piso de altura proporcional à largura. A faixa da foto tem 55% da seção,
	   então em telas muito largas ela ficaria deitada demais e o `cover` cortaria
	   o miolo da arte: em 2560px a faixa chegava a 2,73:1 e sobrava só de 28% a
	   72% da imagem, cortando o mosaico (que vive entre 26% e 74%). 22vw mantém a
	   faixa proporcional e não tem efeito em laptop, onde a altura do texto já
	   supera esse valor.

	   `!important` porque o bloco Cover grava `min-height: unset` no atributo
	   style do elemento — e atributo vence qualquer seletor. É o mesmo motivo do
	   !important nos dots do carrossel. Fixar a altura pelo editor não serve:
	   ali só cabe um valor em px, e este precisa acompanhar a largura. */
	.page-integrity .section-hero {
		min-height: 22vw !important;
	}

	/* O overlay (dim do editor) continua restrito à faixa da foto. */
	.page-integrity .section-hero .wp-block-cover__background {
		width: 55%;
		left: auto;
		right: 0;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
		mask-image: linear-gradient(to right, transparent 0%, #000 42%);
	}

	/* Referência do cliente (notebook 1200px): mosaico ocupando ~80% da altura do
	   hero, de 50% a 98% da largura. Com a foto presa numa faixa de 55% em modo
	   cover, ele ficava com 46% da altura — a faixa é quase quadrada no notebook e
	   a arte (1,2:1) era reduzida para caber.
	   Aqui a imagem é dimensionada pela altura do hero (180%, logo o mosaico —
	   44% da altura da arte — ocupa 79%) e centralizada em 74% da largura, o
	   centro do mosaico na referência. Medido: 51–97% x 10–88% em 1200px.
	   - `80cqi` limita o tamanho em telas estreitas, onde o hero cresce com o
	     texto e o mosaico passaria da borda direita (usa o container abaixo).
	   - `min-width: 52%` garante que a foto chegue à borda direita a partir do
	     centro em 74%: em telas largas o hero é baixo e sobrava uma faixa sem
	     foto (20px em 1920). Se isso esticar a caixa, o `cover` corta só fundo.
	   Tudo que passa da seção é recortado pelo `overflow: clip` do Cover. */
	.page-integrity .section-hero {
		container-type: inline-size;
	}

	.page-integrity .section-hero .wp-block-cover__image-background {
		top: 49%;
		left: 74%;
		right: auto;
		width: auto;
		height: min(180%, 80cqi);
		min-width: 52%;
		aspect-ratio: 6 / 5;
		object-fit: cover;
		transform: translate(-50%, -50%);
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* Cortina: fundo sólido sob o texto que esmaece até 52% da largura. Fica em
	   coordenadas do hero, não da foto — por isso a foto pode crescer à vontade
	   sem nunca passar por baixo do texto. O texto termina em ~41,5% em qualquer
	   largura, dentro da parte sólida (até 42,6%). z-index 1 no ::before fica
	   abaixo do inner-container (também 1, mas posterior no DOM). */
	.page-integrity .section-hero::before {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		width: 52%;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(to right, var(--pi-dark) 82%, transparent);
	}

	/* 41% faz o texto terminar antes da faixa onde a foto começa a aparecer */
	.page-integrity .section-hero .wp-block-cover__inner-container > * {
		max-width: 41%;
	}

	.page-integrity .section-hero .hero-subtitle,
	.page-integrity .section-hero .hero-support {
		max-width: 41%;
	}
}

/* Mobile: a foto volta a cobrir a seção inteira. Este degradê é independente do
   dim do editor e garante o contraste do texto qualquer que seja o valor. */
@media (max-width: 921px) {
	.page-integrity .section-hero::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to top,
			var(--pi-dark) 12%,
			color-mix(in srgb, var(--pi-dark) 55%, transparent) 100%
		);
	}
}

/* ---------------------------------------------------------------------------
   2. Programa de Integridade
   --------------------------------------------------------------------------- */

/* minmax de 220px mantém os 4 indicadores em 2x2, não 3+1 */
.page-integrity .indicator-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: var(--pi-gap);
}

/* No mobile os 4 indicadores ficam em 2x2: em coluna única eles viravam uma
   lista corrida e perdiam o peso de destaque que têm no desktop. */
@media (max-width: 781px) {
	.page-integrity .indicator-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.page-integrity .indicator {
	border-left: 3px solid var(--pi-accent);
	padding-left: 1rem;
}

.page-integrity .indicator-icon img {
	width: 48px;
	height: auto;
	margin-bottom: 0.5rem;
}

.page-integrity .indicator-value {
	font-family: var(--pi-font-heading);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--pi-accent);
	margin-bottom: 0.25rem;
}

.page-integrity .indicator-label {
	font-size: 0.9375rem;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   3. Código de Conduta e Ética — bloco em destaque
   --------------------------------------------------------------------------- */

.page-integrity .code-layout,
.page-integrity .channel-layout {
	/* Colunas via variável: o layout muda por breakpoint sem duplicar a regra */
	--pi-cols: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	display: grid;
	grid-template-columns: var(--pi-cols);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	background-color: var(--pi-dark);
	color: var(--pi-on-dark);
	padding: clamp(1.5rem, 4vw, 3rem);
}

/* Ícone à esquerda + divisor entre o texto e a ação, como na referência */
@media (min-width: 782px) {
	.page-integrity .code-layout,
	.page-integrity .channel-layout {
		--pi-cols: auto minmax(0, 1fr) auto;
		align-items: stretch;
	}

	/* A coluna de ação do canal tem largura própria: com os dois botões
	   empilhados (como na referência) ela não pode espremer o texto */
	.page-integrity .channel-layout {
		--pi-cols: auto minmax(0, 1fr) minmax(240px, 0.55fr);
	}

	.page-integrity .channel-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.page-integrity .code-download,
	.page-integrity .channel-info {
		justify-content: center;
		border-inline-start: 1px solid
			color-mix(in srgb, var(--pi-on-dark) 28%, transparent);
		padding-inline-start: clamp(1.5rem, 3vw, 3rem);
	}
}

.page-integrity .code-icon,
.page-integrity .channel-icon {
	align-self: center;
}

.page-integrity .code-icon img,
.page-integrity .channel-icon img {
	width: clamp(80px, 11vw, 150px);
	height: auto;
}

.page-integrity .code-layout .section-title,
.page-integrity .channel-layout .section-title,
.page-integrity .code-layout .section-lead,
.page-integrity .channel-layout .section-lead {
	color: var(--pi-on-dark);
}

.page-integrity .code-download {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

/* Botão claro sobre o bloco escuro — inverso do botão padrão do Astra.
   O padding lateral é menor que os 45px do tema: o botão dimensiona a terceira
   coluna do grid, e 45px roubavam a largura de que o título precisa. */
.page-integrity .code-download .wp-block-button__link {
	background-color: var(--pi-on-dark);
	color: var(--pi-dark);
	font-family: var(--pi-font-heading);
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding-inline: 1rem;
	border-radius: 0;
}

/* ---------------------------------------------------------------------------
   4. Políticas de Integridade
   --------------------------------------------------------------------------- */

/* Flex em vez de grid: são 7 cards em linhas de 4, e o grid não centraliza a
   última linha — sobrava um vão à direita. Com flex-wrap + justify-content, os
   3 da segunda linha ficam centrados sob os 4 de cima, mantendo a mesma largura.
   O número de colunas vem da variável, um valor por breakpoint. */
/* Largura calibrada pelos títulos, não por estética: a área interna do card
   precisa ficar entre 237px — onde "Política Global Antissuborno" ainda cabe
   numa linha, deixando "e Anticorrupção" para a segunda — e 247px, acima do
   qual "Política Global de Integridade" para de quebrar e vira uma linha só.
   242px fica no meio dessa janela: card de 279,5px, logo
   --pi-content = 279,5 x 4 + 3 x 15 (gap) = 1163px.
   Ao mexer no texto dos títulos ou na fonte, remedir essa janela. */
.page-integrity .section-policies {
	--pi-content: 1163px;
}

.page-integrity .policy-grid {
	/* Vão menor que o das demais seções, medido na referência do cliente:
	   20px num card de 353px, que na nossa largura de 278px dá ~16px.
	   Redefine a variável em vez do `gap`, senão o flex-basis do card — que
	   também usa --pi-gap — deixa de bater e as colunas desalinham. */
	--pi-gap: 1rem;
	--pi-policy-cols: 4;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--pi-gap);
}

.page-integrity .policy-card {
	flex: 0 1
		calc(
			(100% - var(--pi-gap) * (var(--pi-policy-cols) - 1)) /
				var(--pi-policy-cols)
		);
	display: flex;
	flex-direction: column;
	background-color: var(--pi-surface);
	border: 1px solid var(--pi-border);
	border-top: 3px solid var(--pi-accent);
	padding: 1.5rem 1.25rem;
}

@media (max-width: 1023px) {
	.page-integrity .policy-grid {
		--pi-policy-cols: 3;
	}
}

@media (max-width: 781px) {
	.page-integrity .policy-grid {
		--pi-policy-cols: 2;
	}
}

@media (max-width: 559px) {
	.page-integrity .policy-grid {
		--pi-policy-cols: 1;
	}
}

/* Espaçamento interno conforme a referência do cliente. As distâncias foram
   medidas na arte (card de 347px) e convertidas para a nossa largura de 278px:
   número→ícone 13→10px, ícone→título 39→31px, título→texto 27→22px.
   Zera só o `margin-top` que o layout flow do WordPress injeta entre blocos —
   assim cada elemento controla o próprio `margin-bottom` sem somar com o do
   tema. Zerar `margin-block` aqui não serviria: com `:not(.policy-link)` o
   seletor sobe para 0,3,0 e passa a vencer as regras de cada elemento (0,2,0),
   anulando os espaçamentos. O `margin-top: auto` do link continua valendo
   porque a regra dele vem depois, com a mesma especificidade. */
.page-integrity .policy-card > * {
	margin-top: 0;
}

.page-integrity .policy-number {
	font-family: var(--pi-font-heading);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--pi-accent);
	margin-bottom: 0.75rem;
}

/* 100px = ~36% da largura do card, proporção pedida pelo cliente na referência
   de ícones (antes 72px, ~26%). No card horizontal de telas estreitas o ícone
   volta a 48px, porque ali ele divide a linha com o texto. */
.page-integrity .policy-icon img {
	width: 100px;
	height: auto;
}

.page-integrity .policy-icon {
	margin-bottom: 2rem;
	text-align: center;
}

.page-integrity .policy-title {
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--pi-heading);
	margin-bottom: 0.75rem;
	/* Reserva duas linhas mesmo quando o título cabe em uma, para o ícone, a
	   descrição e o link alinharem entre os cards da mesma linha. */
	min-height: calc(2 * 1.3em);
}

.page-integrity .policy-text {
	font-size: 0.9375rem;
	margin-bottom: 0.75rem;
}

/* Empurra o link para a base do card: com alturas diferentes de título e
   descrição, os "Ver documento" alinham entre si em toda a linha. */
.page-integrity .policy-link {
	margin-top: auto;
	margin-bottom: 0;
}

/* Alvo de toque de 44px. O sublinhado é text-decoration, não border-bottom:
   assim ele acompanha o texto em vez de descer junto com a área clicável. */
.page-integrity .policy-link a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--pi-font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pi-accent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	transition: opacity 0.2s ease;
}

.page-integrity .policy-link a:hover {
	opacity: 0.7;
}

/* Telas estreitas: o card continua empilhado, com o ícone acima do texto —
   igual ao desktop. Uma versão anterior virava o card na horizontal (ícone à
   esquerda) para encurtar a rolagem, mas o cliente preferiu manter a mesma
   leitura em todas as larguras. O ícone diminui um pouco para não dominar o
   card, que aqui ocupa a largura toda da tela. */
@media (max-width: 559px) {
	.page-integrity .policy-icon img {
		width: 80px;
	}

	/* Em coluna única não há card vizinho para alinhar, então a reserva de duas
	   linhas do título só abre um vão sob os títulos curtos. */
	.page-integrity .policy-title {
		min-height: 0;
	}
}

/* ---------------------------------------------------------------------------
   5. Canal de Ética
   --------------------------------------------------------------------------- */

.page-integrity .channel-hours {
	font-family: var(--pi-font-heading);
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.page-integrity .channel-info {
	display: flex;
	flex-direction: column;
	color: var(--pi-on-dark);
}

/* Links de texto sobre os blocos escuros: o azul institucional não tem contraste
   suficiente contra o fundo quase-preto. Vale para qualquer link adicionado pelo
   editor — os botões têm estilo próprio e ficam de fora. */
.page-integrity .code-layout a:not(.wp-block-button__link),
.page-integrity .channel-layout a:not(.wp-block-button__link) {
	color: var(--pi-on-dark);
}

/* ---------------------------------------------------------------------------
   6. Pacto Brasil + Notícias
   --------------------------------------------------------------------------- */

.page-integrity .pact-card {
	background-color: var(--pi-surface-alt);
	padding: 1.5rem;
	height: 100%;
}

.page-integrity .pact-logo img {
	max-width: 160px;
	height: auto;
	margin-bottom: 1rem;
}

.page-integrity .news-list {
	margin-top: 1rem;
}

/* ---------------------------------------------------------------------------
   Card da notícia — o Spectra empilha imagem sobre texto; aqui ele vira
   horizontal (imagem à esquerda, conteúdo à direita), como na referência.
   Só o layout é reescrito: cores e fontes seguem vindo do bloco/tema.

   Os seletores levam `.uagb-post-grid` só para chegar a cinco classes: o Spectra
   gera CSS inline por block_id — `.uagb-block-XXX.is-grid ...` (0,3,0) no front e
   `.editor-styles-wrapper .uagb-block-XXX...` (0,4,0) no editor — e esse inline é
   impresso DEPOIS do arquivo do tema, então empatar não basta, quem vem por
   último vence. `.uagb-post-grid` existe nos dois contextos.
   --------------------------------------------------------------------------- */

.page-integrity .news-list {
	--pi-news-pad: clamp(1.25rem, 2.5vw, 2rem);
	--pi-news-img: 40%;
}

.page-integrity .section-news .news-list .uagb-post-grid .uagb-post__inner-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: var(--pi-surface);
	border: 1px solid var(--pi-border);
	border-top: 3px solid var(--pi-accent);
	padding: var(--pi-news-pad);
	overflow: hidden;
}

/* Indicadores do carrossel colados ao card. Dois obstáculos do Spectra:
   o padding-bottom de 30px vem de `.uagb-slick-carousel`, que é a MESMA div do
   grid (seletor combinado, não descendente); e a margem dos dots é inline com
   `!important` por block_id, e só outro !important supera esse. Junto com o
   flex-basis das core/columns e o bloco de prefers-reduced-motion, é um dos
   poucos pontos do arquivo em que !important não tem alternativa. */
.page-integrity .section-news .news-list .uagb-post-grid.uagb-slick-carousel {
	padding-bottom: 0;
}

.page-integrity .section-news .news-list .uagb-post-grid .slick-dots {
	margin-top: 1rem !important;
	line-height: 1;
}

/* O Spectra ainda dá 20px de margem sob o card, que somam ao vão dos dots */
.page-integrity .section-news .news-list .uagb-post-grid .uagb-post__inner-wrap {
	margin-bottom: 0;
}

/* Nada de `display: flex` no .slick-track: o slick calcula largura de slide e
   posição do track em px, e o flex quebra esse cálculo — os slides vazam para
   os lados. A altura uniforme vem da opção equalHeight do próprio bloco. */

/* data e categoria antes do título, como na referência */
.page-integrity .section-news .news-list .uagb-post-grid .uagb-post-grid-byline {
	order: -1;
	margin-bottom: 0.5rem;
}

/* Desktop: a imagem sai do fluxo e ocupa a faixa esquerda inteira. Os cinco
   elementos do card são irmãos diretos (não há wrapper de texto no Spectra),
   por isso posicionar a imagem é mais previsível que montar um grid. */
@media (min-width: 782px) {
	.page-integrity .section-news .news-list .uagb-post-grid .uagb-post__inner-wrap {
		padding-left: calc(var(--pi-news-img) + var(--pi-news-pad));
		min-height: 300px;
	}

	.page-integrity .section-news .news-list .uagb-post-grid .uagb-post__image {
		position: absolute;
		inset: 0 auto 0 0;
		width: var(--pi-news-img);
		margin: 0;
	}

	/* O Spectra fixa `height: auto` no link da imagem com um seletor de cinco
	   classes; os seis níveis abaixo o superam sem !important. */
	.page-integrity .section-news .news-list .uagb-post-grid .uagb-post__image a.uagb-image-ratio-inherit,
	.page-integrity .section-news .news-list .uagb-post-grid .uagb-post__image a img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* Mobile: imagem no topo, texto abaixo */
@media (max-width: 781px) {
	.page-integrity .section-news .news-list .uagb-post-grid .uagb-post__image {
		margin: calc(var(--pi-news-pad) * -1) calc(var(--pi-news-pad) * -1)
			var(--pi-news-pad);
	}

	/* As setas do slick ficam absolutas no meio vertical do card. Com o layout
	   empilhado, esse meio deixa de ser a imagem e passa a ser o título — a seta
	   pousa sobre o texto, sem fundo. No toque o swipe já navega e os dots
	   continuam como controle visível, então esconder é melhor que reposicionar.

	   `visibility` e não `display`: o slick escreve `display: inline-block` no
	   atributo style do elemento, que vence qualquer seletor — só um !important
	   passaria por cima. Como as setas são absolutas, esconder por visibility não
	   deixa espaço sobrando, e ainda as tira da ordem de foco. */
	.page-integrity .section-news .news-list .uagb-post-grid .slick-arrow {
		visibility: hidden;
	}

	/* Sem as setas os dots ficam sendo o único alvo de clique, e 20px encostados
	   não atendem ao mínimo de 24px (WCAG 2.5.8). Cresce a área de toque; a
	   bolinha continua do mesmo tamanho, só recentrada na caixa maior. */
	.page-integrity .section-news .news-list .uagb-post-grid .slick-dots li {
		width: 32px;
		height: 32px;
	}

	.page-integrity .section-news .news-list .uagb-post-grid .slick-dots li button {
		width: 100%;
		height: 100%;
		padding: 0;
	}

	.page-integrity
		.section-news
		.news-list
		.uagb-post-grid
		.slick-dots
		li
		button::before {
		width: 100%;
		height: 100%;
		line-height: 32px;
	}
}

/* ---------------------------------------------------------------------------
   Botões — herdam o estilo global do Astra; aqui só as variações da página
   --------------------------------------------------------------------------- */

.page-integrity .is-secondary-action .wp-block-button__link {
	background-color: transparent;
	color: currentColor;
	border: 2px solid currentColor;
}

.page-integrity .channel-actions {
	gap: 0.75rem;
}

/* O padding lateral de 45px do botão do Astra é largo demais para a coluna de
   ação; sem min-width:0 o botão não encolhe e vaza a borda do bloco. */
.page-integrity .channel-actions .wp-block-button,
.page-integrity .channel-actions .wp-block-button__link {
	width: 100%;
	min-width: 0;
}

.page-integrity .channel-actions .wp-block-button__link {
	display: block;
	text-align: center;
	padding-inline: 1.25rem;
}

/* ---------------------------------------------------------------------------
   7. Empresas do Grupo — régua de logos
   --------------------------------------------------------------------------- */

/* A largura da régua é menor que a das demais seções: redefine a variável,
   em vez de disputar especificidade com a regra geral de largura. */
/* 1100px: com 900px as colunas ficavam em 125px e achatavam os logos mais
   largos, que perdiam altura para caber. */
.page-integrity .section-partners {
	--pi-content: 1100px;
}

/* Título menor e centralizado: a régua é seção de apoio, não compete com os
   títulos das seções principais (H2 de 40px). */
.page-integrity .section-partners .section-title {
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	text-align: center;
	margin-bottom: 1.75rem;
}

/* Espaçamento ÓPTICO, não por colunas. Com grid de colunas iguais, cada logo
   fica centrado na sua célula e a folga sobra desigual — logos estreitos deixam
   vãos grandes dos dois lados (chegou a 99px entre Flora e JBS contra 35px entre
   Âmbar e Eldorado). Com largura natural + gap fixo, o espaço entre dois logos
   vizinhos é sempre o mesmo, que é o que o olho compara. */
.page-integrity .partner-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--pi-gap) clamp(2rem, 4vw, 3.5rem);
}

/* Container de altura fixa: é ele que equaliza opticamente logos horizontais e
   verticais. A largura é a natural de cada logo — não fixar. */
.page-integrity .partner-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 104px;
	margin: 0;
}

.page-integrity .partner-logo a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* Altura fixa, não max-height: `max-*` só limita, nunca amplia — e os arquivos
   do cliente variam de 43px a 300px de largura nativa. A altura base vale para
   os logos horizontais; os de proporção muito diferente têm ajuste próprio na
   regra seguinte, porque nenhuma altura única equaliza proporções de 0,68 a 4,76.
   56px é o teto de nitidez do arquivo do Âmbar (300x114 nativo, 2x em retina).
   Subir daqui exige arquivos maiores — ver nota no fim desta seção. */
.page-integrity .partner-logo img {
	height: var(--pi-logo-h, 56px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	/* Logos em cor plena — sem escala de cinza. O hover apenas esmaece de leve,
	   para sinalizar que o logo é clicável sem apagar a marca. */
	transition: opacity 0.25s ease;
}

.page-integrity .partner-logo a:hover img,
.page-integrity .partner-logo a:focus-visible img {
	opacity: 0.7;
}

.page-integrity .partner-logo a:focus-visible {
	outline-offset: 4px;
}

/* Ajuste óptico por logo. A altura base serve aos horizontais; logos verticais
   ou quase quadrados precisam de mais altura para a marca ter o mesmo peso
   visual, já que parte da caixa é ocupada por assinatura ou símbolo empilhado.
   Ao trocar um arquivo, reveja o valor — é medido a olho, não calculado. */
.page-integrity .partner-logo.is-tall img {
	--pi-logo-h: 80px;
}

/* Abaixo do desktop, grid de colunas fixas — o oposto da regra acima, e de
   propósito. Assim que a régua precisa quebrar, a largura de cada logo passa a
   decidir quantos cabem na linha e o resultado é uma escada: 5+1 no tablet,
   2+2+1+1 no celular, cada linha centrada por conta própria. Com colunas fixas
   as linhas ficam alinhadas, e o logo passa a ser limitado pela LARGURA da
   célula em vez da altura — o que aproxima a área aparente das marcas, que é o
   que o olho compara. Sem isso o Lhg ocupa o triplo do J&F. */
@media (max-width: 781px) {
	.page-integrity .partner-grid {
		--pi-partner-cols: 3;
		display: grid;
		grid-template-columns: repeat(var(--pi-partner-cols), minmax(0, 1fr));
		column-gap: 1rem;
		row-gap: 0.5rem;
	}

	.page-integrity .partner-logo {
		height: 88px;
	}

	/* `max-height` no lugar de `height`: aqui quem manda é o `max-width` da
	   célula, e a altura tem de poder ceder para o logo não distorcer. */
	.page-integrity .partner-logo img {
		height: auto;
		max-height: var(--pi-logo-h, 48px);
		width: auto;
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.page-integrity .partner-grid {
		--pi-partner-cols: 2;
	}
}

.page-integrity .partner-logo.is-square img {
	--pi-logo-h: 68px;
}

/* Teto de nitidez por arquivo (altura máxima antes de borrar em tela retina,
   = metade da altura nativa). Recalcule ao trocar qualquer logo:
     J&F e Lhg Mining ... SVG, sem limite
     Flora .............. 3806px
     JBS ................ 200px
     Âmbar .............. 57px   <- define a altura base de 56px acima
     Eldorado ........... 28px   <- ARQUIVO INSUFICIENTE (177x56 nativo)
   O Eldorado já é exibido acima do próprio teto: pedir SVG ao cliente. */

/* ---------------------------------------------------------------------------
   Acessibilidade
   --------------------------------------------------------------------------- */

.page-integrity a:focus-visible,
.page-integrity button:focus-visible,
.page-integrity .wp-block-button__link:focus-visible {
	outline: 3px solid var(--pi-accent);
	outline-offset: 3px;
}

/* Sobre fundo escuro o outline azul some — inverte para o branco da paleta */
.page-integrity .section-hero a:focus-visible,
.page-integrity .code-layout a:focus-visible,
.page-integrity .channel-layout a:focus-visible {
	outline-color: var(--pi-on-dark);
}

@media (prefers-reduced-motion: reduce) {
	.page-integrity *,
	.page-integrity *::before,
	.page-integrity *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
   Responsivo — os grids já colapsam sozinhos via auto-fit.
   Aqui só o que o auto-fit não resolve: as core/columns e o respiro em telas
   pequenas (piso de teste: 360px).
   --------------------------------------------------------------------------- */

@media (max-width: 921px) {
	.page-integrity .wp-block-columns {
		flex-wrap: wrap;
	}

	.page-integrity .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (max-width: 480px) {
	.page-integrity {
		--pi-gap: 1rem;
	}

	.page-integrity .policy-card {
		padding: 1.25rem 1rem;
	}

	/* Botões dos dois blocos escuros ocupam a largura toda no celular */
	.page-integrity .channel-actions .wp-block-button,
	.page-integrity .code-download .wp-block-button {
		width: 100%;
	}

	.page-integrity .channel-actions .wp-block-button__link,
	.page-integrity .code-download .wp-block-button__link {
		display: block;
		text-align: center;
	}
}