/* ==========================================================================
   COBIZ Functions - Clients Marquee

   Override for the Salient "Clients" carousel -> smooth continuous marquee.

   Every rule is scoped to .row.carousel.clients.cobiz-marquee; that class is
   added by clients-marquee.js. Other carousels are left untouched.
   ========================================================================== */

:root {
	/* Colour the edges fade into. Defaults to white (the Salient section bg).
	   Override per section, e.g.:
	   .vc_row.trusted-by .cobiz-marquee-wrap { --cobiz-marquee-edge: #f5f5f5; } */
	--cobiz-marquee-edge: #ffffff;
}

/* --- The wrapper around the track: clipping + fading edges --------------- */
.cobiz-marquee-wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* Salient sets an inline pixel height on this parent during resize. */
	height: auto !important;
}

/* --- Full-bleed: break out of the Salient content container ------------
   The strip should span the whole viewport width like the reference.
   Salient's JS wraps .carousel-wrap in .carousel-outer (overflow:hidden),
   and that wrapper sits inside the ~1500px content column, so IT is the
   element that has to break out. Before Salient adds it, .cobiz-marquee-wrap
   breaks out itself; once .carousel-outer is present the :has() rules below
   win on specificity and hand the breakout to .carousel-outer.
   #ajax-content-wrap is full width with overflow:hidden, so it clips any
   sub-pixel excess instead of showing a horizontal scrollbar. */
.cobiz-marquee-wrap,
.carousel-outer:has(.cobiz-marquee-wrap) {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.carousel-outer:has(.cobiz-marquee-wrap) {
	overflow: hidden;
	margin-right: calc(50% - 50vw); /* override Salient's margin-right: 2px */
	height: auto !important;
}

/* When .carousel-outer is doing the breakout, the inner wrapper just fills it. */
.carousel-outer:has(.cobiz-marquee-wrap) .cobiz-marquee-wrap {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Opt out of full-bleed: add the class "cobiz-marquee-contained" to the
   row or column (WPBakery -> Extra class name) that holds the clients block. */
.cobiz-marquee-contained .cobiz-marquee-wrap,
.cobiz-marquee-contained .carousel-outer:has(.cobiz-marquee-wrap) {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.cobiz-marquee-wrap::before,
.cobiz-marquee-wrap::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 80px;
	z-index: 2;
	pointer-events: none;
}

.cobiz-marquee-wrap::before {
	left: 0;
	background: linear-gradient(to right, var(--cobiz-marquee-edge), rgba(255, 255, 255, 0));
}

.cobiz-marquee-wrap::after {
	right: 0;
	background: linear-gradient(to left, var(--cobiz-marquee-edge), rgba(255, 255, 255, 0));
}

/* --- The moving track --------------------------------------------------
   The layout (flex row, fixed-width cells) is applied as soon as the
   .cobiz-marquee class lands, so the script can measure the track reliably.
   The animation itself only starts once the script has computed the correct
   duration and adds .cobiz-marquee-run. */
.row.carousel.clients.cobiz-marquee {
	display: flex !important;
	align-items: center;
	flex-wrap: nowrap !important;
	width: max-content !important;
	min-width: 100%;
	/* Salient sets an inline pixel height + an opacity animation here. */
	height: auto !important;
	opacity: 1 !important;
	will-change: transform;
}

.row.carousel.clients.cobiz-marquee.cobiz-marquee-run {
	/* Duration is set from JS so the speed stays constant regardless of how
	   many logos there are. Fallback 40s. */
	animation: cobiz-marquee-scroll var(--cobiz-marquee-duration, 40s) linear infinite;
}

/* --- The individual logo cells ------------------------------------------
   Salient / caroufredsel normally style these with floats, margins, a
   fade-in (opacity: 0) and sometimes inline widths. Flatten all of it. */
.row.carousel.clients.cobiz-marquee > .no-link,
.row.carousel.clients.cobiz-marquee > div {
	flex: 0 0 auto !important;
	float: none !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 200px !important;
	margin: 0 40px !important;
	padding: 0 !important;
	opacity: 1 !important;
	animation: none !important;
	transition: opacity 0.3s linear;
}

.row.carousel.clients.cobiz-marquee > .no-link img,
.row.carousel.clients.cobiz-marquee > div img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

@keyframes cobiz-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* The track is two identical halves; -50% loops seamlessly. */
		transform: translateX(-50%);
	}
}

/* --- Accessibility --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.row.carousel.clients.cobiz-marquee.cobiz-marquee-run {
		animation: none;
		transform: none;
	}
}

/* --- Small screens ------------------------------------------------- */
@media only screen and (max-width: 690px) {
	.row.carousel.clients.cobiz-marquee > .no-link,
	.row.carousel.clients.cobiz-marquee > div {
		width: 140px !important;
		margin: 0 24px !important;
	}

	.cobiz-marquee-wrap::before,
	.cobiz-marquee-wrap::after {
		width: 40px;
	}
}