/* BiO-G USP Marquee - scoped to .biog-usp. Sizes, colours and spacing come from Elementor controls as CSS variables.
   The viewport is a normal horizontal scroll container (manual scrolling always works); the script advances it. */

.biog-usp {
	--usp-item-w: 200px;
	--usp-gap: 40px;
	--usp-icon-h: 68px;
	--usp-title-gap: 12px;
	--usp-valign: flex-start;
	--usp-icon-op: 1;
	box-sizing: border-box;
	width: 100%;
	padding: 28px 0;
	background-color: #fff;
}
.biog-usp *,
.biog-usp *::before,
.biog-usp *::after {
	box-sizing: border-box;
}
.biog-usp__inner {
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.biog-usp__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain; /* a sideways swipe never triggers browser back/forward */
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.biog-usp__viewport::-webkit-scrollbar { display: none; }
.biog-usp__viewport:focus-visible {
	outline: 2px solid #0b6e4f;
	outline-offset: -2px;
}
.biog-usp__track {
	display: flex;
	width: max-content;
	min-width: 100%;
}

/* One set = the real list. The script appends aria-hidden/inert copies after it for a seamless loop. */
.biog-usp .biog-usp__set {
	display: flex;
	flex: 0 0 auto;
	align-items: stretch;
	gap: var(--usp-gap);
	margin: 0;
	padding: 0 var(--usp-gap) 0 0; /* trailing gap so every set has the same width */
	list-style: none;
}
.biog-usp .biog-usp__item {
	display: flex;
	flex: 0 0 var(--usp-item-w);
	flex-direction: column;
	align-items: center;
	justify-content: var(--usp-valign);
	width: var(--usp-item-w);
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

/* Icon: fixed height, width from the artwork's own proportions (never stretched, never cropped). */
.biog-usp .biog-usp__icon {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: calc(var(--usp-icon-h) * var(--usp-ar, 1));
	max-width: min(100%, var(--usp-icon-maxw, 100%));
	height: auto;
	aspect-ratio: var(--usp-ar, 1);
	overflow: hidden;
	opacity: var(--usp-icon-op);
}
/* left/top/width are set per icon: they show only the visible part of the file (transparent padding ignored). */
.biog-usp .biog-usp__img {
	position: absolute;
	display: block;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
}
.biog-usp .biog-usp__title {
	display: block;
	max-width: 100%;
	margin: var(--usp-title-gap) 0 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: #2b2b2b;
	overflow-wrap: break-word;
}
@media (max-width: 767px) {
	.biog-usp .biog-usp__title { font-size: 14px; }
}

/* Editor hint only. */
.biog-usp--empty { padding: 24px 16px; text-align: center; }
.biog-usp__empty { margin: 0; font-size: 14px; color: #6b7280; }

@media (prefers-reduced-motion: reduce) {
	.biog-usp__viewport { scroll-behavior: auto; }
}