/**
 * Saúde Insider — home.
 *
 * Só o que é exclusivo da home. Chapéu, linha de metadados, ícone, chamada,
 * grade, item de lista e cabeçalho de seção vivem no `components.css`, que
 * carrega em todas as páginas — a editoria e a matéria usam os mesmos.
 *
 * O que sobra aqui são os arranjos de bloco (manchete, citação, listas, agenda,
 * podcast, blocos por editoria) e os overrides contextuais que eles aplicam
 * sobre os componentes compartilhados, como `.si-hero__col .si-card`. Esses
 * overrides dependem de `components.css` vir antes no enfileiramento.
 *
 * Mobile-first: a base empilha tudo numa coluna. Em 768px as chamadas passam a
 * duas colunas sob a manchete e em 1024px entra o arranjo de três colunas do
 * Figma, que atinge as proporções exatas a partir de 1280px.
 *
 * Breakpoints repetidos literalmente (768, 1024): custom properties não
 * funcionam dentro de @media.
 */

/* =====================================================================
 * 1. ESTRUTURA DO BLOCO
 * ===================================================================== */

/*
 * Sem fio fechando o bloco: o wrapper do HomeHero não tem stroke no Figma.
 * Quem separa a manchete do que vem abaixo é o fio do rótulo da faixa de
 * publicidade, que já atravessa a largura na altura do texto. Um fio aqui
 * duplicaria a divisória.
 */
.si-hero {
	position: relative;
}

/*
 * O respiro vertical fica no container, não nas colunas.
 *
 * É isso que mantém os fios verticais 24px acima do fio horizontal que fecha
 * a seção, como no Figma: lá a régua tem 651px dentro de um wrapper de 699px
 * com 24px de padding em cima e embaixo. Se o padding estivesse nas colunas,
 * a borda delas cresceria junto e encostaria embaixo.
 */
.si-hero__inner {
	display: grid;
	/* Só entre linhas: no desktop as três colunas ficam numa linha só e os
	 * fios precisam encostar na borda da coluna vizinha. */
	row-gap: var(--si-space-6);
	max-width: var(--si-container-max);
	margin-inline: auto;
	padding-block: var(--si-space-6);
}

/* Cada coluna traz o próprio respiro lateral, como no Figma. */
.si-hero__lead,
.si-hero__col {
	padding-inline: var(--si-container-gutter);
}

.si-hero__col {
	display: flex;
	flex-direction: column;
	gap: var(--si-space-6);
}

/*
 * O chapéu das chamadas laterais é menor que o da manchete e o da grade de
 * destaques: 9,6px contra 11px. É o único lugar do layout com esse corpo.
 */
.si-hero__col .si-kicker {
	font-size: var(--si-font-size-label-sm);
}

/*
 * Fio horizontal entre uma chamada e a próxima. No Figma é um stroke inferior
 * de 1px em cada card menos o último da coluna, com 24px de respiro antes.
 * O desenho do fio vem do card; aqui só se decide onde ele aparece.
 */
.si-hero__col .si-card:not(:last-child) {
	padding-bottom: var(--si-card-respiro);
	border-bottom: var(--si-card-fio);
}

/*
 * Com as colunas empilhadas, a emenda entre elas também precisa de fio, senão
 * a última chamada de uma encosta na primeira da outra sem separação. A partir
 * de 768px as colunas ficam lado a lado e o fio sai.
 */
.si-hero__col--start {
	padding-bottom: var(--si-space-6);
	border-bottom: 1px solid var(--si-color-border-subtle);
}

/* =====================================================================
 * 2. MANCHETE
 * ===================================================================== */

/*
 * O bloco central é centralizado no Figma: chapéu, título, linha fina e data
 * (nós 114:389/395/397/399, todos CENTER). A legenda da foto não entra — é
 * flex, os filhos seguem alinhados ao início, como o align LEFT do nó 114:392.
 */
.si-hero__lead {
	text-align: center;
}

.si-hero__figure {
	margin-block: var(--si-space-1) var(--si-space-4);
}

.si-hero__media {
	display: block;
}

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

