/* Shared anonymized customer carousel for Home and About. */

.home-customer-segments {
	overflow: hidden;
}

.home-customer-segments__viewport {
	width: 100%;
	overflow: hidden;
	padding: var(--space-4) 0;
	touch-action: pan-y;
}

.home-customer-segments__viewport:focus-visible {
	outline: 2px solid var(--color-red);
	outline-offset: 4px;
}

.home-customer-segments__track {
	display: flex;
	gap: var(--space-16);
	width: max-content;
}

.home-customer-segments__group {
	display: flex;
	gap: var(--space-16);
	flex: none;
}

.home-customer-segment {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: var(--space-16);
	align-items: start;
	width: 280px;
	min-height: 126px;
	padding: var(--space-24);
	border: 1px solid var(--color-white);
	border-radius: var(--radius-sm);
	background: var(--color-white);
}

.home-customer-segment__icon {
	display: grid;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	background: var(--color-soft-blue);
	color: var(--color-blue);
	place-items: center;
}

.home-customer-segment h3 {
	margin: 0 0 var(--space-8);
	color: var(--color-blue);
	font-size: 17px;
}

.home-customer-segment p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
}

.home-customer-segments__viewport.is-animating .home-customer-segments__track {
	animation: home-customer-scroll var(--home-customer-duration, 72s) linear infinite;
	will-change: transform;
}

.home-customer-segments__viewport:hover .home-customer-segments__track,
.home-customer-segments__viewport:focus-within .home-customer-segments__track,
.home-customer-segments__viewport.is-paused .home-customer-segments__track {
	animation-play-state: paused;
}

.home-customer-segments__note {
	max-width: 800px;
	margin: var(--space-24) 0 0;
	color: var(--color-dark);
	font-size: 13px;
}

@keyframes home-customer-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-1 * var(--home-customer-loop-distance)));
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-customer-segments {
		overflow: visible;
	}

	.home-customer-segments__viewport,
	.home-customer-segments__viewport.is-static {
		overflow: visible;
	}

	.home-customer-segments__track {
		display: block;
		width: 100%;
	}

	.home-customer-segments__group {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
		width: 100%;
	}

	.home-customer-segment {
		width: auto;
	}
}