/*
 * RAVOLLI — AVALIAÇÕES DO GOOGLE NA HOME v1.1.0 (03/10/2026)
 * inc/ravolli-home-reviews.php — carregado só onde o conteúdo tem [ravolli_home_reviews].
 *
 * Camada: Blocksy Child (apresentação). Só tokens do tema (--wp--preset--*).
 *
 * VIDRO ("liquid glass"). Estende a receita do checkout (ravolli-checkout-glass.css):
 * mesmas variáveis (--rg-*), mesmo desenho — o desfoque vive num ::before, nunca
 * no contêiner (backdrop-filter no contêiner prenderia descendentes fixos e
 * criaria um "backdrop root"); mesmo fallback sem backdrop-filter e mesmo
 * prefers-reduced-transparency. O que muda para o efeito Apple: borda clara
 * 1px com a de cima mais forte, brilho especular (gradiente + inset) no topo,
 * sombra mais macia e cantos de 24px. A classe `.ravolli-glass-card` é o
 * primitivo; ao reutilizar em outra dobra, só ela é necessária.
 * (Dívida: o checkout ainda tem a própria cópia da receita, sob body.ravolli-glass.
 * Unificar num arquivo único exige regressão do checkout — fora deste bloco.)
 *
 * O vidro precisa de algo atrás para refratar: a dobra tem fundo em degradê da
 * paleta + discos de borda definida (dourado e marinho) sob os cartões.
 *
 * Contraste (AA): texto marinho (#060e1e) e rótulo text-body (#606060) sobre o
 * pior ponto do fundo (disco marinho sob painel branco 62%) seguem acima de 5:1.
 * Performance: desfoque 12px no celular e 18px a partir de 768px (o do checkout);
 * nada é animado, sem filtro SVG.
 *
 * Layout: celular = carrossel horizontal com scroll-snap (rolagem nativa, sem JS);
 * 768px+ = 2 colunas; 1280px+ = até 4; acima de 4 quebra em linhas de mesma altura; com 1, 2
 * ou 3 cartões na última linha, eles são centralizados. Cartões com a mesma altura.
 *
 * 1.1.0 (03/10/2026): quantidade variável de cartões, fundo em 3 modos (padrão, cor da
 * paleta, imagem — ver "Fundo da dobra" abaixo) e dobra por último na Home (sem margem
 * em cima nem embaixo).
 */

/* 100vw inclui a barra de rolagem: contém o transbordo (a Home já faz o mesmo). */
body:has(.ravolli-reviews) {
	overflow-x: clip;
}