.si-hero__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: var(--si-space-1);
	margin-top: var(--si-space-1);
	color: var(--si-color-text-tertiary);
	font-size: var(--si-font-size-caption);
	line-height: var(--si-line-height-caption);
}

.si-hero__credito::before {
	content: "—";
	margin-right: var(--si-space-1);
}

.si-hero__titulo {
	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);
}

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

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

/*
 * Linha fina sem itálico: o frame de referência mostra Inter Regular, e há
 * pedido explícito do cliente nas anotações do Figma para tirar o itálico
 * daqui. O token --si-font-style-subheadline segue valendo em outros usos.
 */
.si-hero__linha-fina {
	margin-top: var(--si-space-4);
	color: var(--si-color-text-tertiary);
	font-size: var(--si-font-size-subheadline);
	font-weight: var(--si-font-weight-subheadline);
	line-height: var(--si-line-height-subheadline);
}

/*
 * Data centralizada com o botão de áudio ancorado à direita, como no Figma
 * (data no container CENTER 114:399, ícone em posicionamento absoluto no
 * 114:401). O margin-left:auto do botão anularia o justify-content, então
 * aqui ele sai do fluxo.
 */
.si-hero__meta {
	position: relative;
	justify-content: center;
	margin-top: var(--si-space-4);
}

.si-hero__meta .si-meta__audio {
	position: absolute;
	top: 50%;
	right: 0;
	margin-left: 0;
	transform: translateY(-50%);
}

/* =====================================================================
 * 3. CITAÇÃO EM DESTAQUE (HomeQuote)
 * ===================================================================== */

.si-quote__inner {
	display: grid;
	gap: var(--si-space-2);
	max-width: var(--si-container-max);
	margin-inline: auto;
	padding: var(--si-space-6) var(--si-container-gutter);
}

/* Bloco vinho. O padding é o que afasta a moldura interna da borda. */
.si-quote__bloco {
	padding: var(--si-space-6);
	background-color: var(--si-color-brand-primary);
	color: var(--si-color-brand-on-primary);
}

/*
 * Moldura de fio claro por dentro do bloco. É ela que as aspas interrompem
 * nos cantos, então precisa ser o contexto de posicionamento.
 */
.si-quote__moldura {
	position: relative;
	padding: var(--si-space-12) var(--si-space-4);
	border: 1px solid var(--si-color-border-default);
}

/*
 * Aspas centradas nos cantos opostos da moldura: no Figma são caixas de 56x56
 * com o fundo da marca, que mascaram o fio por baixo. O deslocamento de -24px
 * põe o centro da caixa sobre o canto.
 */
.si-quote__aspas {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background-color: var(--si-color-brand-primary);
	color: var(--si-color-brand-on-primary);
}

.si-quote__aspas--abre {
	top: -24px;
	left: -24px;
}

.si-quote__aspas--fecha {
	right: -24px;
	bottom: -24px;
}

/*
 * A aspa de fechamento é a de abertura girada meia-volta.
 *
 * ⚠️ Os dois cantos usavam o MESMO desenho, e o de baixo saía como aspa de
 * ABERTURA — apontado para fora do texto. É o `icon-aspas.svg` do Figma, que
 * traz só a variante de abertura.
 *
 * `rotate(180deg)`, e não `scaleX(-1)`: girar meia-volta é a relação real
 * entre “ e ” na tipografia. Espelhar só na horizontal inverte a curva mas
 * mantém a vírgula pendurada para baixo, e o resultado não é nenhum dos dois
 * sinais — conferido lado a lado em 24/08/2026, com as três transformações.
 */
.si-quote__aspas--fecha .si-icon {
	transform: rotate(180deg);
}

/* Este ícone é preenchido, não traçado — daí fill em vez de stroke. */
.si-quote__aspas .si-icon path {
	fill: currentColor;
}

/*
 * Altura de três linhas reservada, mesmo com citação de duas.
 *
 * É o que o Figma faz: o texto ocupa 68px (duas linhas de 33,6) dentro de um
 * container de 101px. A reserva mantém a altura do bloco estável quando a
 * citação troca, e é ela que faz a coluna do anúncio caber ao lado em vez de
 * ultrapassar. A unidade lh já é a altura de linha calculada do elemento.
 */
