/**
 * Saúde Insider — variante Entrevista da matéria (frame 127:6221).
 *
 * Carrega SOBRE o single.css quando o post tem o formato "entrevista"
 * (dependência declarada no enqueue: components → single → entrevista), e
 * as regras vivem sob .si-article--entrevista, classe que o post_class
 * ganha em inc/entrevista.php.
 *
 * Duas diferenças estruturais sobre a matéria padrão:
 *   1. Abertura com foto RETRATO 2:3 à esquerda e cabeçalho editorial à
 *      direita (nós 127:6284–127:6317), título no corpo de manchete.
 *   2. Corpo em pingue-pongue: pergunta = h3, resposta = parágrafos
 *      (convenção do editor, decisão D9). Os marcadores P./R. são ::before
 *      do tema — interface do formato, nunca digitados pelo editor.
 *
 * Trilho, capitular, caixa Recomendadas e anúncio no corpo são os do
 * single.css, sem override — a variante só muda o que o frame muda.
 *
 * Mobile-first; breakpoints literais (768): custom properties não
 * funcionam dentro de @media.
 */

/* =====================================================================
 * 1. ABERTURA (foto retrato + cabeçalho editorial)
 * ===================================================================== */

/*
 * O título volta ao corpo de manchete: o frame usa 48/50,4 com tracking
 * -0,96px (nó 127:6293) — exatamente os tokens de h1. O peso 700 de lá é o
 * artefato Georgia registrado; vale o 900 do token.
 */
.si-article--entrevista .si-article__titulo {
	font-size: var(--si-font-size-h1);
	font-weight: var(--si-font-weight-h1);
	line-height: var(--si-line-height-h1);
	letter-spacing: var(--si-letter-spacing-h1);
}

/*
 * Retrato 2:3 do frame (392x588), no lugar do 3:2 da matéria padrão. No
 * mobile o teto de 70vh evita que a foto engula a dobra inteira; quando o
 * teto corta, o object-fit herdado do componente mantém o enquadramento.
 */
.si-entrevista__img {
	aspect-ratio: 2 / 3;
	max-height: 70vh;
}

/*
 * Chapéu, título, linha fina e metadados na ordem do DOM — que é a ordem
 * de empilhamento no mobile decidida na spec (a foto vem DEPOIS do meta).
 */
.si-entrevista__intro {
	display: flex;
	flex-direction: column;
	gap: var(--si-space-6);
}

/* Título e linha fina, com o vão de 24 do frame entre eles (nó 127:6291). */
.si-entrevista__miolo {
	display: flex;
	flex-direction: column;
	gap: var(--si-space-6);
}

@media (min-width: 768px) {
	/*
	 * Linha do frame (nó 127:6284): foto de 392px + vão de 24 + coluna de
	 * texto. A figura vem depois no DOM (ordem do mobile) e o grid a
	 * devolve à esquerda. O modificador só existe com imagem destacada —
	 * sem foto, o cabeçalho segue em coluna única, sem célula vazia.
	 */
	.si-entrevista__header--com-foto {
		display: grid;
		grid-template-columns: 392px minmax(0, 1fr);
		gap: var(--si-space-6);
	}

	.si-entrevista__header--com-foto .si-entrevista__figure {
		grid-row: 1;
		grid-column: 1;
	}

	.si-entrevista__header--com-foto .si-entrevista__intro {
		grid-row: 1;
		grid-column: 2;
	}

	.si-entrevista__img {
		max-height: none;
	}

	/*
	 * Quando a coluna estica junto com a foto, a sobra de altura se divide
	 * em partes iguais acima e abaixo do miolo, como o frame distribui
	 * (49,5px de cada lado no nó 127:6291) — e o MetaBar cola no pé da
	 * coluna, alinhado à base da foto (nó 127:6296).
	 */
	.si-entrevista__miolo {
		margin-block: auto;
	}

	/* Os 28px são o pad-bottom do frame (space-7, não-★). Somados aos 24 da
	 * margem abaixo fecham os 52px até a abertura do texto — por isso o
	 * cabeçalho da entrevista não usa os 48px da matéria padrão. */
	.si-entrevista__header .si-article__meta {
		padding-bottom: var(--si-space-7);
	}

	.si-entrevista__header {
		margin-bottom: var(--si-space-6);
	}

	/*
	 * O single.css arma o MetaBar em três células iguais, desenhadas para a
	 * linha de 792px; na coluna de 376 da entrevista ele volta a flex: data
	 * e autor juntos à esquerda (vão de 8px, nó 127:6297) e ações à direita.
	 */
	.si-entrevista__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--si-space-2);
	}

	.si-entrevista__meta .si-article__meta-cell--autor {
		text-align: left;
	}

	.si-entrevista__meta .si-article__meta-cell--acoes {
		margin-left: auto;
	}
}

