/**
 * Carrossel de destaques.
 *
 * Consome os tokens do tema.
 *
 * TEXTO NUNCA SOBRE A FOTO
 *
 * O modelo é o banner da Bonfim: texto num painel liso, a peça ao lado (ou em
 * cima, no celular). Até aqui o texto ficava sobre a foto, com um véu escuro
 * por baixo. Três razões para abandonar isso:
 *
 *   1. QUALIDADE. As fotos de coroa são retratos (1463×2560). Esticadas numa
 *      faixa panorâmica de 21:8, o navegador ampliava um recorte do meio da
 *      foto — a coroa virava um borrão de pétalas. Numa coluna próxima do
 *      quadrado, a mesma foto entra reduzida, nítida inclusive em tela 2x.
 *   2. ESPAÇO PARA O TEXTO. O conteúdo ficava preso em 34rem sobre o véu; no
 *      painel ele ocupa mais da metade do banner, com título maior.
 *   3. CONTRASTE VERIFICÁVEL. Sobre foto, o contraste depende da imagem que a
 *      Jane subir — e várias coroas têm faixa escrita, que competia com o
 *      título. No painel ele é medido de antemão: título 4,75:1 no pior ponto
 *      da textura (mínimo 3:1 para texto grande), texto 8,04:1.
 */

.jf-banners {
	position: relative;
	margin: 0 0 var(--jf-section-y);
	border-radius: var(--jf-radius-xl);
	overflow: hidden;
	background-color: var(--jf-color-surface-alt);
	background-image: var(--jf-pattern-petalas);
	box-shadow: var(--jf-shadow-md);
}

/* Coluna `minmax(0, 1fr)`, e não a implícita `auto`: com `auto`, a coluna
   media o slide pela proporção (altura × 12/5) e ficava mais larga que a tela
   sempre que o texto fazia o slide crescer. O `overflow: hidden` do carrossel
   escondia o excesso — e com ele a foto. */
.jf-banners__palco {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* Todos os slides na mesma célula: a troca não muda a altura da página. */
.jf-banner {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	flex-direction: column;
}

.jf-banner[hidden] {
	display: none;
}

/* ---------- Celular e tablet: foto em cima, texto embaixo ---------- */

.jf-banner__imagem {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	/* A coroa fica no terço de cima; o cavalete, embaixo, pode sair. */
	object-position: 50% 30%;
	margin: 0;
	border-radius: 0;
}

.jf-banner__conteudo {
	width: 100%;
	padding: var(--jf-pad-lg);
	color: var(--jf-color-text);
}

.jf-banner__titulo {
	max-width: 20ch;
	margin: 0 0 var(--jf-space-2xs);
	color: var(--jf-color-primary);
	font-family: var(--jf-font-heading);
	font-size: var(--jf-size-2xl);
	font-weight: var(--jf-weight-bold);
	line-height: var(--jf-leading-tight);
	letter-spacing: var(--jf-tracking-tight);
	text-wrap: balance;
}

.jf-banner__texto {
	max-width: 38ch;
	margin: 0 0 var(--jf-space-md);
	color: var(--jf-color-text);
	font-size: var(--jf-size-base);
	line-height: var(--jf-leading-snug);
}

.jf-banner__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--jf-control-height);
	padding: var(--jf-space-2xs) var(--jf-space-lg);
	background-color: var(--jf-color-primary);
	color: var(--jf-color-text-on-dark);
	font-size: var(--jf-size-base);
	font-weight: var(--jf-weight-semibold);
	text-decoration: none;
	border-radius: var(--jf-radius-pill);
	transition: background-color var(--jf-transition), transform var(--jf-transition);
}

.jf-banner__cta:hover {
	background-color: var(--jf-color-primary-hover);
	color: var(--jf-color-text-on-dark);
}

.jf-banner__cta:active {
	transform: translateY(1px);
}

@media (min-width: 40em) {
	.jf-banner__titulo {
		font-size: var(--jf-size-3xl);
	}

	.jf-banner__texto {
		font-size: var(--jf-size-lg);
	}
}

/* ---------- Desktop: painel de texto + foto ao lado ---------- */

