/**
 * RAVOLLI — A RAVOLLI (CARTA) v1.0.0
 * Camada: Blocksy Child (apresentação). Página "A Ravolli" (wrapper `.ravolli-carta`).
 * Fonte visual: docs/prototipos/a-ravolli-carta.html (v3). Tokens: theme.json.
 * Carregado só na página que usa (ver inc/ravolli-carta.php), depois de
 * ravolli-folds.css, de onde vêm só os botões (`.ravolli-ctas`) e o eyebrow
 * (`.ravolli-eyebrow`), ambos globais e lidos pelas variáveis `--rm-*` abaixo.
 *
 * Uma carta, não dobras: faixas de largura total (claro / areia), coluna de
 * leitura estreita e polaroids nas margens. Zero texto aqui: tudo vive no editor.
 *
 * Mobile primeiro; desktop a partir de 1000px (notas: 800px).
 *
 * Nota de técnica: o core crava `margin-inline: auto !important` nos filhos de
 * um grupo "constrained" (menos `.alignfull`). Os filhos das faixas são
 * centralizados por isso e a largura de leitura vem de `max-width`, sem !important.
 */

.ravolli-carta {
	--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-alt-strong: var(--wp--preset--color--surface-alt-strong);
	--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);
	--rm-display: var(--wp--preset--font-family--display, Lora, serif);
	--rm-body: var(--wp--preset--font-family--body, 'Source Serif 4', serif);
	--cr-shadow: color-mix(in srgb, var(--rm-navy) 14%, transparent);
	--cr-wide: 1120px;

	/*
	 * Títulos: a camada legada (style.css) crava font-size de h1/h2/h3 em
	 * `.entry-content` com !important, lendo estas variáveis. Menores que os das
	 * dobras: aqui o título convive com a leitura, não com uma foto.
	 */
	--ravolli-title-display: clamp(30px, 4.4vw, 48px);
	--ravolli-title-section: clamp(24px, 3vw, 34px);
	--ravolli-title-subsection: 24px;
	--ravolli-title-line-height: 1.14;
	--ravolli-title-tracking: 0;

	font-family: var(--rm-body);
	font-size: 18px;
	line-height: 1.75;
	color: var(--rm-text);
}

/* Largura total e topo colado no cabeçalho (sem hero do Blocksy). */
body.ravolli-carta-page {
	overflow-x: clip; /* 100vw inclui a barra de rolagem */
}

body.ravolli-carta-page .ct-container-full[data-vertical-spacing*="top"] {
	padding-top: 0;
}

/* ---------------------------------------------------------------------
 * Faixas
 * ------------------------------------------------------------------ */

.ravolli-carta.is-layout-constrained > .ravolli-carta__band {
	width: 100vw;
	max-width: 100vw;
	margin-block: 0;
	margin-inline: calc(50% - 50vw);
	padding-block: 112px;
	padding-inline: 20px;
	background: var(--rm-bg);
}

.ravolli-carta.is-layout-constrained > .ravolli-carta__band.is-alt {
	background: var(--rm-alt);
}

.ravolli-carta__band.is-layout-constrained > * {
	max-width: var(--cr-wide);
}

@media (min-width: 1000px) {
	.ravolli-carta.is-layout-constrained > .ravolli-carta__band {
		padding-block: 184px;
	}
}

/* ---------------------------------------------------------------------
 * Texto
 * ------------------------------------------------------------------ */

.ravolli-carta p {
	margin: 0;
	font-size: 18px;
	line-height: 1.75;
	color: var(--rm-navy);
}

.ravolli-carta p.is-soft,
.ravolli-carta .ravolli-carta__lead {
	color: var(--rm-text);
}

.ravolli-carta p.ravolli-eyebrow {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--rm-gold-text);
}

.ravolli-carta h1.wp-block-heading,
.ravolli-carta h2.wp-block-heading,
.ravolli-carta h3.wp-block-heading {
	margin: 0;
	color: var(--rm-navy);
	text-wrap: balance;
}

