/*
 * Oraco Logo Slider
 *
 * Banen (.ols__track) består af et lige antal ens grupper og flytter sig præcis
 * en halv bane pr. omgang, så starten og slutningen ser ens ud. JS'en sætter
 * --ols-distance (en halv bane i pixels), så hastigheden er den samme i px/sek.
 * uanset antal logoer og skærmbredde.
 *
 * Mål pr. skærm: Elementor sætter --ols-height osv. direkte; shortcoden sætter
 * --ols-height-desktop/-tablet/-mobile, som vælges her.
 */
.ols {
	--ols-height: var(--ols-height-desktop, 52px);
	--ols-gap: var(--ols-gap-desktop, 48px);
	--ols-max-width: var(--ols-max-width-desktop, 210px);
	--ols-fade: var(--ols-fade-desktop, 6%);
	position: relative;
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

@media (max-width: 1024px) {
	.ols {
		--ols-height: var(--ols-height-tablet, 46px);
		--ols-gap: var(--ols-gap-tablet, 40px);
		--ols-max-width: var(--ols-max-width-tablet, 180px);
		--ols-fade: var(--ols-fade-tablet, 6%);
	}
}

@media (max-width: 767px) {
	.ols {
		--ols-height: var(--ols-height-mobile, 40px);
		--ols-gap: var(--ols-gap-mobile, 32px);
		--ols-max-width: var(--ols-max-width-mobile, 150px);
		--ols-fade: var(--ols-fade-mobile, 8%);
	}
}

/* I en Elementor-række må widgetten gerne blive smallere end alle logoerne tilsammen. */
.elementor-widget-oraco-logo-slider {
	min-width: 0;
}

.ols__defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.ols__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ols-fade), #000 calc(100% - var(--ols-fade)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--ols-fade), #000 calc(100% - var(--ols-fade)), transparent 100%);
}

.ols__track {
	display: flex;
	width: max-content;
	direction: ltr;
	animation-name: ols-scroll;
	animation-duration: calc(var(--ols-distance, 1200) / var(--ols-speed, 30) * 1s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: var(--ols-direction, normal);
	will-change: transform;
}

.ols:hover .ols__track {
	animation-play-state: var(--ols-hover-state, running);
}

.ols .ols__group {
	display: flex;
	flex: none;
	align-items: center;
	margin: 0;
	padding: 0;
}

/* Afstanden ligger efter hvert logo (ikke som gap), så alle grupper er lige brede. */
.ols .ols__item {
	display: flex;
	flex: none;
	align-items: center;
	margin: 0;
	padding: 0 var(--ols-gap) 0 0;
}

.ols .ols__item img {
	display: block;
	width: auto;
	height: var(--ols-height);
	max-width: var(--ols-max-width);
	max-height: none;
	margin: 0;
	object-fit: contain;
	opacity: var(--ols-opacity, 1);
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.ols--grayscale .ols__item img {
	filter: grayscale(1);
}

.ols--hover-reveal .ols__item:hover img {
	filter: none !important;
	opacity: 1;
}

@keyframes ols-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* Ønsker brugeren mindre bevægelse, står logoerne stille og centreret i stedet. */
@media (prefers-reduced-motion: reduce) {
	.ols__viewport {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.ols__track {
		width: auto;
		justify-content: center;
		animation: none;
	}

	.ols .ols__group {
		flex: 1 1 auto;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: calc(var(--ols-gap) / 2);
	}

	.ols .ols__group[aria-hidden="true"] {
		display: none;
	}
}