/* HAI Marquee */
.hai-marquee {
	--hai-marquee-gap: 40px;
	--hai-marquee-align: stretch;
	--hai-marquee-item-height: auto;
	--hai-marquee-fade: 60px;
	overflow: hidden;
	width: 100%;
}
/* Optional fade-out at both edges. */
.hai-marquee[data-fade="1"] {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--hai-marquee-fade), #000 calc(100% - var(--hai-marquee-fade)), transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 var(--hai-marquee-fade), #000 calc(100% - var(--hai-marquee-fade)), transparent 100%);
}
.hai-marquee__track {
	display: flex;
	width: max-content;
	align-items: var(--hai-marquee-align);
	gap: var(--hai-marquee-gap);
}
/* Each item is a native Elementor container mounted directly in the track.
   Override the container defaults so items keep their natural width and
   the flex row controls equal height. */
.hai-marquee__track > .e-con {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	min-height: 0;
}
/* Fixed height: force each item to the configured height. */
.hai-marquee[data-height="fixed"] .hai-marquee__track > .e-con {
	height: var(--hai-marquee-item-height);
}
/* In fixed-height mode the marquee owns the image size: height from the
   widget, width from the aspect ratio. A per-image "width: 100%" from the
   Elementor image widget is a cyclic percentage inside a shrink-to-fit flex
   item; Safari resolves it to the image's intrinsic width (with srcset even to
   the viewport width), so one logo became a 1710px box with the logo centred
   in it (florafacto.be, 2026-08-26). !important on purpose: Elementor's
   per-widget rule has equal specificity and its load order is not fixed. */
.hai-marquee[data-height="fixed"] .hai-marquee__track > .e-con img {
	height: var(--hai-marquee-item-height) !important;
	width: auto !important;
	max-width: none !important;
	object-fit: contain;
}

/* Scheidingsteken tussen de items. Een echte cirkel, geen bullet-glyph: die
   verschilt per lettertype en tekent in sommige display-fonts een vierkantje.
   Staat als directe child van de track, zodat de JS hem meekloont bij het
   verdubbelen van de lus. */
.hai-marquee__sep {
	flex: 0 0 auto;
	align-self: center;
	width: var(--hai-marquee-sep-size, 9px);
	height: var(--hai-marquee-sep-size, 9px);
	border-radius: 50%;
	background: var(--hai-marquee-sep-color, currentColor);
}

/* Marquee animation */
@keyframes hai-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(var(--hai-marquee-distance) * -1)); }
}
.hai-marquee__track.is-animating {
	animation: hai-marquee-scroll var(--hai-marquee-duration) linear infinite;
	will-change: transform;
}
.hai-marquee__track.is-animating.to-right {
	animation-direction: reverse;
}
.hai-marquee[data-pause-hover="1"]:hover .hai-marquee__track.is-animating {
	animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
	.hai-marquee__track.is-animating { animation: none; }
}