/**
 * Saúde Insider — arquivos (Editoria, autor, data, busca).
 *
 * Cobre a página de Editoria (frame 122:1727) e a landing de coluna assinada
 * (frame 202:1962 — Cúpula), que é o mesmo arquivo com masthead display
 * dirigido pelo campo de termo si_editoria_byline.
 *
 * A row em si (.si-row) mora em components.css — aqui fica só a casca da
 * página: faixa de título, coluna de 792px, respiros, rail e paginação.
 *
 * Mobile-first; breakpoints literais (480/768/1024/1280) — custom properties
 * não funcionam dentro de @media. O 1440 do rail é exceção comentada.
 */

/* =====================================================================
 * 1. FAIXA DE TÍTULO (EditoriaStrip, nó 123:2986)
 * =====================================================================
 * Full-bleed sobre surface-muted, título centrado. A altura nunca é fixada:
 * nome longo quebra em duas linhas e a faixa cresce a partir do padding.
 */

.si-arquivo__cabecalho {
	padding: var(--si-space-6) var(--si-container-gutter);
	background-color: var(--si-color-surface-muted);
	text-align: center;
}

/*
 * Tamanho, entrelinha e tracking vêm do h1 base (main.css), que bate exato
 * com o frame: 48px/1.05, -0.02em. Só o peso diverge: o frame aplica 700
 * (Georgia-Bold, nó 123:3001) e o token --si-font-weight-h1 é 900 — pensado
 * para marca e manchete. Vale o frame; decisão registrada na spec da Editoria.
 *
 * O min-height reproduz a régua interna de 70px do frame (nó 123:2998), que
 * fecha a faixa em 150 com uma linha de texto — sem fixar altura: nome longo
 * quebra em duas linhas e a faixa cresce, como a spec pede.
 */
.si-arquivo__titulo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 70px;
	font-weight: var(--si-font-weight-bold);
}

/* =====================================================================
 * 2. MASTHEAD DA COLUNA ASSINADA (frame 202:2025)
 * =====================================================================
 * Mesma faixa, outra voz: display 80px regular + byline "por Fulano".
 */

/* 48px de respiro no mobile; os 80px do frame entram no breakpoint de 768. */
.si-arquivo--assinada .si-arquivo__cabecalho {
	padding-block: var(--si-space-12);
}

.si-arquivo--assinada .si-arquivo__titulo {
	font-size: var(--si-font-size-display);
	font-weight: var(--si-font-weight-display);
	line-height: var(--si-line-height-display);
	letter-spacing: var(--si-letter-spacing-display);
	/*
	 * Caixa alta é apresentação: o termo grava "Cúpula" e o frame exibe
	 * "CÚPULA". Fica no CSS para o texto copiado sair com a grafia normal.
	 */
	text-transform: uppercase;
}

/*
 * Byline colada ao título, como no frame (nó 202:2200): Inter 18/26,1 — os
 * mesmos números do par subheadline, reusado sem itálico.
 */
.si-arquivo__byline {
	color: var(--si-color-text-primary);
	font-family: var(--si-font-sans);
	font-size: var(--si-font-size-subheadline);
	font-weight: var(--si-font-weight-subheadline);
	line-height: var(--si-line-height-subheadline);
}

/* No frame a byline é texto corrido preto; o link só se revela no hover. */
.si-arquivo__byline-link {
	color: inherit;
	text-decoration: none;
}

.si-arquivo__byline-link:hover,
.si-arquivo__byline-link:focus-visible {
	color: var(--si-color-text-link);
	text-decoration: underline;
}

/* =====================================================================
 * 2.1 RESULTADOS DE BUSCA
 * =====================================================================
 * ⚠️ SEM FRAME NO FIGMA. Nenhuma das oito páginas do arquivo traz tela de
 * resultado de busca, e esta reaproveita a faixa de título e a coluna de rows
 * da Editoria — a tela mais próxima que existe. Só o que a Editoria não tem
 * ganha regra própria aqui: o termo buscado e a contagem. A validar com o
 * designer; registrado como B-01 em docs/revisao-visual.md.
 */