.si-quote__texto {
	margin: 0;
	min-height: 3lh;
	font-family: var(--si-font-serif);
	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);
}

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

.si-quote__texto a:hover {
	text-decoration: underline;
}

/*
 * A cor precisa ser explícita: .si-quote__creditos é um <figcaption>, e a
 * regra global de figcaption (main.css) pintaria os créditos com o cinza de
 * legenda — ilegível sobre o vinho. No frame o autor é branco a 85% e
 * cargo/origem a 55% (nós 114:537/539).
 */
.si-quote__creditos {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--si-space-2);
	margin-top: var(--si-space-4);
	color: var(--si-color-brand-on-primary-strong);
}

.si-quote__origem {
	color: var(--si-color-brand-on-primary-soft);
}

.si-quote__autor {
	font-family: var(--si-font-sans);
	font-size: var(--si-font-size-caption);
	font-weight: var(--si-font-weight-label);
	line-height: var(--si-line-height-caption);
	letter-spacing: var(--si-letter-spacing-label);
	text-transform: var(--si-text-transform-label);
}

.si-quote__origem {
	font-family: var(--si-font-sans);
	font-size: var(--si-font-size-label);
	font-weight: var(--si-font-weight-regular);
	line-height: var(--si-line-height-label);
}

/* Separador entre cargo e origem — pontuação, não conteúdo. */
.si-quote__fonte::before {
	content: "·";
	margin-inline: var(--si-space-1);
}

/*
 * O slot de anúncio embutido não é faixa de página inteira. Dentro da coluna
 * ele segue as medidas do Figma: 24px de respiro lateral sobre os 292px da
 * coluna, o que deixa 244px de conteúdo, e gaps de 8px em vez dos 24px que a
 * faixa usa quando atravessa a home.
 */
.si-quote__anuncio .si-ad__inner {
	max-width: none;
	gap: var(--si-space-2);
	padding: 0 var(--si-container-gutter);
}

/*
 * Sem fio de fechamento aqui. No Figma o elemento existe, mas com o
 * preenchimento desligado — é espaçador, não régua. A faixa de página inteira
 * segue com o dela.
 */
.si-quote__anuncio .si-ad__inner::after {
	content: none;
}

/*
 * A moldura acompanha o criativo em vez de emoldurá-lo: no Figma o anúncio de
 * 250px transborda o container de 244px, então o cinza não aparece. Aqui ele
 * preenche a coluna e fica contido.
 */
.si-quote__anuncio .si-ad__quadro {
	padding: 0;
}


/* =====================================================================
 * 4. LISTAS (Recomendadas · Mais Recentes · Mais lidas)
 * =====================================================================
 * Três listas lado a lado no desktop, empilhadas abaixo de 1024px.
 * Duas variantes de item: compacta (marcador + texto) e com mídia (foto 3:2
 * à esquerda). O fio entre itens usa as variáveis do card.
 */

.si-lists__inner {
	display: grid;
	gap: var(--si-space-6);
	max-width: var(--si-container-max);
	margin-inline: auto;
	padding: var(--si-space-6) 0;
}

.si-lists__col {
	display: flex;
	flex-direction: column;
	gap: var(--si-space-6);
	padding-inline: var(--si-container-gutter);
}

/*
 * No frame as três colunas fecham exatamente na mesma linha, mas lá os títulos
 * de preenchimento foram escolhidos para caber. Com título real cada coluna
 * tem uma altura diferente, e a mais curta terminava 40px acima das outras.
 * O bloco cresce até a altura da coluna e reparte a sobra entre os itens, em
 * vez de acumular tudo num vão no pé. Empilhado no mobile não há sobra, então
 * a regra não tem efeito.
 */
.si-lists__itens {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
}

/*
 * Anúncio embutido na coluna Recomendadas: mesmas medidas do slot da citação
 * (gap de 8px entre rótulo e criativo, sem fio de fechamento — nós
 * 117:1672-1683, com o fio 117:1683 de preenchimento desligado). O respiro
 * lateral já vem do padding da coluna, então aqui o inner zera o dele —
 * sem isto o slot sai com o vestido de faixa de página inteira.
 */
