/**
 * RAVOLLI — DOBRAS EDITORIAIS v1.2.0
 * Camada: Blocksy Child (apresentação). Classificação: CANÔNICO.
 *
 * O que as páginas Materiais e Sobre a Ravolli têm em comum: dobras de largura
 * total (wp:cover com a classe `ravolli-fold`), tipografia sobre foto, degradê,
 * botões, FAQ, topo colado no cabeçalho. Extraído de ravolli-materiais.css 1.1.1
 * sem mudar o visual do Materiais.
 *
 * Escopo: `:is(.ravolli-materiais, .ravolli-sobre)` — os wrappers das duas
 * páginas (`:is()` tem a especificidade do argumento mais forte, uma classe,
 * então os seletores ficam com o mesmo peso de antes).
 * Carregado quando o conteúdo tem `ravolli-fold` (inc/ravolli-folds.php).
 *
 * 1.1.0 (01/10/2026): o visual das dúvidas (.ravolli-faq__item, .ravolli-faq__more)
 * foi para assets/css/ravolli-faq.css, que este arquivo declara como dependência.
 *
 * 1.2.0 (03/10/2026): a cor do degradê virou variável por dobra (`--rm-fade-rgb`,
 * marinho por padrão), para uma dobra poder usar outra cor sem repetir o degradê.
 * Opacidades e direções idênticas às anteriores.
 */

.ravolli-materiais,
.ravolli-sobre,
.ravolli-mat {
	--rm-navy: var(--wp--preset--color--brand-primary);
	--rm-gold: var(--wp--preset--color--accent-gold);
	--rm-bg: var(--wp--preset--color--bg-base);
	--rm-alt: var(--wp--preset--color--surface-alt);
	--rm-line: var(--wp--preset--color--border-divider);
	--rm-text: var(--wp--preset--color--text-body);
	--rm-text-2: var(--wp--preset--color--text-secondary);
	/* Dourado como texto sobre fundo claro: o token puro falha contraste. */
	--rm-gold-text: color-mix(in srgb, var(--rm-gold) 60%, var(--rm-navy));
	--rm-on-navy: var(--rm-bg);
	/* Só legendas e notas sobre foto; corpo de texto usa --rm-on-navy cheio. */
	--rm-on-navy-2: color-mix(in srgb, var(--rm-bg) 86%, transparent);
	--rm-display: var(--wp--preset--font-family--display, Lora, serif);
	--rm-body: var(--wp--preset--font-family--body, 'Source Serif 4', serif);
}

/*
 * Títulos: a camada legada (style.css) crava font-size e line-height de h1/h2/h3
 * em `.entry-content` com !important, lendo estas variáveis (era a origem do h1
 * de 36px e do h2 de 28px). Em vez de disputar com !important, a página
 * redefine as variáveis no próprio escopo.
 */
:is(.ravolli-materiais, .ravolli-sobre) {
	--ravolli-title-display: clamp(34px, 4.6vw, 62px);
	--ravolli-title-section: clamp(30px, 3.8vw, 52px);
	--ravolli-title-subsection: 24px;
	--ravolli-title-line-height: 1.12;
}

/* Largura total: dobras alinhadas a "full" ocupam a janela, não a coluna. */
body.ravolli-folds-page {
	overflow-x: clip; /* 100vw inclui a barra de rolagem */
}

/*
 * Espaço do topo: o Blocksy põe padding-top no .ct-container-full quando
 * data-vertical-spacing inclui "top". O filtro PHP (ravolli-brand-editorial.php)
 * é o caminho canônico; isto garante o topo colado no header mesmo se o PHP
 * não chegar ao servidor ou o valor vier de opção por página.
 */
body.ravolli-folds-page .ct-container-full[data-vertical-spacing*="top"] {
	padding-top: 0;
}

:is(.ravolli-materiais, .ravolli-sobre) .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/*
 * Sem faixas entre dobras e seções: o blockGap do Gutenberg/Blocksy
 * (margin-block-end 24px em cada filho) deixava 24px de fundo claro entre
 * uma cover e a seguinte.
 */
:is(.ravolli-materiais, .ravolli-sobre).is-layout-constrained > * {
	margin-block: 0;
}

/* ---------------------------------------------------------------------
 * Dobras (wp:cover)
 * ------------------------------------------------------------------ */

:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold {
	padding: 0; /* o core põe 1em; a largura do texto é decidida no inner container */
	color: var(--rm-on-navy);
	font-family: var(--rm-body);
	/* Cor do degradê (R, G, B): marinho da marca; cada dobra pode trocar só isto. */
	--rm-fade-rgb: 6, 14, 30;
	--rm-fold-grad: linear-gradient(to top, rgba(var(--rm-fade-rgb), .78) 0%, rgba(var(--rm-fade-rgb), .40) 45%, rgba(var(--rm-fade-rgb), .10) 100%);
}

@media (min-width: 900px) {
	/* Texto à esquerda, módulo à direita: o escurecimento acompanha. */
	:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold {
		--rm-fold-grad: linear-gradient(90deg, rgba(var(--rm-fade-rgb), .72) 0%, rgba(var(--rm-fade-rgb), .45) 45%, rgba(var(--rm-fade-rgb), .12) 100%);
	}

	/* Dobras com conteúdo até a borda direita: escurecimento uniforme. */
	:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold--dureza,
	:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold--fecho {
		--rm-fold-grad: linear-gradient(rgba(var(--rm-fade-rgb), .62), rgba(var(--rm-fade-rgb), .74));
	}
}