/*
 * O termo herda o corpo do h1 e muda só a voz: itálico serifado, como uma
 * citação do que o leitor digitou. Sem aspas no CSS — elas estão no PHP do
 * estado vazio, onde o texto é frase corrida, e aqui o contraste de estilo já
 * separa o termo do rótulo "Busca por".
 */
.si-arquivo__termo {
	font-style: italic;
}

/*
 * A contagem é metadado, não título: corpo e cor de rótulo, colada embaixo do
 * h1. O respiro negativo compensa o min-height de 70px da faixa, que centra o
 * título sozinho e deixaria um vão grande demais entre os dois.
 */
.si-arquivo__contagem {
	margin-top: calc(-1 * var(--si-space-3));
	color: var(--si-color-text-tertiary);
	font-size: var(--si-font-size-label);
	line-height: var(--si-line-height-label);
	letter-spacing: var(--si-letter-spacing-label);
	text-transform: var(--si-text-transform-label);
}

/*
 * Na busca o chapéu volta a aparecer em cada linha (os resultados atravessam
 * editorias). O respiro entre ele e o título vem do gap do .si-row__corpo;
 * aqui só se corrige a margem que o parágrafo traz do reset.
 */
.si-arquivo--busca .si-row .si-kicker {
	margin: 0;
}

/* =====================================================================
 * 3. LISTAS (nós 122:1776 e 123:3085)
 * =====================================================================
 * Coluna de leitura de 792px centrada em todas as larguras. Cada bloco de
 * cinco rows é um contêiner próprio: o :last-child do .si-row corta o fio
 * da última row do bloco — fio interrompido, assinatura do layout.
 */

.si-arquivo__conteudo {
	/* Contexto do rail absoluto da coluna assinada. */
	position: relative;
	/*
	 * Respiro antes da faixa de quadrados: 64px no mobile, dos quais 24 já
	 * vêm do fecho do próprio bloco — por isso 40 aqui.
	 */
	padding-bottom: var(--si-space-10);
}

.si-arquivo__bloco {
	max-width: calc(792px + 2 * var(--si-container-gutter));
	margin-inline: auto;
	padding: var(--si-space-6) var(--si-container-gutter);
}

/* =====================================================================
 * 4. RAIL DE PUBLICIDADE DA COLUNA ASSINADA (nó 205:2325)
 * =====================================================================
 * Skyscraper 160x600 como coluna satélite: no frame ele vive FORA do
 * container de 1200, colado à borda direita do viewport de 1534. Escondido
 * por padrão; só existe visualmente onde a geometria cabe.
 */

.si-arquivo__rail {
	display: none;
}

/* =====================================================================
 * 5. PAGINAÇÃO
 * =====================================================================
 * O frame mostra 10 notícias e nenhum pager — o desenho abaixo é derivado dos
 * tokens (fio + labels) e está registrado como pendência para o designer.
 * Sem paginação o acervo além da página 1 ficaria inalcançável.
 */

.si-arquivo__paginacao {
	max-width: calc(792px + 2 * var(--si-container-gutter));
	margin-inline: auto;
	padding: 0 var(--si-container-gutter);
}

.si-arquivo__paginacao .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--si-space-2);
	align-items: center;
	justify-content: center;
	padding-top: var(--si-space-4);
	border-top: 1px solid var(--si-color-border-default);
}

/*
 * 44x44 de alvo mínimo com a tipografia de label — acessibilidade vence o
 * tamanho miúdo que o 11px sugeriria para o botão inteiro.
 */
.si-arquivo__paginacao .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--si-space-2);
	color: var(--si-color-text-tertiary);
	font-family: var(--si-font-sans);
	font-size: var(--si-font-size-label);
	font-weight: var(--si-font-weight-label);
	line-height: var(--si-line-height-label);
	letter-spacing: var(--si-letter-spacing-label);
	text-transform: var(--si-text-transform-label);
	text-decoration: none;
}

