/* ==========================================================================
   [wayvo-business-clients-small] — see shortcodes/wayvoBusinessClientsSmall.php
   for the designs, the logo sizing and the motion.

   Same unit as the other new sections: --wvbcs-u is rendered px per laptop
   px (100cqw / 1440, stopping at 1.333). The logo row has its own unit,
   --wvbcs-lu: u, but never below 0.711 — the mobile frame's slots — so the
   logos never shrink past the design's smallest version on a narrow laptop.

   The logo row spans the whole screen, so the section has no side padding;
   the title carries it instead.

   Vendor fights: h2 / ul / img rules at (0,2,1), over Elementor's and the
   kit's (0,1,1).
   ========================================================================== */

.wv-bcs-wrap {
	container-type: inline-size;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.wv-bcs {
	/* --wv-cw, not 100cqw: the logo row stays full-bleed but the title, logos
	   and spacing stop growing at the content width (tokens.css, 2026-10-21). */
	--wvbcs-u: clamp(0.5px, calc(var(--wv-cw, 100cqw) / 1440), 1.3334px);
	--wvbcs-lu: max(0.7111px, var(--wvbcs-u));
	--wvbcs-pad: min(80px, max(calc(40 * var(--wvbcs-u)), calc(var(--wv-cw, 100cqw) / 12 - 80px)));
	/* The monitor frame DOUBLES the laptop's vertical padding (80 -> 160) and
	   gaps (20 -> 40) rather than scaling them 1.333; linear between, u below. */
	--wvbcs-vpad: min(160px, max(calc(80 * var(--wvbcs-u)), calc(var(--wv-cw, 100cqw) / 6 - 160px)));
	--wvbcs-gap: min(40px, max(calc(20 * var(--wvbcs-u)), calc(var(--wv-cw, 100cqw) / 24 - 40px)));

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wvbcs-gap);
	padding: var(--wvbcs-vpad) 0;
	overflow: hidden;
	background-color: var(--wv-ink, #101011);
	color: var(--wv-white, #ffffff);
	font-family: var(--wv-btn-font, "Geist", sans-serif);
}

.wv-bcs h2.wv-bcs__title {
	box-sizing: border-box;
	max-width: min(100%, var(--wv-content-max, 1440px));
	margin: 0;
	padding: 0 var(--wvbcs-pad);
	color: inherit;
	font-family: inherit;
	/* 32 on laptop AND monitor — the monitor frame does not scale it. */
	font-size: clamp(24px, calc(32 * var(--wvbcs-u)), 32px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-align: center;
	text-transform: none;
}

/* ── The drifting row ────────────────────────────────────────────────────── */
.wv-bcs__marquee {
	width: 100%;
	overflow: hidden;
}

/* Two identical sets side by side; sliding by -50% moves exactly one set,
   so the loop has no seam. */
.wv-bcs__track {
	display: flex;
	width: max-content;
	animation: wv-bcs-drift var(--wvbcs-duration, 72s) linear infinite;
	will-change: transform;
}

@keyframes wv-bcs-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.wv-bcs ul.wv-bcs__set {
	display: flex;
	flex: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wv-bcs__slot {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: calc(197.5 * var(--wvbcs-lu));
	height: calc(110 * var(--wvbcs-lu));
	margin: 0;
	padding: calc(10 * var(--wvbcs-lu)) calc(30 * var(--wvbcs-lu));
}

.wv-bcs__slot::before,
.wv-bcs__slot::marker {
	content: none;
}

/* Width per logo from the shortcode (--wvbcs-w, laptop px), height follows. */
.wv-bcs .wv-bcs__logo {
	display: block;
	width: calc(var(--wvbcs-w, 120) * var(--wvbcs-lu));
	height: auto;
	max-width: none;
}

@media (prefers-reduced-motion: reduce) {
	.wv-bcs__track {
		animation: none;
	}
}

/* The export's 46px tier, scaled; tokens overridden on the element. */
.wv-bcs .wv-bcs__cta {
	flex: none;
	--wv-btn-pad-y: 0px;
	--wv-btn-pad-x: max(14.22px, calc(20 * var(--wvbcs-u)));
	--wv-btn-min-h: max(32.71px, calc(46 * var(--wvbcs-u)));
	--wv-btn-size: max(12px, calc(16 * var(--wvbcs-u)));
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   From the mobile frame. */
@media (max-width: 767px) {

	.wv-bcs {
		--wvbcs-lu: 0.7111px;
		gap: 20px;
		padding: 80px 0;
	}

	.wv-bcs h2.wv-bcs__title {
		padding: 0 40px;
		font-size: 24px;
	}

	.wv-bcs .wv-bcs__cta {
		--wv-btn-pad-x: 14.22px;
		--wv-btn-min-h: 32.71px;
		--wv-btn-size: 12px;
		--wv-btn-tracking: -0.02em;
	}
}