/**
 * Saúde Insider — primitivos compartilhados.
 *
 * Elementos que não pertencem a nenhuma área do site: aparecem no cabeçalho,
 * na home, na editoria e na matéria. Estavam no `home.css`, que só é
 * enfileirado sob `is_front_page()`, então qualquer página nova renderizava
 * sem eles. O `.si-icon path` vinha do `header.css` pelo mesmo motivo às
 * avessas: é primitivo, não é do cabeçalho.
 *
 * Escopo deliberadamente pequeno — só chapéu, linha de metadados e ícone.
 * Card, grade e item de lista continuam no `home.css`: a página de Matéria
 * confirma o reúso deles, mas a extração é maior e vai em passo separado.
 *
 * ⚠️ Foge da convenção "um arquivo por área do site" do CLAUDE.md: aqui o
 * recorte é por componente. É a exceção que torna o reúso possível.
 *
 * @package SaudeInsider
 */

/* =====================================================================
 * ÍCONE
 * ===================================================================== */

/*
 * Os SVGs vêm do Figma com stroke fixo. A regra abaixo tem precedência sobre
 * o atributo de apresentação, o que deixa a cor sob controle dos tokens.
 */
.si-icon path {
	stroke: currentColor;
}

/* =====================================================================
 * CHAPÉU
 * ===================================================================== */

.si-kicker {
	margin-bottom: var(--si-space-2);
	color: var(--si-color-brand-primary);
	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);
}

/* Variante menor, usada dentro dos itens de lista. */
.si-kicker--item {
	font-size: var(--si-font-size-label-sm);
}

/* =====================================================================
 * LINHA DE METADADOS
 * ===================================================================== */

.si-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 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);
}

.si-meta a {
	color: inherit;
	text-decoration: none;
}

.si-meta a:hover {
	color: var(--si-color-text-link);
	text-decoration: underline;
}

/* Separador entre data e autor — pontuação, não conteúdo. */
.si-meta__autor::before {
	content: "·";
	margin-right: var(--si-space-2);
}

/*
 * Botão de áudio, encostado à direita da linha de metadados.
 *
 * Sem comportamento por enquanto: sai com aria-disabled, então leitores de
 * tela o anunciam como indisponível em vez de prometerem uma ação que não
 * existe. O gancho para o futuro é [data-si-audio].
 */
.si-meta__audio {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* margin-left auto encosta na direita mesmo com data e autor variáveis. */
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	/*
	 * Um tom mais claro que a data ao lado, como no frame: os vetores do
	 * ícone saem em #9A9A96 na grade de destaques e #888888 na manchete —
	 * o token de ícone secundário cobre o primeiro exatamente e o segundo
	 * por aproximação (não há token para #888888).
	 */
	color: var(--si-color-icon-muted);
	cursor: pointer;
}

/*
 * O ícone tem 18px, como no Figma, mas a área clicável é ampliada para 44x44
 * por um pseudo-elemento — assim o alvo de toque atende o mínimo sem inflar
 * a altura da linha de metadados.
 */
.si-meta__audio::after {
	content: "";
	position: absolute;
	inset: -13px;
}

.si-meta__audio:hover {
	color: var(--si-color-icon-active);
}

.si-meta__audio .si-icon {
	display: block;
	width: 18px;
	height: 18px;
}

/* =====================================================================
 * CABEÇALHO DE SEÇÃO
 * ===================================================================== */

.si-section-header__titulo {
	padding-bottom: var(--si-space-2);
	/* Fio grosso do Figma: #111, não o cinza dos separadores. */
	border-bottom: 1px solid var(--si-color-border-strong);
	font-size: var(--si-font-size-h3);
	font-weight: var(--si-font-weight-h3);
	line-height: var(--si-line-height-h3);
	letter-spacing: var(--si-letter-spacing-h3);
}

/* =====================================================================
 * CHAMADA (card)
 * ===================================================================== */