@media (min-width: 60em) {
	/* A foto é absoluta, presa à coluna da direita. Como item de grade ou de
	   fluxo, ela trazia a altura intrínseca de retrato (mais de 1000px) para o
	   slide, e o texto centralizado saía por baixo do banner. */
	.jf-banner {
		flex-direction: row;
		align-items: center;
		aspect-ratio: 12 / 5;
	}

	.jf-banner__imagem {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 45%;
		height: 100%;
		aspect-ratio: auto;
		object-position: 50% 35%;
	}

	.jf-banner__conteudo {
		width: 55%;
		padding: var(--jf-space-xl) clamp(var(--jf-space-xl), 4vw, var(--jf-space-2xl));
	}

	.jf-banner__titulo {
		margin-bottom: var(--jf-space-sm);
	}

	.jf-banner__texto {
		margin-bottom: var(--jf-space-lg);
	}
}

@media (min-width: 75em) {
	.jf-banner__titulo {
		font-size: var(--jf-size-4xl);
	}
}

/* Entrada do conteúdo quando o slide assume: sobe de leve, sem espetáculo. */
.jf-banner--ativo .jf-banner__conteudo > * {
	animation: jf-banner-entra var(--jf-duration-slow) var(--jf-ease) both;
}

.jf-banner--ativo .jf-banner__titulo { animation-delay: 0ms; }
.jf-banner--ativo .jf-banner__texto  { animation-delay: var(--jf-stagger); }
.jf-banner--ativo .jf-banner__cta    { animation-delay: calc(var(--jf-stagger) * 2); }

@keyframes jf-banner-entra {
	from { opacity: 0; transform: translateY(var(--jf-rise)); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Controles ---------- */

/* Sobre a foto, no canto de baixo — nunca sobre o texto.
 *
 * No celular a foto está em cima, com altura de 10/16 da largura. `cqw` (a
 * largura do carrossel, ver `container-type` abaixo) permite calcular onde a
 * foto termina e assentar os controles na borda dela; no topo, a pílula
 * cobria justamente as flores. */
.jf-banners {
	container-type: inline-size;
}

.jf-banners__controles {
	position: absolute;
	z-index: 3;
	top: calc(100cqw * 10 / 16 - var(--jf-tap-min) - var(--jf-space-3xs) * 2 - var(--jf-space-sm));
	right: var(--jf-space-sm);
	display: flex;
	align-items: center;
	gap: var(--jf-space-3xs);
	padding: var(--jf-space-3xs);
	background-color: var(--jf-color-surface);
	border-radius: var(--jf-radius-pill);
	box-shadow: var(--jf-shadow-sm);
}

@media (min-width: 60em) {
	.jf-banners__controles {
		top: auto;
		bottom: var(--jf-space-sm);
	}
}

.jf-banners__pausa,
.jf-banners__seta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--jf-tap-min);
	height: var(--jf-tap-min);
	min-height: var(--jf-tap-min);
	padding: 0;
	background: transparent;
	color: var(--jf-color-primary);
	border: 0;
	border-radius: var(--jf-radius-pill);
	font-size: var(--jf-size-sm);
	cursor: pointer;
}

.jf-banners__pausa:hover,
.jf-banners__seta:hover {
	background-color: var(--jf-color-primary-soft);
	color: var(--jf-color-primary-hover);
}

.jf-banners__pontos {
	display: flex;
	align-items: center;
	gap: var(--jf-space-3xs);
}

/* O alvo de toque tem 44px; o ponto visível é menor e fica centrado nele. */
.jf-banners__ponto {
	position: relative;
	width: var(--jf-tap-min);
	height: var(--jf-tap-min);
	min-height: var(--jf-tap-min);
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--jf-radius-pill);
	cursor: pointer;
}

.jf-banners__ponto::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	transform: translate(-50%, -50%);
	background-color: var(--jf-color-border-strong);
	border-radius: var(--jf-radius-pill);
	transition: background-color var(--jf-transition), width var(--jf-transition);
}

.jf-banners__ponto--ativo::before {
	width: 26px;
	background-color: var(--jf-color-primary);
}

/* Em telas estreitas as setas saem: os pontos bastam, e seis botões numa
   pílula cobririam metade da foto. */
@media (max-width: 34em) {
	.jf-banners__seta {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jf-banner--ativo .jf-banner__conteudo > * {
		animation: none;
	}

	.jf-banners__ponto::before {
		transition: none;
	}
}