.si-lists__anuncio .si-ad__inner {
	max-width: none;
	gap: var(--si-space-2);
	padding: 0;
}

.si-lists__anuncio .si-ad__inner::after {
	content: none;
}

.si-lists__anuncio .si-ad__quadro {
	padding: 0;
}

/* =====================================================================
 * 5. AGENDA DE EVENTOS
 * =====================================================================
 * Quatro colunas iguais: cartão de título e três eventos. Fios de 1px
 * fechando a seção em cima e embaixo, como no Figma.
 */

.si-agenda__inner {
	display: grid;
	gap: var(--si-space-6);
	max-width: var(--si-container-max);
	margin-inline: auto;
	padding: var(--si-space-6) var(--si-container-gutter);
}

/* Fios de fechamento como pseudo-elementos do grid, em linha inteira. */
.si-agenda__inner::before,
.si-agenda__inner::after {
	content: "";
	grid-column: 1 / -1;
	height: 1px;
	background-color: var(--si-color-border-default);
}

/*
 * Cartão do título: bordas vinho só em cima e embaixo, e o texto centralizado
 * na vertical mas alinhado à esquerda — é assim no Figma, onde a caixa de
 * texto ocupa a largura útil do cartão e o texto tem align LEFT.
 */
.si-agenda__cartao {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--si-space-4);
	border-block: 1px solid var(--si-color-border-brand);
	background-color: var(--si-color-surface-subtle);
}

.si-agenda__titulo {
	color: var(--si-color-brand-primary);
	font-size: var(--si-font-size-h2);
	font-weight: var(--si-font-weight-h2);
	line-height: var(--si-line-height-h2);
	letter-spacing: var(--si-letter-spacing-h2);
	text-transform: uppercase;
}

/* Card de evento. */
.si-evento {
	display: flex;
	flex-direction: column;
	background-color: var(--si-color-surface-subtle);
}

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

.si-evento__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--si-space-2);
	padding: var(--si-space-4);
}

/*
 * Nome e data ocupam linhas separadas dentro do mesmo bloco, como no Figma,
 * onde são um único texto de duas linhas.
 */
.si-evento__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);
}

/*
 * Nome em vinho e data em preto, no mesmo bloco de 15px. No Figma é um texto
 * só com dois segmentos de cor; aqui são dois elementos.
 */
.si-evento__nome {
	display: block;
	color: var(--si-color-brand-primary);
}

.si-evento__titulo a {
	position: relative;
	color: inherit;
	text-decoration: none;
}

/*
 * Alvo de toque do nome do evento: a linha tem 19px, o pseudo-elemento
 * amplia para os 44px mínimos — mesmo padrão do botão de áudio.
 */
.si-evento__titulo a::after {
	content: "";
	position: absolute;
	inset: -13px 0;
}

.si-evento__titulo a:hover {
	text-decoration: underline;
}

.si-evento__data {
	display: block;
	color: var(--si-color-text-primary);
	font-weight: inherit;
}

.si-evento__resumo {
	color: var(--si-color-text-secondary);
	font-size: var(--si-font-size-caption);
	line-height: var(--si-line-height-caption);
}


/* =====================================================================
 * 6. PODCAST / BRANDED
 * =====================================================================
 * Mesmo arranjo de três colunas da seção de listas, reaproveitando
 * section-header e list-item. A coluna central não tem título no Figma.
 */

.si-podcast__inner {
	display: grid;
	gap: var(--si-space-6);
	max-width: var(--si-container-max);
	margin-inline: auto;
	padding: var(--si-space-6) 0;
}

.si-podcast__col {
	display: flex;
	flex-direction: column;
	gap: var(--si-space-6);
	padding-inline: var(--si-container-gutter);
}

/*
 * Os itens vão num bloco sem gap, como na seção de listas: o respiro entre
 * eles é o do próprio item (24px nas compactas, 16px na de mídia). Sem este
 * agrupamento o gap de 24px da coluna se soma à margem do item e o
 * espaçamento sai dobrado.
 */
.si-podcast__itens {
	display: flex;
	flex-direction: column;
}

