/**
 * Saúde Insider — variante Cúpula da matéria (frames 206:2338 e 273:1159).
 *
 * Carrega sobre single.css (dependência declarada no enqueue) quando o post
 * pertence à editoria "cupula", e tudo aqui vive sob o body .si-single--cupula
 * (inc/cupula.php). A "marca" da variante, medida nos frames: banner de seção
 * no lugar do chapéu, título e linha fina centrados, sem autor visível, sem
 * capitular, e as molduras de vídeo/galeria no corpo. Nenhuma cor nova.
 *
 * Mobile-first; breakpoints literais (480/768/1024/1280): custom properties
 * não funcionam dentro de @media.
 */

/* =====================================================================
 * 1. BANNER DA SEÇÃO (nós 206:2387 / 379:148)
 * =====================================================================
 * Caixa cinza da largura da coluna (792, herdada do .si-article__flow), com
 * o wordmark da coluna e "por {titular}" empilhados e centrados.
 */

.si-section-banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: var(--si-space-6);
	/*
	 * 24px acima (somados aos 24 do container = 48 do frame até o header do
	 * site) e 24 abaixo (somados aos 24 de padding do cabeçalho da matéria
	 * = 48 até o título, como no frame).
	 */
	margin-block: var(--si-space-6);
	background-color: var(--si-color-surface-muted);
	text-align: center;
}

/* 40px de respiro vertical no desktop (nó 207:2824); 24px já basta no
 * mobile, onde o wordmark encolhe pelo clamp. */
@media (min-width: 768px) {
	.si-section-banner {
		padding-block: var(--si-space-10);
	}
}

/*
 * O wordmark não é heading (está acima do h1): <p> com os tokens display.
 * A caixa alta vem daqui — o banco guarda "Cúpula", o frame mostra CÚPULA.
 */
.si-section-banner__nome {
	font-family: var(--si-font-serif);
	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);
	text-transform: uppercase;
}

.si-section-banner__nome a {
	color: var(--si-color-text-primary);
	text-decoration: none;
}

.si-section-banner__nome a:hover,
.si-section-banner__nome a:focus-visible {
	color: var(--si-color-brand-primary);
}

/* "por Lana Pinheiro": mesma dupla 18px/1.45 da linha fina (nós 379:152-153). */
.si-section-banner__byline {
	color: var(--si-color-text-primary);
	font-size: var(--si-font-size-subheadline);
	line-height: var(--si-line-height-subheadline);
}

/* O frame não dá affordance de link à byline; o sublinhado aparece só na
 * interação, como na landing da coluna (archive.css). */
.si-section-banner__byline-link {
	color: inherit;
	text-decoration: none;
}

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

/* =====================================================================
 * 2. CABEÇALHO CENTRADO (nó 207:2788)
 * =====================================================================
 * Herda toda a estrutura do .si-article__header (single.css); o modificador
 * só centraliza — o chapéu e o autor nem são impressos pelo template.
 */

.si-article__header--center {
	align-items: center;
	text-align: center;
}

/* A MetaBar volta a ocupar a largura toda dentro do flex centrado. */
.si-article__header--center .si-article__meta {
	width: 100%;
}

/*
 * Sem a célula do autor, a grade de três colunas da base não se aplica:
 * data à esquerda, ações à direita (nó 207:2798), em qualquer largura.
 */
@media (min-width: 768px) {
	.si-article__header--center .si-article__meta {
		display: flex;
		justify-content: space-between;
	}
}

/* =====================================================================
 * 3. SEM CAPITULAR (decisão da spec A)
 * =====================================================================
 * O cabeçalho centralizado muda o ritmo de abertura: o frame da Cúpula não
 * tem o "U" de 96px da Notícia padrão. Desfaz o ::first-letter da base.
 */

