/* =============================================================
   Carrossel
   O deslocamento é scroll nativo com scroll-snap: já funciona
   com dedo, roda do mouse e teclado antes de qualquer script.
   O JavaScript só acrescenta as setas e o estado delas.
   ============================================================= */

.carrossel {
	position: relative;
	--por-vez: 1;
}

@media (min-width: 40em) {
	.carrossel { --por-vez: 2; }
}

@media (min-width: 62em) {
	.carrossel { --por-vez: 3; }
}

.carrossel__trilho {
	display: flex;
	gap: var(--e-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Espaço para a sombra dos cards não ser cortada no scroll. */
	padding-block: var(--e-1) var(--e-4);
	overscroll-behavior-x: contain;

	/* A barra de rolagem some, a rolagem fica. O deslocamento continua
	   funcionando com dedo, trackpad e teclado; o que sai é só o desenho da
	   barra, que ocupava uma faixa cinza sob os cards. Quem indica que há
	   mais notícias são as setas — e elas se desabilitam nas pontas. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

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

/* O reset zera o scroll-behavior do documento; o trilho tem o seu. */
@media (prefers-reduced-motion: reduce) {
	.carrossel__trilho {
		scroll-behavior: auto;
	}
}

.carrossel__item {
	flex: 0 0 calc( ( 100% - ( var(--por-vez) - 1 ) * var(--e-5) ) / var(--por-vez) );
	scroll-snap-align: start;
}

.carrossel__controles {
	display: flex;
	justify-content: flex-end;
	gap: var(--e-2);
	margin-block-start: var(--e-4);
}

.carrossel__botao {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--c-borda);
	border-radius: 50%;
	background: var(--c-fundo);
	color: var(--c-texto-forte);
	font-size: var(--t-md);
	line-height: 1;
	transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao);
}

.carrossel__botao:hover:not(:disabled) {
	background: var(--c-acao);
	border-color: var(--c-acao);
	color: var(--c-texto-inverso);
}

.carrossel__botao:disabled {
	opacity: 0.4;
	cursor: default;
}

/* Sem JavaScript não há setas — e o trilho continua rolável. */
.carrossel__controles[hidden] {
	display: none;
}