/*
 * O último episódio fecha com fio antes do cartão de destaque — no frame o
 * stroke desse item está ligado. No de "Branded" está desligado, e o
 * comportamento padrão (último item sem fio) já atende.
 */
.si-podcast__col--podcast .si-item:last-child {
	padding-bottom: var(--si-space-4);
	border-bottom: var(--si-card-fio, 1px solid var(--si-color-border-subtle));
}

/*
 * Cartão de destaque e anúncio ancorados no pé da coluna. Sem isto, as colunas
 * laterais terminam onde o conteúdo acaba e sobra um vão em relação à central,
 * que é mais alta — no Figma as três fecham na mesma linha.
 */
.si-podcast__col--podcast .si-promo,
.si-podcast__col--branded .si-ad {
	margin-top: auto;
}

/*
 * Slot de anúncio embutido: mesmo ajuste da coluna da citação, mas com o
 * respiro de 24px entre o rótulo e o criativo que o frame usa aqui.
 */
.si-podcast__col .si-ad__inner {
	max-width: none;
	gap: var(--si-space-6);
	padding: 0;
}

.si-podcast__col .si-ad__inner::after {
	content: none;
}

.si-podcast__col .si-ad__quadro {
	padding: 0;
}

/* Cartão de destaque no pé da coluna de podcast. */
.si-promo {
	display: flex;
	flex-direction: column;
	gap: var(--si-space-3);
	padding: var(--si-space-6);
	background-color: var(--si-color-brand-primary);
	background-position: center;
	background-size: cover;
	/*
	 * A textura do Figma é uma foto em preto e branco tingida pelo vinho.
	 * multiply reproduz isso: as áreas claras da foto viram vinho médio e as
	 * escuras escurecem, sem a imagem competir com o texto por cima.
	 */
	background-blend-mode: multiply;
	color: var(--si-color-brand-on-primary);
}

.si-promo__rotulo {
	font-family: var(--si-font-serif);
	font-size: var(--si-font-size-h6);
	font-weight: var(--si-font-weight-h6);
	line-height: var(--si-line-height-h6);
}

.si-promo__titulo {
	font-family: var(--si-font-serif);
	/* Caixa alta é tratamento do layout, como nos rótulos. */
	text-transform: uppercase;
	/* 30px no Figma; o token h2 é 32px, o mais próximo. */
	font-size: var(--si-font-size-h2);
	font-weight: var(--si-font-weight-h2);
	line-height: var(--si-line-height-h2);
	letter-spacing: var(--si-letter-spacing-h2);
}

.si-promo__fio {
	height: 1px;
	background-color: var(--si-color-border-default);
}