.ravolli-carta h1.wp-block-heading em,
.ravolli-carta h2.wp-block-heading em,
.ravolli-carta .ravolli-carta__big em {
	font-style: italic;
	color: var(--rm-gold-text);
}

.ravolli-carta .ravolli-carta__salut {
	font-family: var(--rm-display);
	font-size: clamp(22px, 2.6vw, 28px);
	font-style: italic;
	line-height: 1.3;
	color: var(--rm-gold-text);
}

.ravolli-carta .ravolli-carta__drop::first-letter {
	float: left;
	padding: 6px 10px 0 0;
	font-family: var(--rm-display);
	font-size: 3.4em;
	line-height: 0.85;
	color: var(--rm-gold-text);
}

/* Frase grande, centralizada. */
.ravolli-carta .ravolli-carta__big {
	max-width: 22em;
	font-family: var(--rm-display);
	font-size: clamp(22px, 2.8vw, 32px);
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
}

.ravolli-carta .ravolli-carta__sign {
	font-family: var(--rm-display);
	font-size: clamp(26px, 3.2vw, 36px);
	font-style: italic;
	line-height: 1.1;
}

/* ---------------------------------------------------------------------
 * Colunas: celular empilha; desktop vira grade
 * ------------------------------------------------------------------ */

.ravolli-carta .wp-block-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 56px;
	justify-items: center;
	margin: 0;
}

.ravolli-carta .wp-block-columns > .wp-block-column {
	min-width: 0;
	margin: 0;
}

/* Coluna lateral vazia (sem polaroid) não ocupa altura. */
.ravolli-carta .wp-block-columns > .wp-block-column:empty {
	display: none;
}

