/* =========================================================================
   COMPONENTE — TRILHA DESLIZANTE
   =========================================================================
   Sequencia horizontal com scroll-snap. Os cartoes de dentro sao problema de
   quem usa a trilha; aqui ficam so a area rolavel e os controles.

   O seletor do botao leva o elemento e o escopo do tema de proposito: o kit
   global do Elementor injeta `.elementor-kit-NN button` e pode transformar o
   controle em retangulo azul quando a ordem de carregamento muda.
   ========================================================================= */

.moinho-trilha {
	position: relative;
}

[data-moinho-arrastavel] {
	user-select: none;
}

[data-moinho-arrastavel].is-arrastando {
	scroll-snap-type: none;
	scroll-behavior: auto;
}

[data-moinho-arrastavel].is-arrastando,
[data-moinho-arrastavel].is-arrastando * {
	cursor: grabbing;
}

.moinho-trilha__controles {
	display: flex;
	justify-content: flex-end;
	gap: var(--moinho-space-2xs);
	margin-block-end: var(--moinho-space-sm);
}

.moinho-trilha__controles[hidden] {
	display: none;
}

.moinho-site button.moinho-trilha__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.75rem;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-circle);
	background: var(--moinho-color-glass);
	box-shadow: inset 0 1px 0 var(--moinho-color-glass-border);
	color: var(--moinho-surface-fg);
	line-height: 0;
	cursor: pointer;
	--moinho-icon-size: 1.125rem;
	transition: transform var(--moinho-duration-fast) var(--moinho-ease-out),
	            border-color var(--moinho-duration-normal) var(--moinho-ease-out),
	            background-color var(--moinho-duration-normal) var(--moinho-ease-out),
	            opacity var(--moinho-duration-normal) var(--moinho-ease-out);
}

.moinho-site button.moinho-trilha__botao > .moinho-icon {
	flex: none;
	inline-size: var(--moinho-icon-size);
	block-size: var(--moinho-icon-size);
	color: inherit;
	pointer-events: none;
}

@media (hover: hover) {
	.moinho-site button.moinho-trilha__botao:hover:not(:disabled) {
		border-color: var(--moinho-color-border-strong);
		background: var(--moinho-color-glass-strong);
	}
}

.moinho-site button.moinho-trilha__botao:active:not(:disabled) {
	transform: scale(0.94);
}

.moinho-site button.moinho-trilha__botao:disabled {
	color: var(--moinho-surface-fg-muted);
	opacity: 0.72;
	cursor: default;
}

.moinho-site button.moinho-trilha__botao:focus-visible {
	outline: var(--moinho-border-width-strong) solid var(--moinho-color-focus);
	outline-offset: var(--moinho-focus-ring-offset);
}

.moinho-trilha__lista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(min(21rem, 82vw), 1fr);
	gap: var(--moinho-space-sm);
	margin: 0;
	padding: 0 0 var(--moinho-space-2xs);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

@media (min-width: 64rem) {
	.moinho-trilha__lista {
		grid-auto-columns: minmax(24rem, 1fr);
	}

	.moinho-trilha__lista--estreita {
		grid-auto-columns: minmax(21rem, 1fr);
	}
}

.moinho-trilha__lista:focus-visible {
	outline: var(--moinho-border-width-strong) solid var(--moinho-color-focus);
	outline-offset: var(--moinho-focus-ring-offset);
}

.moinho-trilha__lista > li {
	scroll-snap-align: start;
}

/* =========================================================================
   PONTOS DE POSICAO
   =========================================================================
   O ponto ativo vira pilula em vez de mudar de cor: a diferenca de LARGURA
   e legivel de longe e nao depende de contraste de cor, entao continua
   funcionando em superficie clara e escura sem uma regra para cada.
   ========================================================================= */

.moinho-trilha__pontos {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--moinho-space-3xs);
	margin-block-start: var(--moinho-space-sm);
}

.moinho-trilha__pontos[hidden] {
	display: none;
}

.moinho-site button.moinho-trilha__ponto {
	inline-size: var(--moinho-space-2xs);
	block-size: var(--moinho-space-2xs);
	padding: 0;
	border: 0;
	border-radius: var(--moinho-radius-pill);
	background: var(--moinho-surface-fg);
	opacity: .28;
	cursor: pointer;
	transition:
		inline-size var(--moinho-duration-normal) var(--moinho-ease-spring),
		opacity var(--moinho-duration-normal) var(--moinho-ease-out);
}

@media (hover: hover) {
	.moinho-site button.moinho-trilha__ponto:hover {
		opacity: .55;
	}
}

.moinho-site button.moinho-trilha__ponto[aria-current="true"] {
	inline-size: var(--moinho-space-md);
	opacity: 1;
}

.moinho-site button.moinho-trilha__ponto:focus-visible {
	outline: var(--moinho-border-width-strong) solid var(--moinho-color-focus);
	outline-offset: var(--moinho-focus-ring-offset);
}