.ravolli-reviews {
	--rg-navy: var(--wp--preset--color--brand-primary, #060e1e);
	--rg-gold: var(--wp--preset--color--accent-gold, #BC9C6D);
	--rg-base: var(--wp--preset--color--bg-base, #fafaf8);
	--rg-panel: rgba(255, 255, 255, .62);
	--rg-edge: rgba(255, 255, 255, .6);
	--rg-edge-top: rgba(255, 255, 255, .95);
	--rg-blur: 12px;
	--rr-gutter: var(--wp--custom--ravolli--layout-reference--gutter-mobile, 16px);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	/* Última dobra da Home: sem margem em cima (o respiro vem do bloco anterior e do padding
	   daqui, na escala 64/96) e sem margem embaixo (ver a regra do contêiner abaixo). */
	margin: 0 calc(50% - 50vw);
	padding: 64px 0 48px;
	color: var(--rg-navy);

	/* Fallback sem color-mix, depois a versão com os tokens (como o checkout). */
	background:
		radial-gradient(46rem 30rem at 8% 12%, rgba(188, 156, 109, .30), transparent 70%),
		radial-gradient(40rem 30rem at 96% 90%, rgba(6, 14, 30, .12), transparent 70%),
		var(--rg-base);
	background:
		radial-gradient(46rem 30rem at 8% 12%, color-mix(in srgb, var(--rg-gold) 30%, transparent), transparent 70%),
		radial-gradient(40rem 30rem at 96% 90%, color-mix(in srgb, var(--rg-navy) 12%, transparent), transparent 70%),
		var(--rg-base);
}

/* Discos de borda definida atrás dos cartões: é o que o vidro "dobra". */
.ravolli-reviews::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(circle at 18% 58%, rgba(188, 156, 109, .55) 0 7rem, transparent 7.05rem),
		radial-gradient(circle at 84% 34%, rgba(6, 14, 30, .20) 0 9rem, transparent 9.05rem),
		radial-gradient(circle at 38% 24%, rgba(6, 14, 30, .14) 0 4.5rem, transparent 4.55rem),
		radial-gradient(circle at 62% 74%, rgba(188, 156, 109, .50) 0 5rem, transparent 5.05rem);
	background:
		radial-gradient(circle at 18% 58%, color-mix(in srgb, var(--rg-gold) 55%, transparent) 0 7rem, transparent 7.05rem),
		radial-gradient(circle at 84% 34%, color-mix(in srgb, var(--rg-navy) 20%, transparent) 0 9rem, transparent 9.05rem),
		radial-gradient(circle at 38% 24%, color-mix(in srgb, var(--rg-navy) 14%, transparent) 0 4.5rem, transparent 4.55rem),
		radial-gradient(circle at 62% 74%, color-mix(in srgb, var(--rg-gold) 50%, transparent) 0 5rem, transparent 5.05rem);
}

.ravolli-reviews__inner {
	width: 100%;
	margin: 0 auto;
}

.ravolli-reviews__title {
	margin: 0 var(--rr-gutter) 32px;
	text-align: center;
	font-family: var(--wp--preset--font-family--display, Lora, serif);
	font-size: clamp(28px, 2.4vw, 42px);
	font-weight: 400;
	line-height: 1.15;
	color: var(--rg-navy);
}

/* ---------- Lista: carrossel no celular ---------- */

.ravolli-reviews__list {
	display: flex;
	gap: 16px;
	margin: 0;
	/* Espaço embaixo/em cima para a sombra dos cartões não ser cortada pelo overflow. */
	padding: 16px var(--rr-gutter) 48px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--rr-gutter);
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.ravolli-reviews__list::-webkit-scrollbar {
	display: none;
}

.ravolli-reviews__list:focus-visible {
	outline: 2px solid var(--rg-navy);
	outline-offset: -2px;
}

.ravolli-reviews__item {
	display: flex;
	flex: 0 0 min(84vw, 340px);
	margin: 0;
	scroll-snap-align: start;
}

/* ---------- Cartão de vidro (primitivo) ---------- */

.ravolli-glass-card {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	border-radius: 24px;
}

.ravolli-glass-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	box-sizing: border-box;
	border-radius: inherit;
	/* Brilho especular: faixa clara no topo que se dissolve até ~40% da altura. */
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 40%),
		var(--rg-panel);
	-webkit-backdrop-filter: blur(var(--rg-blur)) saturate(140%);
	backdrop-filter: blur(var(--rg-blur)) saturate(140%);
	border: 1px solid var(--rg-edge);
	border-top-color: var(--rg-edge-top);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .8),
		inset 0 -1px 0 rgba(255, 255, 255, .25),
		0 12px 32px rgba(6, 14, 30, .10);
}

/* ---------- Conteúdo do cartão ---------- */

.ravolli-review {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	padding: 24px;
}

.ravolli-review__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ravolli-review__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, Lora, serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--rg-navy);
}

.ravolli-review__stars {
	display: inline-flex;
	gap: 2px;
	/* Estrelas são ilustrativas: o valor está no aria-label ("5 de 5 estrelas"). */
	color: var(--rg-gold);
}

.ravolli-review__star {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.ravolli-review__text {
	margin: 0;
	padding: 0;
	border: 0;
}

.ravolli-review__text p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--rg-navy);
}

/* Fica na base: o texto cresce, a indicação não sobe (cartões de mesma altura). */
.ravolli-review__source {
	margin: auto 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(6, 14, 30, .12);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-body, #606060);
}

/* ---------- Botão ---------- */

.ravolli-reviews__cta-wrap {
	margin: 0;
	padding: 0 var(--rr-gutter);
	text-align: center;
}

.ravolli-reviews__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 32px;
	border: 1px solid var(--rg-navy);
	border-radius: 999px;
	background-color: var(--rg-navy);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .06em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	color: #fff;
}