/* Colunas com polaroid: o quadro centralizado na coluna. */
.ravolli-carta .wp-block-columns > .wp-block-column:has(> .ravolli-polaroid) {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Ritmo do texto: 28px entre parágrafos; o eyebrow cola no título. */
.ravolli-carta .wp-block-column > * + *,
.ravolli-carta .ravolli-carta__band > * + * {
	margin-top: 28px;
}

.ravolli-carta .wp-block-column > .ravolli-eyebrow + *,
.ravolli-carta .ravolli-carta__band > .ravolli-eyebrow + * {
	margin-top: 16px;
}

/* __letter: texto no centro, polaroids antes/depois (celular) ou nas margens (desktop). */
.ravolli-carta .ravolli-carta__letter > .ravolli-carta__tx {
	width: 100%;
	max-width: 32em;
}

@media (min-width: 1000px) {
	.ravolli-carta .ravolli-carta__letter.wp-block-columns {
		grid-template-columns: 1fr minmax(0, 32em) 1fr;
		/* 88px a partir de 1440px; encolhe antes disso para a margem caber a polaroid. */
		gap: clamp(40px, 12vw - 84px, 88px);
		align-items: start;
		justify-items: stretch;
	}

	.ravolli-carta__band.is-layout-constrained > .ravolli-carta__letter {
		max-width: 1280px;
	}

	.ravolli-carta .ravolli-carta__letter > .ravolli-carta__tx {
		grid-column: 2;
		grid-row: 1;
		max-width: none;
	}

	.ravolli-carta .ravolli-carta__letter > .ravolli-carta__side {
		grid-row: 1;
		padding-top: 40px;
	}

	.ravolli-carta .ravolli-carta__letter > .ravolli-carta__side:first-child {
		grid-column: 1;
		align-items: flex-end;
	}

	.ravolli-carta .ravolli-carta__letter > .ravolli-carta__side:last-child {
		grid-column: 3;
		align-items: flex-start;
	}

	/* Margem estreita (1000–1300px): a polaroid encolhe até caber. */
	.ravolli-carta .ravolli-carta__side > .ravolli-polaroid {
		width: min(230px, 70vw, 100%);
	}
}

/* __open: texto + polaroid. */
.ravolli-carta .ravolli-carta__open > .wp-block-column:first-child {
	display: grid;
	justify-items: center;
	gap: 22px;
	text-align: center;
}

.ravolli-carta .ravolli-carta__open > .wp-block-column:first-child > * {
	margin: 0;
}

.ravolli-carta .ravolli-carta__open .ravolli-carta__lead {
	max-width: 30em;
}

@media (min-width: 1000px) {
	.ravolli-carta .ravolli-carta__open.wp-block-columns {
		grid-template-columns: 7fr 4fr;
		gap: 48px;
		align-items: center;
		justify-items: stretch;
	}

	.ravolli-carta .ravolli-carta__open > .wp-block-column:first-child {
		justify-items: start;
		text-align: left;
	}

	.ravolli-carta .ravolli-carta__open > .wp-block-column:last-child {
		align-items: center;
	}
}

/* __gen: polaroid grande + texto. */
.ravolli-carta .ravolli-carta__gen > .wp-block-column:last-child {
	width: 100%;
	max-width: 28em;
}

@media (min-width: 1000px) {
	.ravolli-carta .ravolli-carta__gen.wp-block-columns {
		grid-template-columns: 5fr 6fr;
		gap: 104px;
		align-items: center;
		justify-items: stretch;
	}

	.ravolli-carta .ravolli-carta__gen > .wp-block-column:first-child {
		align-items: flex-end;
	}
}

/* __parte, __crenca (cabeça) e __fecho: texto centralizado, coluna estreita. */
.ravolli-carta .ravolli-carta__parte.is-layout-constrained > :not(.wp-block-columns),
.ravolli-carta .ravolli-carta__fecho.is-layout-constrained > :not(.wp-block-columns) {
	max-width: 32em;
	text-align: center;
}

.ravolli-carta .ravolli-carta__parte.is-layout-constrained > h2,
.ravolli-carta .ravolli-carta__valores.is-layout-constrained > h2 {
	max-width: 22em;
	text-align: center;
}

.ravolli-carta .ravolli-carta__crenca > .ravolli-eyebrow,
.ravolli-carta .ravolli-carta__valores > .ravolli-eyebrow {
	text-align: center;
}

.ravolli-carta .ravolli-carta__crenca > * + * {
	margin-top: 40px;
}

.ravolli-carta .ravolli-carta__crenca > .ravolli-eyebrow + * {
	margin-top: 24px;
}

/* __trio: três polaroids, quebra de linha, centralizadas. */
.ravolli-carta .ravolli-carta__trio.wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px 56px;
}

.ravolli-carta .ravolli-carta__band > .ravolli-carta__trio {
	margin-top: 88px;
}

.ravolli-carta .ravolli-carta__trio > .wp-block-column {
	flex: 0 0 auto;
}

/* Assinatura e botões. */
.ravolli-carta .ravolli-carta__fecho > .ravolli-carta__sign + .ravolli-eyebrow {
	margin-top: 12px;
}

.ravolli-carta .ravolli-carta__fecho > .ravolli-ctas {
	margin-top: 40px;
}

/* Contorno sobre fundo claro: o padrão compartilhado é claro sobre foto. */
.ravolli-carta .wp-block-buttons.ravolli-ctas .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--rm-navy);
	color: var(--rm-navy);
}

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

.ravolli-carta .ravolli-ctas .wp-block-button .wp-block-button__link:focus-visible {
	outline-color: var(--rm-navy);
}

/* ---------------------------------------------------------------------
 * Valores: bilhetes
 * ------------------------------------------------------------------ */

.ravolli-carta .ravolli-carta__notes.wp-block-columns {
	gap: 40px;
	justify-items: stretch;
	text-align: left;
}

.ravolli-carta .ravolli-carta__band > .ravolli-carta__notes {
	margin-top: 80px;
}

.ravolli-carta .ravolli-carta__notes > .wp-block-column {
	padding-top: 18px;
	border-top: 1px solid var(--rm-gold);
}

.ravolli-carta .ravolli-carta__notes > .wp-block-column > * + * {
	margin-top: 10px;
}