.si-arquivo__paginacao a.page-numbers:hover,
.si-arquivo__paginacao a.page-numbers:focus-visible {
	color: var(--si-color-text-link);
}

/* Página corrente em vinho; o aria-current já vem do core. */
.si-arquivo__paginacao .page-numbers.current {
	color: var(--si-color-brand-primary);
}

/*
 * O core emite .screen-reader-text no h2 interno da paginação e o tema não
 * carrega nenhum CSS padrão que a esconda — mesma receita do
 * .si-visually-hidden de main.css.
 */
.si-arquivo__paginacao .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	clip-path: inset(50%);
}

/* =====================================================================
 * 6. ESTADO VAZIO
 * =====================================================================
 * Editoria sem posts: a faixa de título permanece e a lista dá lugar à
 * mensagem com a busca. Página pública falha visível para todo mundo — o
 * padrão gated com aviso a editores é conceito da home.
 */

.si-arquivo__vazio {
	display: flex;
	flex-direction: column;
	gap: var(--si-space-6);
	max-width: calc(792px + 2 * var(--si-container-gutter));
	margin-inline: auto;
	padding: var(--si-space-12) var(--si-container-gutter);
}

/* =====================================================================
 * 7. RESPONSIVO
 * ===================================================================== */

@media (min-width: 768px) {
	/* Os 40px de respiro vertical do frame (nó 123:2986). */
	.si-arquivo__cabecalho {
		padding-block: var(--si-space-10);
	}

	/* Masthead assinado: 80px de banda, como o frame 202:2025. */
	.si-arquivo--assinada .si-arquivo__cabecalho {
		padding-block: var(--si-space-20);
	}

	/*
	 * Respiro de 160px entre a última lista e a faixa de quadrados
	 * (nó 123:3085). Não há degrau de 160 na escala de espaçamento e o valor
	 * aparece uma única vez — literal de propósito, promovê-lo a token só se
	 * o padrão se repetir. 136 aqui + 24 do fecho do bloco = 160 do frame.
	 */
	.si-arquivo__conteudo {
		padding-bottom: 136px;
	}

	/* Na assinada o frame fecha com 80 (nó 202:2243): 56 + 24 do bloco. */
	.si-arquivo--assinada .si-arquivo__conteudo {
		padding-bottom: var(--si-space-14);
	}
}

/*
 * 1440 não é um dos breakpoints do projeto (480/768/1024/1280) — é o mínimo
 * em que o rail cabe: a coluna centrada de 792 mais o skyscraper de 244 com
 * respiro exigem ~1432px. Abaixo disso o slot simplesmente não existe;
 * esconder seria desperdiçar a impressão do anúncio, e realocar o criativo é
 * decisão do ad server (pendência registrada). Decisão da spec da Cúpula.
 */
@media (min-width: 1440px) {
	.si-arquivo__rail {
		display: block;
		position: absolute;
		/* 24 do padding do bloco + 24 até o rótulo, como no frame (nó 205:2325). */
		top: var(--si-space-12);
		/* O frame cola no viewport (0); 24px de respiro é decisão da spec. */
		right: var(--si-space-6);
		/* Largura do miolo do rail no frame: rótulo e quadro de 244. */
		width: 244px;
	}

	/* O contêiner do ad-slot é pensado para faixa; aqui ele é só o miolo. */
	.si-arquivo__rail .si-ad__inner {
		max-width: none;
		padding: 0;
		gap: var(--si-space-2);
	}

	/*
	 * Sem fio de fechamento: no frame o contêiner de fecho existe mas não tem
	 * fill (nó 205:2336) — o rail termina no quadro.
	 */
	.si-arquivo__rail .si-ad__inner::after {
		content: none;
	}

	/* O quadro do rail respira 24 em volta do criativo (nó 205:2332). */
	.si-arquivo__rail .si-ad__quadro {
		padding: var(--si-space-6);
	}
}