/*
 * Desenho do fio que separa uma chamada da seguinte. Fica no card, e não no
 * bloco, porque a manchete e a grade de destaques usam o mesmo separador —
 * cada bloco só decide de que lado aplicar, já que numa pilha ele vem embaixo
 * e numa grade vem em cima da linha seguinte.
 */
.si-card {
	--si-card-fio: 1px solid var(--si-color-border-subtle);
	--si-card-respiro: var(--si-space-6);
}

.si-card__media {
	display: block;
	margin-bottom: var(--si-space-2);
}

/*
 * 3:2 vem do Figma (542x361). Fixar a proporção no CSS elimina deslocamento
 * de layout mesmo antes de a imagem baixar.
 */
.si-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background-color: var(--si-color-surface-muted);
}

.si-card__titulo {
	font-size: var(--si-font-size-h6);
	font-weight: var(--si-font-weight-h6);
	line-height: var(--si-line-height-h6);
	letter-spacing: var(--si-letter-spacing-h6);
}

.si-card__titulo a {
	color: inherit;
	text-decoration: none;
}

.si-card__titulo a:hover {
	color: var(--si-color-text-link);
}

.si-card__meta {
	margin-top: var(--si-space-2);
}

/* =====================================================================
 * GRADE DE CHAMADAS (componente "Destaques")
 * =====================================================================
 * Grade uniforme, sem manchete. Reflui de 1 para 2 e depois para o número de
 * colunas pedido pelo bloco.
 *
 * Os fios entre linhas são borda superior a partir da segunda linha, e não
 * borda inferior até a penúltima: assim a regra vale para qualquer quantidade
 * de itens, inclusive quando a última linha fica incompleta. O resultado em
 * pixels é o mesmo do Figma, que usa stroke inferior com 24px de respiro.
 */

.si-grid__wrap {
	display: flex;
	flex-direction: column;
	gap: var(--si-space-6);
	max-width: var(--si-container-max);
	margin-inline: auto;
	padding-block: var(--si-space-6);
}

/* Fio que fecha o bloco, recuado como no Figma. */
.si-grid__wrap::after {
	content: "";
	height: 1px;
	margin-inline: var(--si-container-gutter);
	background-color: var(--si-color-border-default);
}

.si-grid__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/*
	 * Sem espaço entre linhas, de propósito: é o que mantém o fio vertical
	 * contínuo de uma linha para a outra, como a régua única de 659px do
	 * Figma. O respiro entre chamadas vem do padding do próprio card.
	 */
	row-gap: 0;
}

.si-grid .si-card {
	position: relative;
	padding-inline: var(--si-container-gutter);
	/*
	 * Também na última linha: é este respiro que faz o fio vertical terminar
	 * 24px antes do fio que fecha o bloco, em vez de encostar nele.
	 */
	padding-bottom: var(--si-card-respiro);
}

/*
 * Fio horizontal desenhado como pseudo-elemento recuado nas duas pontas.
 *
 * No Figma ele tem a largura do card (244px), não a da coluna (292px), e para
 * 28px antes do fio vertical — os dois nunca se tocam. Uma borda no card
 * ocuparia a célula inteira, incluindo o padding, e formaria uma cruz.
 *
 * Fica declarado aqui e é ligado por breakpoint com content, para o desenho
 * não se repetir em cada media query.
 */
.si-grid .si-card::before {
	content: none;
	position: absolute;
	top: 0;
	left: var(--si-container-gutter);
	right: var(--si-container-gutter);
	height: 1px;
	background-color: var(--si-color-border-subtle);
}

/* Uma coluna: fio acima de toda chamada a partir da segunda. */
.si-grid .si-card:nth-child(n + 2) {
	padding-top: var(--si-card-respiro);
}

.si-grid .si-card:nth-child(n + 2)::before {
	content: "";
}

/* =====================================================================
 * ITEM DE LISTA
 * ===================================================================== */

/*
 * flex-wrap para a variante compacta com foto: a imagem ocupa uma linha
 * inteira e o par marcador + texto desce para a seguinte.
 */