.si-single--cupula .si-article__content > p:first-of-type::first-letter {
	float: none;
	margin: 0;
	/* Zera também o respiro que o L2-18 pôs na base para alinhar a capitular
	 * pelo alto — aqui não há capitular a alinhar. */
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* =====================================================================
 * 4. CORPO — FIGURAS E BLOCOS DE MÍDIA
 * ===================================================================== */

/* 4px entre imagem e legenda (frame); o reset global zera as margens. */
.si-single--cupula .si-article__content .wp-block-image figcaption {
	margin-top: var(--si-space-1);
}

/* Vídeo e galeria respiram 32px (pad-top do VideoBox no frame), não os
 * 24px do fluxo de parágrafos da base. */
.si-single--cupula .si-article__content > .wp-block-video,
.si-single--cupula .si-article__content > .wp-block-embed,
.si-single--cupula .si-article__content > .wp-block-gallery {
	margin-top: var(--si-space-8);
}

/* =====================================================================
 * 5. VÍDEO — MOLDURAS (nós 273:1543 vinho / 273:1571 clara)
 * =====================================================================
 * Block styles registrados em inc/cupula.php (D10). Vinho é o padrão e
 * cobre também blocos salvos sem classe de estilo — daí o :not(clara).
 */

.si-single--cupula .si-article__content .wp-block-video video,
.si-single--cupula .si-article__content .wp-block-embed__wrapper iframe {
	width: 100%;
	/* 16:9 dos posters do frame (744x418 / 776x437): reserva a altura antes
	 * de o player carregar — nada de layout shift. */
	aspect-ratio: 16 / 9;
	height: auto;
	background-color: var(--si-black);
}

/* Moldura vinho: fundo brand, respiro de 24 (nó 273:1544). */
.si-single--cupula .si-article__content .wp-block-video:not(.is-style-moldura-clara),
.si-single--cupula .si-article__content .wp-block-embed:not(.is-style-moldura-clara) {
	padding: var(--si-space-6);
	background-color: var(--si-color-brand-primary);
}

/*
 * Moldura clara: respiro de 8 (nó 273:1609). O #d6d6d2 é o cinza dos fios
 * usado como superfície — não existe token semântico de superfície nesse
 * tom, então a primitiva entra com este registro (mesmo critério dos
 * valores literais comentados).
 */
.si-single--cupula .si-article__content .wp-block-video.is-style-moldura-clara,
.si-single--cupula .si-article__content .wp-block-embed.is-style-moldura-clara {
	padding: var(--si-space-2);
	background-color: var(--si-gray-300);
}

/*
 * Legenda externa do frame (nós 273:1559/273:1588): fio no topo e texto
 * cinza sobre o fundo da página, FORA da moldura. As margens negativas
 * anulam o padding da moldura e o fundo próprio cobre a cor por trás —
 * o markup do bloco continua o nativo.
 */
.si-single--cupula .si-article__content .wp-block-video > figcaption,
.si-single--cupula .si-article__content .wp-block-embed > figcaption {
	padding-top: var(--si-space-2);
	border-top: 1px solid var(--si-color-border-subtle);
	background-color: var(--si-color-surface-page);
	color: var(--si-color-text-tertiary);
	font-size: var(--si-font-size-caption);
	line-height: var(--si-line-height-caption);
	text-align: left;
}

.si-single--cupula .si-article__content .wp-block-video:not(.is-style-moldura-clara) > figcaption,
.si-single--cupula .si-article__content .wp-block-embed:not(.is-style-moldura-clara) > figcaption {
	margin: var(--si-space-6) calc(-1 * var(--si-space-6)) calc(-1 * var(--si-space-6));
}

.si-single--cupula .si-article__content .wp-block-video.is-style-moldura-clara > figcaption,
.si-single--cupula .si-article__content .wp-block-embed.is-style-moldura-clara > figcaption {
	margin: var(--si-space-2) calc(-1 * var(--si-space-2)) calc(-1 * var(--si-space-2));
}

/* =====================================================================
 * 6. GALERIA — CHROME ESCURO (nós 273:1626 / 273:1811)
 * =====================================================================
 * Chrome escuro único (decisão 2 da spec B); o layout deriva da CONTAGEM
 * de imagens, sem escolha do editor e sem campo novo:
 *   1 imagem  → figura simples, sem chrome;
 *   2–3       → coluna (estado "em-coluna" do frame);
 *   4+        → palco + régua de miniaturas (estado "grande").
 * Sem :has() (navegador antigo), fica o degradê: grade de miniaturas com o
 * chrome escuro para qualquer contagem — nada quebra.
 */

.si-single--cupula .si-article__content .wp-block-gallery.has-nested-images {
	display: grid;
	/* Miniaturas de ~94px (3:2) como a régua do frame; o auto-fill preenche
	 * a linha em qualquer largura sem media query. */
	grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
	gap: var(--si-space-2);
	padding: var(--si-space-2);
	background-color: var(--si-color-surface-inverse);
}

/*
 * As figuras internas largam o flex do core e viram células 3:2.
 * O :not(#individual-image) copia o hack de especificidade do próprio
 * block-library (que fixa width por ele em nível de ID) — sem ele, o
 * calc(33%...) do core vence e as células encolhem.
 */
.si-single--cupula .si-article__content .wp-block-gallery.has-nested-images > figure.wp-block-image:not(#individual-image) {
	width: 100%;
	margin: 0;
	aspect-ratio: 3 / 2;
}

.si-single--cupula .si-article__content .wp-block-gallery.has-nested-images > figure.wp-block-image:not(#individual-image) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 2–3 imagens: coluna única, cada foto no palco inteiro. */
.si-single--cupula .si-article__content .wp-block-gallery.has-nested-images:not(:has(> figure.wp-block-image:nth-child(4))) {
	grid-template-columns: minmax(0, 1fr);
}

/* 4+: a primeira foto é o palco, atravessando todas as faixas. */
.si-single--cupula .si-article__content .wp-block-gallery.has-nested-images:has(> figure.wp-block-image:nth-child(4)) > figure.wp-block-image:first-child {
	grid-column: 1 / -1;
}

/*
 * No palco e na coluna a foto não é recortada: retrato ganha o pillarbox
 * sobre o fundo escuro, como no frame (nó 284:5128); as paisagens 3:2 do
 * padrão editorial preenchem por inteiro do mesmo jeito. Mesmo hack de
 * especificidade do core no img (o object-fit do .is-cropped vem em ID).
 */
.si-single--cupula .si-article__content .wp-block-gallery.has-nested-images:not(:has(> figure.wp-block-image:nth-child(4))) > figure.wp-block-image:not(#individual-image) img,
.si-single--cupula .si-article__content .wp-block-gallery.has-nested-images:has(> figure.wp-block-image:nth-child(4)) > figure.wp-block-image:not(#individual-image):first-child img {
	object-fit: contain;
}

/*
 * A régua do frame não mostra legenda nas miniaturas. Padrão visually-hidden
 * (e não display:none): a legenda continua anunciada por leitor de tela.
 */
.si-single--cupula .si-article__content .wp-block-gallery.has-nested-images:has(> figure.wp-block-image:nth-child(4)) > .wp-block-image:not(:first-child) figcaption {
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/* Legenda da foto sobre o palco: tokens de caption no véu do core. */
.si-single--cupula .si-article__content .wp-block-gallery.has-nested-images .wp-block-image figcaption {
	color: var(--si-color-text-inverse);
	font-size: var(--si-font-size-caption);
	line-height: var(--si-line-height-caption);
}

/* Legenda externa da galeria: mesmo desenho da legenda do vídeo — fora do
 * chrome, com fio no topo (nó 273:1642). */
.si-single--cupula .si-article__content .wp-block-gallery.has-nested-images > .blocks-gallery-caption {
	grid-column: 1 / -1;
	margin: 0 calc(-1 * var(--si-space-2)) calc(-1 * var(--si-space-2));
	padding-top: var(--si-space-2);
	border-top: 1px solid var(--si-color-border-subtle);
	background-color: var(--si-color-surface-page);
	color: var(--si-color-text-tertiary);
	font-size: var(--si-font-size-caption);
	line-height: var(--si-line-height-caption);
	text-align: left;
}

/* 1 imagem: sem setas, contador ou régua no frame — vira figura simples. */
.si-single--cupula .si-article__content .wp-block-gallery.has-nested-images:not(:has(> figure.wp-block-image:nth-child(2))) {
	padding: 0;
	background: none;
}

.si-single--cupula .si-article__content .wp-block-gallery.has-nested-images:not(:has(> figure.wp-block-image:nth-child(2))) > .wp-block-image {
	aspect-ratio: auto;
}

.si-single--cupula .si-article__content .wp-block-gallery.has-nested-images:not(:has(> figure.wp-block-image:nth-child(2))) > .blocks-gallery-caption {
	margin: 0;
}