/**
 * Carousel track — Figma node 3002:684.
 * Section bleed / title alignment — Figma 610:7128 / 610:7162.
 */

.ipopi-carousel {
	position: relative;
	width: 100%;
}

.ipopi-carousel__track {
	display: flex;
	gap: var(--ipopi-space-100, 8px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 2px;
}

.ipopi-carousel__track::-webkit-scrollbar {
	display: none;
}

.ipopi-carousel__track > .ipopi-card,
.ipopi-carousel__track > article {
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.ipopi-carousel__viewport {
	width: 100%;
}

/* Inset do 1º card em relação à coluna do título (984px centrada no inner). */
.ipopi-section__inner {
	--ipopi-carousel-align-inset: max(
		0px,
		calc((100% - var(--ipopi-section-width, 984px)) / 2)
	);
	--ipopi-carousel-bleed-left: var(--ipopi-carousel-align-inset, 0px);
}

@media (max-width: 767px) {
	.ipopi-section__inner {
		--ipopi-carousel-bleed-left: var(--ipopi-space-400, 24px);
	}

	.ipopi-section__carousel {
		align-self: stretch;
		width: calc(100% + var(--ipopi-space-400, 24px));
		max-width: none;
		margin-right: calc(-1 * var(--ipopi-space-400, 24px));
	}

	.ipopi-section__carousel .ipopi-carousel__viewport {
		width: calc(100% + var(--ipopi-space-400, 24px) + var(--ipopi-carousel-bleed-left, 0px));
		margin-left: calc(-1 * var(--ipopi-carousel-bleed-left, 0px));
		margin-right: calc(-1 * var(--ipopi-space-400, 24px));
		padding-left: var(--ipopi-carousel-bleed-left, 0px);
		overflow: hidden;
	}
}

@media (min-width: 768px) {
	.ipopi-carousel {
		width: 100%;
		max-width: none;
		margin: 0;
	}

	.ipopi-carousel__viewport {
		overflow: hidden;
	}

	.ipopi-carousel__track {
		overflow: visible;
		scroll-snap-type: none;
		transition: transform 320ms ease;
		will-change: transform;
	}

	.ipopi-carousel__track > .ipopi-card {
		flex: 0 0 var(--ipopi-card-width-desktop, 322px);
	}

	/*
	 * margin-left negativo estende o viewport para a esquerda; padding-left compensa
	 * para o 1º card continuar alinhado ao título. Ao paginar, os cards ocupam
	 * todo o espaço à esquerda (gutter + padding da seção).
	 */
	.ipopi-section__inner {
		--ipopi-carousel-bleed-left: calc(
			var(--ipopi-carousel-align-inset, 0px) + var(--ipopi-space-700, 48px)
		);
	}

	.ipopi-section__carousel {
		align-self: stretch;
		width: 100%;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	.ipopi-section__carousel .ipopi-carousel__viewport {
		width: calc(
			100% + var(--ipopi-carousel-bleed-extra, 308px) + var(--ipopi-carousel-bleed-left, 0px)
		);
		max-width: none;
		margin-left: calc(-1 * var(--ipopi-carousel-bleed-left, 0px));
		margin-right: calc(-1 * var(--ipopi-carousel-bleed-extra, 308px));
		padding-left: calc(
			var(--ipopi-carousel-align-inset, 0px) + var(--ipopi-carousel-bleed-left, 0px)
		);
		overflow: hidden;
		box-sizing: border-box;
	}
}