.si-item {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--si-space-1);
}

/*
 * Fio entre itens, com o mesmo desenho do card. O respiro depois do fio
 * difere por lista: 24px nas compactas e 16px na de mídia, como no Figma.
 */
.si-item:not(:last-child) {
	padding-bottom: var(--si-space-4);
	margin-bottom: var(--si-space-6);
	border-bottom: var(--si-card-fio, 1px solid var(--si-color-border-subtle));
}

.si-item--media {
	gap: var(--si-space-2);
}

.si-item--media:not(:last-child) {
	margin-bottom: var(--si-space-4);
}

.si-item__corpo {
	flex: 1;
	min-width: 0;
}

/* Marcador de 20px: bolinha nas recomendadas, número nas mais lidas. */
.si-item__marcador {
	display: flex;
	flex: 0 0 20px;
	align-items: center;
	justify-content: center;
	height: 20px;
	color: var(--si-color-brand-primary);
	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);
}

/*
 * Marcador de episódio: quadrado vinho com o ícone de áudio em branco.
 */
.si-item__marcador--icon {
	color: var(--si-color-brand-on-primary);
	background-color: var(--si-color-brand-primary);
}

.si-item__marcador--icon .si-icon {
	width: 12px;
	height: 12px;
}

.si-item__marcador--icon .si-icon path {
	stroke: currentColor;
}

.si-item__marcador--bullet::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: currentColor;
}

/*
 * Foto lateral da variante com mídia. 35% reproduz a proporção do Figma
 * (191px numa linha de 544) — foi o 40% anterior que deixava a coluna central
 * mais alta que as outras duas.
 */
.si-item__media {
	display: block;
	flex: 0 0 35%;
}

/*
 * Na variante compacta a foto ocupa a linha inteira, acima do texto. É o
 * formato do último item de "Mais lidas".
 */
.si-item--compact .si-item__media {
	flex: 0 0 100%;
}

/*
 * A margem separa a foto do texto quando ela ocupa a linha inteira, e por isso
 * só vale na variante compacta. Na de mídia foto e texto são lado a lado: ali
 * a margem virava 8px mortos embaixo de cada item, e cinco deles esticavam a
 * coluna central bem além da altura do frame.
 */
.si-item--compact.si-item--foto-before .si-item__media {
	order: -1;
	margin-bottom: var(--si-space-2);
}

/*
 * Foto abaixo do texto: é a ordem do item de podcast no Figma, onde o respiro
 * entre um e outro é de 16px — vem do padding do bloco de texto, não de um gap.
 */
.si-item--compact.si-item--foto-after .si-item__media {
	order: 1;
	margin-top: var(--si-space-4);
}

.si-item__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background-color: var(--si-color-surface-muted);
}

.si-item__titulo {
	font-size: var(--si-font-size-h6);
	font-weight: var(--si-font-weight-h6);
	line-height: var(--si-line-height-h6);
	letter-spacing: var(--si-letter-spacing-h6);
}

/* Na variante com mídia o título é maior — 18px/21,3 no frame, token próprio. */
.si-item--media .si-item__titulo {
	font-size: var(--si-font-size-item-media);
	font-weight: var(--si-font-weight-h5);
	line-height: var(--si-line-height-item-media);
}

.si-item__titulo a {
	color: inherit;
	text-decoration: none;
}

.si-item__titulo a:hover {
	color: var(--si-color-text-link);
}

.si-item__meta {
	margin-top: var(--si-space-2);
}

/* =====================================================================
 * RESPONSIVO
 * =====================================================================
 * Breakpoints repetidos literalmente (480, 1024): custom properties não
 * funcionam dentro de @media.
 */

