/*
 * Virtina child: "We speak ERP, CRM, OMS, WMS and PIM fluently" platform logos, shown on the home page after the process section.
 * Desktop: a light panel with a slanted edge (the shape image) holds the heading, the copy, and two rows of logos.
 * Under 900px the shape is hidden, the panel is a flat surface, and the logos wrap onto as many rows as they need.
 */

:root {
	--vch-color-platforms-surface: #f6f6f6;
}

.vch-platforms {
	position: relative;
	box-sizing: border-box;
	margin-top: 80px;
	min-height: 640px;
	padding: 96px 0 0;
	overflow: hidden;
	background: var(--vch-color-surface);
	color: var(--vch-color-text);
	text-align: center;
}

/* The shape is drawn point-up in the source SVG, and the design flips it, so it is mirrored here. */
.vch-platforms__shape {
	position: absolute;
	top: 0;
	left: 50%;
	width: 1728px;
	height: 640px;
	max-width: none;
	transform: translateX(-50%) scaleY(-1);
	pointer-events: none;
}

.vch-platforms__inner {
	position: relative;
}

.vch-platforms__title {
	max-width: 865px;
	margin: 0 auto;
	font-family: 'Archivo', sans-serif;
	font-weight: 500;
	font-size: 42px;
	line-height: 1.2;
	color: var(--vch-color-text);
}

.vch-platforms__text {
	max-width: 721px;
	margin: 24px auto 0;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.03em;
	color: var(--vch-color-text-muted);
}

.vch-platforms__logos {
	margin: 83px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	row-gap: 32px;
}

/* The design gaps are 139px and 129px at 1728px. They scale down so six logos fit on one row at 1440px. */
.vch-platforms__logos--systems {
	margin-top: 106px;
	column-gap: clamp(24px, 8vw, 139px);
}

.vch-platforms__logos--commerce {
	column-gap: clamp(24px, 7.5vw, 129px);
}

.vch-platforms__item {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The width attribute sets the design size. The height follows the image's own aspect ratio. */
.vch-platforms__logo {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Logos fade up one by one. The script adds --reveal and sets each logo's delay, so without JS they stay visible. */

.vch-platforms--reveal .vch-platforms__item {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	transition-delay: var(--vch-reveal-delay, 0s);
}

.vch-platforms--revealed .vch-platforms__item {
	opacity: 1;
	transform: none;
}

/* Below 1280px the section above already leaves enough space, so the top margin goes. */
@media (max-width: 1279px) {
	.vch-platforms {
		margin-top: 0;
	}
}

/* Tablet and phone: flat panel, no shape, logos wrap */

@media (max-width: 899px) {
	.vch-platforms {
		min-height: 0;
		padding: 64px 0;
		background: var(--vch-color-platforms-surface);
	}

	.vch-platforms__shape {
		display: none;
	}

	.vch-platforms__logos {
		margin-top: 48px;
		row-gap: 24px;
	}

	.vch-platforms__logos--systems {
		margin-top: 40px;
	}

	.vch-platforms__logos--commerce,
	.vch-platforms__logos--systems {
		column-gap: 32px;
	}

	/* Each logo list is one swipeable row. It bleeds to the screen edge and the items snap into place. */
	.vch-platforms__logos {
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin-inline: -20px;
		padding: 8px 20px 16px;
		overflow-x: auto;
		/* The left and right edges fade out, so logos slide in and out of view. */
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
		overscroll-behavior-x: contain;
		scroll-padding-inline: 20px;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.vch-platforms__logos::-webkit-scrollbar {
		display: none;
	}

	.vch-platforms__logos:focus-visible {
		outline: 2px solid var(--vch-color-text);
		outline-offset: 4px;
	}

	.vch-platforms__item {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	/* The auto-scroll moves the row by script, so snapping is off while it runs. */
	.vch-platforms__logos--auto {
		scroll-snap-type: none;
	}
}

/* Small desktop and tablet landscape: the logos keep one row and shrink to fit, instead of wrapping. */
@media (min-width: 900px) and (max-width: 1439px) {
	.vch-platforms__logos {
		flex-wrap: nowrap;
		column-gap: 24px;
	}

	.vch-platforms__item {
		flex: 1 1 0;
		min-width: 0;
	}

	.vch-platforms__logo {
		max-width: 100%;
	}
}

@media (max-width: 599px) {
	.vch-platforms__title {
		font-size: 32px;
	}

	.vch-platforms__logos--commerce,
	.vch-platforms__logos--systems {
		column-gap: 20px;
	}
}