/*
 * A sobreposição do cover (cor sólida, dimRatio 100 enquanto não há foto) só
 * some quando a dobra tem imagem/vídeo (ou camadas de fundo trocadas pelo JS:
 * `has-fold-bg`); o gradiente marinho vive num ::after acima da imagem e das
 * camadas do JS (z-index 0, depois no DOM) e abaixo do texto (inner container,
 * z-index 1). Sem foto, a dobra segue marinho sólido.
 */
.wp-block-cover.ravolli-fold:has(> .wp-block-cover__image-background) > .wp-block-cover__background,
.wp-block-cover.ravolli-fold:has(> .wp-block-cover__video-background) > .wp-block-cover__background,
.wp-block-cover.ravolli-fold.has-fold-bg > .wp-block-cover__background {
	opacity: 0;
}

.wp-block-cover.ravolli-fold:has(> .wp-block-cover__image-background)::after,
.wp-block-cover.ravolli-fold:has(> .wp-block-cover__video-background)::after,
.wp-block-cover.ravolli-fold.has-fold-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--rm-fold-grad);
}

/* Estágio/material sem imagem: o fundo cai no marinho da marca, não no cinza do cover. */
.wp-block-cover.ravolli-fold.has-fold-bg {
	background-color: var(--wp--preset--color--brand-primary);
}

/* Camadas de fundo trocadas pelo JS (ravolli-folds.js): crossfade entre duas. */
.ravolli-fold__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity .6s ease;
	pointer-events: none;
}

.ravolli-fold__bg.is-on {
	opacity: 1;
}

/* O core não garante o empilhamento do texto: sem isto o ::after (z-index 0) o cobre. */
:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold > .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

/*
 * Conteúdo da dobra: 1200px centralizado. O core crava margin:0 e width:auto
 * em `.wp-block-cover.has-custom-content-position.has-custom-content-position
 * .wp-block-cover__inner-container` (5 classes) — a origem dos 462px colados à
 * esquerda. A classe repetida + o escopo da página (6) vencem sem !important.
 */
:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold.has-custom-content-position.has-custom-content-position > .wp-block-cover__inner-container {
	width: min(100% - 48px, 1200px);
	max-width: none;
	margin-inline: auto;
	padding-block: 72px 48px;
	color: var(--rm-on-navy);
}

@media (min-width: 900px) {
	:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold.has-custom-content-position.has-custom-content-position > .wp-block-cover__inner-container {
		padding-block: 96px 64px;
	}

	/* Texto centralizado na vertical; só a abertura fica embaixo. */
	:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold:not(.ravolli-fold--abertura) {
		align-items: center;
	}
}

/* Tipografia: escopo alto porque o Blocksy estiliza heading e parágrafo. */
:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold .wp-block-cover__inner-container h1.wp-block-heading,
:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold .wp-block-cover__inner-container h2.wp-block-heading {
	margin-block-end: 0;
	font-family: var(--rm-display);
	font-weight: 400;
	line-height: 1.12;
	text-wrap: balance;
	color: var(--rm-on-navy);
}

:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold .wp-block-cover__inner-container h1.wp-block-heading {
	max-width: 16ch;
}

:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold .wp-block-cover__inner-container h2.wp-block-heading {
	max-width: 20ch;
}

:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold .wp-block-cover__inner-container h1.wp-block-heading em,
:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold .wp-block-cover__inner-container h2.wp-block-heading em {
	font-style: italic;
	color: var(--rm-gold);
}

:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold .wp-block-cover__inner-container p {
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: 400;
	max-width: 46ch;
	color: var(--rm-on-navy);
}

.ravolli-eyebrow {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--rm-gold-text);
}

:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold .wp-block-cover__inner-container p.ravolli-eyebrow {
	margin-bottom: 0;
	font-size: 12px;
	font-weight: 600;
	max-width: none;
	color: var(--rm-gold);
}

/* Frase de apoio da dobra, abaixo do título. */
:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold .wp-block-cover__inner-container p.ravolli-fold__lead {
	max-width: 46ch;
}

:is(.ravolli-materiais, .ravolli-sobre) .wp-block-cover.ravolli-fold .wp-block-cover__inner-container > * + * {
	margin-top: 16px;
}

/* ---------------------------------------------------------------------
 * CTAs no padrão do site: preenchido dourado / contorno.
 * ------------------------------------------------------------------ */

.ravolli-ctas {
	gap: 12px;
	justify-content: center;
}

/*
 * Mesmo tamanho nos dois botões (o contorno do core traz padding próprio).
 * A regra legada de botões do style.css não alcança `.ravolli-ctas *`
 * (hotfix 2.1), então não há !important aqui.
 */
.ravolli-ctas .wp-block-button .wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 14px 26px;
	line-height: 1.2;
	border: 1px solid var(--rm-gold);
	border-radius: 2px;
	background: var(--rm-gold);
	color: var(--rm-navy);
	font-family: var(--rm-body);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
}

.ravolli-ctas .wp-block-button .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--rm-gold) 90%, transparent);
	color: var(--rm-navy);
}

/* Blocksy pinta o contorno com a cor do botão (marinho): o dourado é declarado aqui. */
.wp-block-buttons.ravolli-ctas .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--rm-gold);
	background: transparent;
	color: var(--rm-bg);
}

.wp-block-buttons.ravolli-ctas .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--rm-gold) 16%, transparent);
	color: var(--rm-bg);
}

.ravolli-ctas .wp-block-button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--rm-on-navy);
	outline-offset: 2px;
}

/* Dúvidas (itens, remissão e cabeçalho): assets/css/ravolli-faq.css, dependência deste arquivo. */

@media (prefers-reduced-motion: reduce) {
	.ravolli-fold__bg {
		transition: none;
	}
}