@media (min-width: 480px) {
	/* Duas colunas: fio vertical na coluna par, horizontal da 3ª chamada em diante. */
	.si-grid__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.si-grid .si-card:nth-child(n + 2) {
		padding-top: 0;
	}

	.si-grid .si-card:nth-child(n + 2)::before {
		content: none;
	}

	.si-grid .si-card:nth-child(n + 3) {
		padding-top: var(--si-card-respiro);
	}

	.si-grid .si-card:nth-child(n + 3)::before {
		content: "";
	}

	.si-grid .si-card:nth-child(2n) {
		border-left: 1px solid var(--si-color-border-default);
	}
}

@media (min-width: 1024px) {
	/*
	 * Grade de quatro colunas do Figma. O fio vertical vai em toda chamada que
	 * não abre linha; o horizontal, da segunda linha em diante.
	 */
	.si-grid--cols-4 .si-grid__inner {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.si-grid--cols-4 .si-card:nth-child(n + 3) {
		padding-top: 0;
	}

	.si-grid--cols-4 .si-card:nth-child(n + 3)::before {
		content: none;
	}

	.si-grid--cols-4 .si-card:nth-child(n + 5) {
		padding-top: var(--si-card-respiro);
	}

	.si-grid--cols-4 .si-card:nth-child(n + 5)::before {
		content: "";
	}

	.si-grid--cols-4 .si-card {
		border-left: 0;
	}

	.si-grid--cols-4 .si-card:not(:nth-child(4n + 1)) {
		border-left: 1px solid var(--si-color-border-default);
	}
}

/* =====================================================================
 * ARTICLE ROW
 * =====================================================================
 * Linha de notícia dos arquivos (Editoria e Cúpula) e das recirculações da
 * matéria: texto à esquerda, foto 3:2 à direita. Medidas do frame 122:1727
 * (rows 123:3017…): coluna de texto com gap 8, foto de 292x195, gap 24,
 * respiro vertical 24 e fio inferior --si-color-border-default — um tom mais
 * forte que o fio dos si-item, e é assim no frame.
 *
 * Difere do si-item--media em cinco pontos estruturais (foto à direita,
 * linha fina presente, sem chapéu, fio default, respiro 24) — por isso é
 * componente próprio e não variante.
 */

.si-row {
	display: flex;
	flex-direction: column;
	gap: var(--si-space-4);
	padding-block: var(--si-space-6);
}

.si-row:not(:last-child) {
	border-bottom: 1px solid var(--si-color-border-default);
}

.si-row__corpo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--si-space-2);
}

.si-row__titulo {
	font-size: var(--si-font-size-item-media);
	font-weight: var(--si-font-weight-h5);
	line-height: var(--si-line-height-item-media);
	letter-spacing: var(--si-letter-spacing-h5);
}

.si-row__titulo a {
	color: inherit;
	text-decoration: none;
}

.si-row__titulo a:hover {
	color: var(--si-color-text-link);
}

/*
 * Linha fina reusa os tokens de subheadline (divergência #3, resolvida em
 * 06/08/2026 — o frame usa 16px e não há token próprio). Cor um degrau acima
 * da manchete: aqui o frame pinta #3f3f3f. Clamp de 3 linhas segura o
 * fallback para excerpt sem estourar a altura da row.
 */
.si-row__linha-fina {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	color: var(--si-color-text-secondary);
	font-size: var(--si-font-size-subheadline);
	font-weight: var(--si-font-weight-subheadline);
	font-style: var(--si-font-style-subheadline);
	line-height: var(--si-line-height-subheadline);
}

/* A data ancora na base da row, alinhada à base da foto, como no frame. */
.si-row__meta {
	margin-top: auto;
}

.si-row__media {
	display: block;
	flex: 0 0 auto;
}

.si-row__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background-color: var(--si-color-surface-muted);
}

/* A partir do tablet a foto vai para a direita, na largura fixa do frame. */
@media (min-width: 768px) {
	.si-row {
		flex-direction: row;
		gap: var(--si-space-6);
	}

	/* A foto entra depois do texto no markup e à direita no visual. */
	.si-row__media {
		width: 292px;
		order: 2;
	}
}