/**
 * Carrossel da página inicial.
 * Pedido com vbox_irb_use( 'carrossel' ).
 *
 * A faixa é uma lista com scroll-snap: funciona sem JavaScript, com o dedo e
 * com o teclado. O carrossel.js só acrescenta os botões e a troca automática.
 */

.carrossel {
	margin-top: var(--e-5);
}

.carrossel__faixa {
	display: flex;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	border-radius: var(--raio);
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.carrossel__faixa::-webkit-scrollbar {
	display: none;
}

.carrossel__item {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.carrossel__item a {
	display: block;
}

.carrossel__item img {
	display: block;
	width: 100%;
	height: auto;
	/* Reserva a altura antes de a imagem chegar (banner de 1000 × 250). */
	aspect-ratio: 4 / 1;
	object-fit: cover;
}

.carrossel__controles {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-3);
	margin-top: var(--e-3);
}

.carrossel__controles[hidden] {
	display: none;
}

.carrossel__botao {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--c-linha);
	border-radius: 50%;
	background: #fff;
	color: var(--c-acao);
	cursor: pointer;
}

.carrossel__botao:hover {
	border-color: var(--c-acao);
	background: var(--c-acao);
	color: #fff;
}

.carrossel__posicao {
	min-width: 3.5rem;
	color: var(--c-texto-suave);
	font-size: var(--t-sm);
	text-align: center;
}

@media (max-width: 40rem) {
	/* No celular, quem tem imagem própria (quadrada) usa a proporção dela. */
	.carrossel__item--com-celular img {
		aspect-ratio: 1;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.carrossel__faixa {
		scroll-behavior: smooth;
	}
}