.ravolli-reviews__cta:hover {
	background-color: var(--wp--preset--color--chrome-dark, #01040a);
	color: #fff;
}

.ravolli-reviews__cta:focus-visible {
	outline: 2px solid var(--rg-navy);
	outline-offset: 3px;
}

/* ---------- 768px+: grade, desfoque do checkout ---------- */

@media (min-width: 768px) {
	.ravolli-reviews {
		--rg-blur: 18px;

		padding: 96px 0 96px;
	}

	.ravolli-reviews__inner {
		width: min(100% - 48px, 1440px);
	}

	.ravolli-reviews__title {
		margin-inline: 0;
		margin-bottom: 48px;
	}

	/* 4 trilhas; cada cartão ocupa 2 (= 2 colunas). */
	.ravolli-reviews__list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: 1fr; /* todas as linhas com a mesma altura */
		gap: 24px;
		padding: 0;
		overflow: visible;
		scroll-snap-type: none;
	}

	.ravolli-reviews__item {
		flex: none;
		grid-column: span 2;
	}

	/* Quantidade ímpar: o último cartão sozinho fica no meio, não esticado nem à esquerda. */
	.ravolli-reviews__item:nth-child(2n+1):last-child {
		grid-column: 2 / span 2;
	}

	.ravolli-reviews__cta-wrap {
		margin-top: 48px;
		padding: 0;
	}
}

/* 1280px+: 4 colunas = 8 trilhas, cartão ocupa 2. A última linha incompleta (1, 2 ou
   3 cartões) começa na trilha que a centraliza; linhas completas não mudam. */
@media (min-width: 1280px) {
	.ravolli-reviews__list {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.ravolli-reviews__item:nth-child(2n+1):last-child {
		grid-column: span 2;
	}

	.ravolli-reviews__item:nth-child(4n+1):last-child {
		grid-column: 4 / span 2;
	}

	.ravolli-reviews__item:nth-child(4n+1):nth-last-child(2) {
		grid-column: 3 / span 2;
	}

	.ravolli-reviews__item:nth-child(4n+1):nth-last-child(3) {
		grid-column: 2 / span 2;
	}
}

/* ---------- Fundo da dobra (admin: Padrão / Cor / Imagem) ---------- */

/* Cor da paleta (var --rr-bg posta pelo PHP). Sem a cor, cai no degradê padrão. */
.ravolli-reviews--bg-color {
	background: var(--rr-bg, var(--rg-base));
}

/* A cor pediu fundo liso: os discos só ficam se o contraste no pior caso passar (PHP). */
.ravolli-reviews--no-discs::before {
	display: none;
}

/*
 * Imagem: <img> decorativa em cover atrás de tudo. É `position: absolute`, então a altura
 * da dobra vem do conteúdo e a imagem carregar não move nada (sem CLS).
 *
 * Contraste (AA) com QUALQUER imagem: o pior caso é uma imagem preta, em que o vidro vira
 * branco a `a` sobre preto = 255a. O rótulo (#606060, L = 0,117) precisa de ≥ 4,5:1, ou
 * seja, painel com L ≥ 0,70 → a ≥ 0,86 (a = 0,85 dá 4,43:1, reprova; a = 0,88 dá 4,78:1).
 * O texto marinho passa de 14:1 em qualquer a. O título fica fora dos cartões, direto
 * sobre a imagem: ganha uma placa branca a 88% (marinho sobre 224 = 14,6:1 no pior caso).
 * Sem discos (ficariam por cima da foto sem função).
 */
.ravolli-reviews--bg-image {
	--rg-panel: rgba(255, 255, 255, .88);

	background: var(--rg-base);
}

.ravolli-reviews--bg-image::before {
	display: none;
}

.ravolli-reviews__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
}

.ravolli-reviews--bg-image .ravolli-reviews__title {
	width: fit-content;
	max-width: calc(100% - 2 * var(--rr-gutter));
	margin-inline: auto;
	padding: 12px 24px;
	border-radius: 24px;
	background: rgba(255, 255, 255, .88);
}

/* Última dobra: encosta no rodapé. O contêiner da Blocksy reserva 50px embaixo do
   conteúdo (medido em 03/10/2026); com esta dobra por último ele vira uma faixa vazia. */
.ct-container-full:has(.ravolli-reviews) {
	padding-bottom: 0;
}

/* Sem suporte a backdrop-filter: cartão sólido, legível (token da paleta). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ravolli-glass-card::before {
		background: var(--rg-base);
	}
}

/* Quem pede menos transparência: sólido, sem desfoque. */
@media (prefers-reduced-transparency: reduce) {
	.ravolli-glass-card::before {
		background: var(--rg-base);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* Sem movimento: nada aqui anima; só garante que a rolagem do carrossel não suavize. */
@media (prefers-reduced-motion: reduce) {
	.ravolli-reviews__list {
		scroll-behavior: auto;
	}
}

@media print {
	.ravolli-reviews__list {
		display: block;
		overflow: visible;
	}

	.ravolli-reviews__item {
		break-inside: avoid;
		margin-bottom: 16px;
	}
}