.si-promo__descricao {
	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-promo__link {
	color: inherit;
	text-decoration: none;
}

.si-promo__link:hover .si-promo__titulo {
	text-decoration: underline;
}

/* =====================================================================
 * 7. AVISO DE MANCHETE VAZIA
 * =====================================================================
 * Só chega a quem tem permissão de editar posts — o visitante não vê a seção.
 */

.si-hero__aviso {
	max-width: var(--si-container-max);
	margin-inline: auto;
	padding: var(--si-space-4) var(--si-container-gutter);
	border-left: 4px solid var(--si-color-state-warning);
	background-color: var(--si-color-surface-subtle);
	color: var(--si-color-text-secondary);
	font-size: var(--si-font-size-caption);
	line-height: var(--si-line-height-caption);
}

/* Variante embutida em coluna: mesmo aviso, sem o invólucro de container. */
.si-lists__aviso {
	padding: var(--si-space-4);
	border-left: 4px solid var(--si-color-state-warning);
	background-color: var(--si-color-surface-subtle);
	color: var(--si-color-text-secondary);
	font-size: var(--si-font-size-caption);
	line-height: var(--si-line-height-caption);
}

/* =====================================================================
 * 8. RESPONSIVO
 * ===================================================================== */

@media (min-width: 768px) {
	/* Agenda em duas colunas. */
	.si-agenda__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* As chamadas passam a duas colunas sob a manchete. */
	.si-hero__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.si-hero__lead {
		grid-column: 1 / -1;
	}

	.si-hero__col--end {
		border-left: 1px solid var(--si-color-border-default);
	}

	.si-hero__lead {
		border-bottom: 1px solid var(--si-color-border-default);
	}

	/* Colunas lado a lado: a emenda vertical dispensa o fio horizontal. */
	.si-hero__col--start {
		padding-bottom: 0;
		border-bottom: 0;
	}
}

/*
 * Arranjo de três colunas do Figma. A ordem visual é dada por grid-column,
 * então o HTML continua com a manchete primeiro.
 */
@media (min-width: 1024px) {
	.si-hero__inner {
		grid-template-columns: minmax(0, 292fr) minmax(0, 590fr) minmax(0, 292fr);
	}

	.si-hero__col--start {
		grid-column: 1;
		grid-row: 1;
	}

	.si-hero__lead {
		grid-column: 2;
		grid-row: 1;
		/* Os dois fios verticais que separam as colunas. */
		border-inline: 1px solid var(--si-color-border-default);
		border-bottom: 0;
	}

	.si-hero__col--end {
		grid-column: 3;
		grid-row: 1;
		border-left: 0;
	}

	/*
	 * A data da última chamada de cada coluna alinha com a data da manchete.
	 *
	 * Pedido do cliente em 25/08/2026. Antes as chamadas se empilhavam no topo
	 * e cada coluna terminava onde o conteúdo acabasse: a manchete fechava em
	 * y=808, a coluna da esquerda em 781 e a da direita em 683 — três linhas
	 * de base diferentes na mesma faixa.
	 *
	 * Uma linha resolve: `justify-content: space-between` na coluna. As
	 * chamadas mantêm a altura natural e se distribuem pela faixa, com a
	 * primeira no topo e a ÚLTIMA colada no pé. Como a linha de metadados é o
	 * último elemento do cartão, a data dela fica no pé da coluna — e a
	 * manchete já põe a dela ali.
	 *
	 * ⚠️ Foi tentado antes com `grid-auto-rows: 1fr`, que é a leitura literal
	 * de "espaços separados". Funciona para as laterais, mas as faixas iguais
	 * são dimensionadas pelo cartão mais alto e a manchete deixa de mandar na
	 * altura: a faixa do hero cresceu de 633px para 746 e a data da manchete
	 * ficou 113px acima das outras — o problema invertido. Medido em
	 * 25/08/2026.
	 *
	 * ⚠️ Só a partir de 1024px, que é onde as três colunas existem lado a
	 * lado. Empilhadas, não há o que alinhar.
	 *
	 * ⚠️ O respiro entre as chamadas aumenta, e mais na coluna de duas do que
	 * na de três — o cliente aceitou o efeito por escrito.
	 */
	.si-hero__col {
		justify-content: space-between;
	}

	.si-hero__titulo {
		margin-top: var(--si-space-6);
	}

	/*
	 * Podcast: mesma proporção da seção de listas — e, como lá, sem fio
	 * vertical entre colunas: os nós 114:745/784/836 têm strokes vazios
	 * (o individualStrokeWeights ficou sem tinta no frame).
	 */
	.si-podcast__inner {
		grid-template-columns: minmax(0, 292fr) minmax(0, 592fr) minmax(0, 292fr);
		gap: 0;
	}

	/* Agenda: cartão de título mais três eventos, colunas iguais. */
	.si-agenda__inner {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/*
	 * Listas na proporção 292/592/292 do Figma. A coluna central é a única
	 * com foto, então é a que precisa de largura.
	 */
	/*
	 * Sem align-items: start. As colunas se esticam até a altura da linha, o
	 * que faz os três fios verticais terminarem juntos — no Figma as colunas
	 * têm 850px cada. O conteúdo continua alinhado ao topo porque os filhos
	 * são flex e não crescem.
	 */
	/*
	 * Sem fio vertical entre as colunas: ao contrário da manchete e da grade,
	 * o frame desta seção não tem nenhum divisor (nó 114:556 — a varredura de
	 * pixels dos vãos confirma). O fio chegou a existir aqui "como nos demais
	 * blocos" e saiu por fidelidade.
	 */
	.si-lists__inner {
		grid-template-columns: minmax(0, 292fr) minmax(0, 592fr) minmax(0, 292fr);
		gap: 0;
	}

	/*
	 * Citação e anúncio lado a lado, na proporção 892/292 do Figma.
	 */
	/*
	 * Coluna do anúncio em largura fixa de 292px, como no Figma, em vez de
	 * fração. O slot tem tamanho de criativo definido, então esticar junto com
	 * a viewport só faria a moldura crescer em volta dele. A citação fica com
	 * o resto.
	 */
	.si-quote__inner {
		grid-template-columns: minmax(0, 1fr) 292px;
		align-items: start;
	}

}


/* =====================================================================
 * 9. BLOCOS POR EDITORIA
 * =====================================================================
 * Três blocos por linha, cada um com o nome da editoria, as três notícias
 * mais recentes dela e um link para o arquivo. Reaproveita section-header e
 * list-item; o que é próprio daqui é a grade e o link de fechamento.
 */

.si-editorias__inner {
	display: grid;
	max-width: var(--si-container-max);
	margin-inline: auto;
	padding: var(--si-space-6) var(--si-space-2);
	column-gap: var(--si-space-2);
	row-gap: var(--si-space-12);
}

.si-editorias__bloco {
	display: flex;
	flex-direction: column;
	gap: var(--si-space-6);
	padding-inline: var(--si-container-gutter);
}

/*
 * Bloco de itens sem gap próprio: o respiro vem da margem do item, 24px como
 * no frame. Cresce até a altura do bloco, o que empurra o link "Ver tudo"
 * para o pé — assim os links de uma mesma linha fecham alinhados mesmo com
 * títulos de comprimentos diferentes.
 *
 * Aqui a sobra fica toda antes do link, e não repartida entre os itens como
 * na seção de listas: são blocos pequenos lado a lado, e vão de item
 * diferente entre vizinhos salta à vista mais que um vão maior antes do link.
 */
.si-editorias__itens {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

/*
 * Três linhas reservadas para o título, para o fio entre as duas chamadas
 * cair na mesma altura em todos os blocos.
 *
 * Pedido do cliente em 25/08/2026: "considere que todas terão 3 linhas
 * também, ou seja, a divisória que divide eles precisa sempre estar alinhada
 * uma com a outra".
 *
 * ⚠️ Medido antes, a 1440px: o pé da primeira chamada caía em **três alturas
 * diferentes** entre os blocos lado a lado — 4812 com título de três linhas,
 * 4793 com duas. O fio acompanhava, e a linha do bloco ficava serrilhada.
 *
 * ⚠️ `min-height` e não `height`: título mais longo continua cabendo, e o fio
 * daquele bloco desce — é melhor um degrau eventual do que texto cortado. A
 * mesma escolha do `H-22`, na grade de destaques.
 *
 * ⚠️ Vale só dentro do bloco de editorias. A mesma variante compacta é usada
 * nas listas do meio da home, onde os itens não têm fio entre si e reservar
 * altura só abriria buracos.
 */
.si-editorias__itens .si-item__titulo {
	min-height: calc(3 * var(--si-line-height-h6) * var(--si-font-size-h6));
}

/*
 * Aqui o último item também fecha com fio, ao contrário das demais listas: no
 * frame os três SideStory têm stroke, e é o fio que separa a lista do link
 * "Ver tudo".
 */
.si-editorias__itens .si-item:last-child {
	padding-bottom: var(--si-space-4);
	border-bottom: var(--si-card-fio, 1px solid var(--si-color-border-subtle));
}

.si-editorias__link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	/* Alvo de toque de 44px em telas pequenas, sem deslocar o texto. */
	min-height: var(--si-space-11);
	gap: 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-decoration: none;
	text-transform: var(--si-text-transform-label);
}

.si-editorias__link:hover .si-editorias__link-texto {
	text-decoration: underline;
}

.si-editorias__link .si-icon {
	flex: 0 0 auto;
}

@media (min-width: 768px) {
	.si-editorias__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.si-editorias__inner {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Alvo de toque só importa onde se toca; no desktop o link volta ao natural. */
	.si-editorias__link {
		min-height: 0;
	}
}