.ravolli-carta .ravolli-carta__notes h3.wp-block-heading {
	font-style: italic;
	color: var(--rm-navy);
}

/* Contraste: text-secondary sobre a faixa areia fica abaixo de 4,5:1 no corpo de 16px. */
.ravolli-carta .ravolli-carta__notes p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--rm-text);
}

@media (min-width: 800px) {
	.ravolli-carta .ravolli-carta__notes.wp-block-columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 36px;
	}
}

/* ---------------------------------------------------------------------
 * Polaroid
 * ------------------------------------------------------------------ */

.ravolli-carta .ravolli-polaroid {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: min(230px, 70vw);
	margin: 0;
	padding: 12px 12px 0;
	background: white;
	box-shadow: 0 10px 30px var(--cr-shadow), 0 1px 2px var(--cr-shadow);
	transform: rotate(var(--cr-tilt, -3deg));
}

/* Fita dourada translúcida no topo. */
.ravolli-carta .ravolli-polaroid::before {
	content: "";
	position: absolute;
	top: -11px;
	left: 50%;
	width: 74px;
	height: 22px;
	background: color-mix(in srgb, var(--rm-gold) 38%, transparent);
	transform: translateX(-50%) rotate(-2deg);
}

.ravolli-carta .ravolli-polaroid img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Sem foto ainda: quadrado neutro no lugar, nunca ícone quebrado. */
.ravolli-carta .ravolli-polaroid img:not([src]),
.ravolli-carta .ravolli-polaroid img[src=""] {
	display: none;
}

.ravolli-carta .ravolli-polaroid:not(:has(img[src]:not([src=""])))::after {
	content: "";
	order: -1;
	aspect-ratio: 1 / 1;
	background: var(--rm-alt-strong);
}

.ravolli-carta .ravolli-polaroid figcaption {
	margin: 0;
	padding: 12px 4px 16px;
	font-family: var(--rm-display);
	font-size: 15px;
	font-style: italic;
	line-height: 1.3;
	text-align: center;
	color: var(--rm-text-2);
}

/* Polaroid grande (gerações): mantém a proporção da foto. */
.ravolli-carta .ravolli-polaroid.is-grande {
	width: min(380px, 84vw);
	padding: 14px 14px 0;
	box-shadow: 0 14px 40px var(--cr-shadow), 0 1px 2px var(--cr-shadow);
	--cr-tilt: -2deg;
}

.ravolli-carta .ravolli-polaroid.is-grande img {
	aspect-ratio: auto 4 / 3;
	object-fit: cover;
}

.ravolli-carta .ravolli-polaroid.is-grande:not(:has(img[src]:not([src=""])))::after {
	aspect-ratio: 4 / 3;
}

.ravolli-carta .ravolli-polaroid.is-grande figcaption {
	padding: 14px 4px 18px;
	font-size: 16px;
}

/* Inclinação alternada, entre -5° e 5°, pela posição da coluna. */
.ravolli-carta .ravolli-carta__open > .wp-block-column:last-child .ravolli-polaroid {
	--cr-tilt: 4deg;
}

.ravolli-carta .ravolli-carta__comeco .ravolli-carta__side:first-child .ravolli-polaroid {
	--cr-tilt: -5deg;
}

.ravolli-carta .ravolli-carta__comeco .ravolli-carta__side:last-child .ravolli-polaroid {
	--cr-tilt: 3deg;
}

.ravolli-carta .ravolli-carta__crenca .ravolli-carta__side:last-child .ravolli-polaroid {
	--cr-tilt: -4deg;
}

.ravolli-carta .ravolli-carta__trio > .wp-block-column:nth-child(3n + 1) .ravolli-polaroid {
	--cr-tilt: -3deg;
}

.ravolli-carta .ravolli-carta__trio > .wp-block-column:nth-child(3n + 2) .ravolli-polaroid {
	--cr-tilt: 2.5deg;
}

.ravolli-carta .ravolli-carta__trio > .wp-block-column:nth-child(3n) .ravolli-polaroid {
	--cr-tilt: -1.5deg;
}