/* Mavan Credentials Logo — grid/rows or marquee, chosen per device.
   Settings arrive as CSS variables from the widget (Elementor writes them per breakpoint). */

.mavan-logos {
	--mavan-logos-h: 60px;
	--mavan-logos-max-w: 220px;
	--mavan-logos-col-gap: 48px;
	--mavan-logos-row-gap: 40px;
	--mavan-logos-justify: center;
	--mavan-logos-align: center;
	--mavan-logos-cols: 6;
	--mavan-logos-fade: 60px;
	--mavan-logos-transition: 300ms;
	position: relative;
}

.mavan-logos__viewport {position: relative;}
.mavan-logos__track {display: flex; width: max-content; max-width: none;}

/* ---------- Grid mode (default) ---------- */
.mavan-logos:not(.is-marquee) .mavan-logos__track {width: 100%;}

.mavan-logos__group {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--mavan-logos-justify);
	align-items: var(--mavan-logos-align);
	gap: var(--mavan-logos-row-gap) var(--mavan-logos-col-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Equal cells: fixed-width flex items (not CSS grid) so a row that isn't full
   follows the horizontal alignment — e.g. a short last row can be centered. */
.mavan-logos-arrange-columns .mavan-logos:not(.is-marquee) .mavan-logos__item {
	flex: 0 0 calc((100% - (var(--mavan-logos-cols) - 1) * var(--mavan-logos-col-gap)) / var(--mavan-logos-cols));
	justify-content: var(--mavan-logos-cell-align, center);
}

.mavan-logos__item {box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 0; margin: 0; padding: 0; transition: background-color var(--mavan-logos-transition) ease, border-color var(--mavan-logos-transition) ease, box-shadow var(--mavan-logos-transition) ease;}

.mavan-logos__link {display: flex; align-items: center; justify-content: center; line-height: 0;}

.mavan-logos__img {
	display: block;
	width: auto;
	height: var(--mavan-logo-h, var(--mavan-logos-h));
	max-width: min(100%, var(--mavan-logo-max-w, var(--mavan-logos-max-w)));
	object-fit: contain;
	opacity: var(--mavan-logos-opacity, 1);
	filter: grayscale(var(--mavan-logos-gray, 0%));
	transition: opacity var(--mavan-logos-transition) ease, filter var(--mavan-logos-transition) ease, transform var(--mavan-logos-transition) ease;
}

.mavan-logos__item:is(:hover, :focus-within) .mavan-logos__img {
	opacity: var(--mavan-logos-opacity-hover, var(--mavan-logos-opacity, 1));
	filter: grayscale(var(--mavan-logos-gray-hover, var(--mavan-logos-gray, 0%)));
	transform: scale(var(--mavan-logos-scale-hover, 1));
}

/* ---------- Marquee mode (class added by the script) ---------- */
.mavan-logos.is-marquee {--mavan-logos-gap: var(--mavan-logos-marquee-gap, var(--mavan-logos-col-gap));}
.mavan-logos.is-marquee .mavan-logos__viewport {overflow: hidden;}
.mavan-logos.is-marquee .mavan-logos__group {
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: var(--mavan-logos-gap);
	width: max-content;
	/* Trailing space so the loop seam matches the gap between logos. */
	padding-inline-end: var(--mavan-logos-gap);
}
.mavan-logos.is-marquee .mavan-logos__img {max-width: var(--mavan-logo-max-w, var(--mavan-logos-max-w));}

.mavan-logos.is-marquee.is-running .mavan-logos__track {
	animation: mavan-logos-scroll var(--mavan-logos-duration, 30s) linear infinite;
	will-change: transform;
}
.mavan-logos.is-marquee.is-running[data-direction="right"] .mavan-logos__track {animation-direction: reverse;}
.mavan-logos.is-marquee.is-running[data-pause="1"] .mavan-logos__viewport:is(:hover, :focus-within) .mavan-logos__track {animation-play-state: paused;}

@keyframes mavan-logos-scroll {
	from {transform: translate3d(0, 0, 0);}
	to {transform: translate3d(calc(-1 * var(--mavan-logos-distance, 50%)), 0, 0);}
}

/* Faded edges */
.mavan-logos-fade-yes .mavan-logos.is-marquee .mavan-logos__viewport {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--mavan-logos-fade), #000 calc(100% - var(--mavan-logos-fade)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--mavan-logos-fade), #000 calc(100% - var(--mavan-logos-fade)), transparent);
}

/* Reduced motion: a swipeable row instead of a moving marquee. */
.mavan-logos.is-marquee.is-static .mavan-logos__viewport {overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;}
.mavan-logos.is-marquee.is-static .mavan-logos__viewport::-webkit-scrollbar {display: none;}

/* Before the script runs: devices set to marquee show one non-wrapping row
   (browsers with CSS style queries), avoiding a flash of the grid. */
@container style(--mavan-logos-mode: marquee) {
	.mavan-logos__viewport {overflow: hidden;}
	.mavan-logos__group {flex-wrap: nowrap; justify-content: flex-start;}
}
.mavan-logos__empty {padding: 20px; text-align: center; border: 1px dashed currentColor; opacity: .6;}