/* =====================================================================
 * 2. CORPO EM PINGUE-PONGUE (P./R.)
 * =====================================================================
 * Convenção do editor: pergunta = Heading 3, resposta = parágrafos comuns
 * (block pattern "Pergunta e resposta", inc/entrevista.php). O tema desenha
 * recuo e marcadores. Um post marcado como entrevista sem nenhum h3
 * renderiza como matéria comum — as regras só agem sobre h3 e o que vem
 * depois dele.
 */

/*
 * Recuo do par: célula do marcador (24) + vão (12) medidos no frame (nós
 * 202:1855/202:1858); 32px no mobile, decisão da spec. O ~ alcança TODOS os
 * parágrafos depois da primeira pergunta — resposta com vários parágrafos
 * herda o recuo — sem tocar nos parágrafos de abertura.
 */
.si-article--entrevista .si-article__content > h3,
.si-article--entrevista .si-article__content > h3 ~ p {
	position: relative;
	padding-left: var(--si-space-8);
}

@media (min-width: 768px) {
	.si-article--entrevista .si-article__content > h3,
	.si-article--entrevista .si-article__content > h3 ~ p {
		/* 36px do frame = 24 da célula + 12 do vão. */
		padding-left: calc(var(--si-space-6) + var(--si-space-3));
	}
}

/*
 * A pergunta abandona a tipografia de heading: o frame a desenha no corpo
 * do texto, só que em negrito (16/25,6 — nó 202:1859). Valem os tokens body
 * pela política registrada de 03/08; o Georgia do frame é a variável de
 * fonte desatualizada.
 */
.si-article--entrevista .si-article__content > h3 {
	font-family: var(--si-font-sans);
	font-size: var(--si-font-size-body);
	font-weight: var(--si-font-weight-bold);
	line-height: var(--si-line-height-body);
	letter-spacing: var(--si-letter-spacing-body);
}

/* 8px entre pergunta e resposta do MESMO par (nó 202:1868); os 24 entre
 * pares vêm do respiro padrão do corpo (single.css). */
.si-article--entrevista .si-article__content > h3 + p {
	margin-top: var(--si-space-2);
}

/*
 * Marcadores. São interface do formato (exceção registrada à regra de
 * ouro): o editor nunca digita "P."/"R." — e leitores de tela anunciam o
 * content dos ::before, o que aqui até ajuda. Só o PRIMEIRO parágrafo
 * depois do h3 ganha o "R."; os demais parágrafos da resposta seguem só
 * com o recuo. A inconsistência interna do frame (1º par com rótulos de
 * 11px, demais de 13px) foi unificada nos tokens label, decisão da spec.
 */
.si-article--entrevista .si-article__content > h3::before,
.si-article--entrevista .si-article__content > h3 + p::before {
	content: "P.";
	position: absolute;
	left: 0;
	/* Centra o rótulo (16,5px de linha) na primeira linha do corpo (29,75px). */
	top: calc((var(--si-line-height-body) * var(--si-font-size-body) - var(--si-line-height-label) * var(--si-font-size-label)) / 2);
	width: var(--si-space-6);
	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-align: center;
	text-transform: var(--si-text-transform-label);
}

.si-article--entrevista .si-article__content > h3 + p::before {
	content: "R.";
	color: var(--si-color-text-tertiary);
}