.dbw-partner-slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 70px;
	margin-top: var(--outer-margin, 50px);
	margin-bottom: var(--outer-margin, 50px);

	// Defensive: WordPress core / common theme resets use
	//   html :where([style*="border-width"]) { border-style: solid; }
	// to auto-enable borders for blocks with inline border-width styles.
	// Our inline style emits the custom property --capsule-border-width,
	// which contains the literal substring "border-width" and matches that
	// attribute selector — turning on the browser default 3px border on
	// the slider container. Explicitly resetting border = 0 here neutralises
	// that and protects against similar future theme rules.
	border: 0;

	// Smooth initial load: start hidden and let the frontend script reveal
	// the carousel (.dbw-ready) once every row is measured and its images
	// are loaded. The delayed keyframe is a pure-CSS safety net that reveals
	// the carousel even if the script never runs; a <noscript> rule keeps it
	// visible when JavaScript is disabled.
	opacity: 0;
	animation: dbw-reveal-fallback 0.4s ease 5s forwards;

	&.dbw-ready {
		opacity: 1;
		animation: none;
		transition: opacity 0.4s ease;
	}

	&::before,
	&::after {
		content: "";
		position: absolute;
		top: 0;
		width: 100px;
		height: 100%;
		pointer-events: none;
		z-index: 2;
	}

	&::before {
		left: 0;
		background: linear-gradient(
			to right,
			var(--overlay-color, #fff) 0%,
			transparent 100%
		);
	}

	&::after {
		right: 0;
		background: linear-gradient(
			to left,
			var(--overlay-color, #fff) 0%,
			transparent 100%
		);
	}

	&.no-overlay::before,
	&.no-overlay::after {
		display: none;
	}

	&.black-logos img {
		filter: brightness(0);
		opacity: 0.8;
	}

	&.dbw-logos-white img {
		filter: brightness(0) invert(1);
		opacity: 0.8;
	}

	&.dbw-logos-custom img {
		filter: var(--logo-filter, none);
		opacity: 0.8;
	}

	&:hover .dbw-slider-track {
		animation-play-state: paused;
	}

	// Glow mode: allow the capsule box-shadow to escape vertically so it
	// does not get cropped flat by the container's overflow:hidden. We use
	// overflow:clip + overflow-clip-margin-block — that keeps horizontal
	// clipping strict (essential, otherwise the off-screen part of the
	// scrolling track would become visible past the edge overlay) while
	// granting just enough vertical room for the configured glow radius.
	// Older browsers that don't recognise overflow:clip / clip-margin
	// silently fall back to the inherited overflow:hidden — no regression.
	&.dbw-cap-glow {
		overflow: clip;
		overflow-clip-margin-block: var(--capsule-glow-size, 14px);
	}
}

.dbw-slider-wrapper {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 70px;
	overflow: hidden;

	// Same vertical-glow exception as on the slider container — this inner
	// wrapper otherwise clips the glow first, before it can reach the outer
	// container's relaxed clip box.
	.dbw-cap-glow & {
		overflow: clip;
		overflow-clip-margin-block: var(--capsule-glow-size, 14px);
	}
}

.dbw-slider-track {
	display: flex;
	align-items: center;
	width: max-content;
	max-width: none;
	animation: dbw-infinity-scroll var(--scroll-duration, 25s) linear infinite;
	will-change: transform;

	// Reverse-scrolling rows (no-JS fallback; the frontend script applies its
	// own exact-width animation including direction).
	&[data-direction="reverse"] {
		animation-direction: reverse;
	}
}

// Multi-row layout: each row is its own wrapper/track, stacked vertically.
.dbw-layout-rows {
	.dbw-slider-wrapper + .dbw-slider-wrapper {
		margin-top: var(--row-gap, 24px);
	}
}

// Capsule style: each logo sits inside a rounded background container.
.dbw-capsules {
	.dbw-capsule {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border-radius: var(--capsule-radius, 999px);

		// Padding stays proportional to the *rendered* logo height. The
		// inline style sets --capsule-pad-y / -x from the user-chosen
		// --logo-height (fine for desktop) — on small viewports we cap
		// both sides against a fraction of the viewport so a large
		// user-set height doesn't produce capsules wider than the phone.
		// min() keeps the user/preset value as the upper bound; on wide
		// screens the inline value is smaller than the vw expression and
		// wins, on narrow screens the vw expression caps it.
		padding:
			min(
				var(--capsule-pad-y, calc(var(--logo-height, 50px) * 0.3)),
				calc(12vw * 0.3)
			)
			min(
				var(--capsule-pad-x, calc(var(--logo-height, 50px) * 0.55)),
				calc(12vw * 0.55)
			);
	}

	.dbw-cap-a {
		background: var(--capsule-color-a, #000000);
	}

	.dbw-cap-b {
		background: var(--capsule-color-b, #ffffff);
	}

	// Reset any general logo-color filter inside capsules so the
	// per-capsule class (or "no filter") takes precedence.
	.dbw-capsule img {
		filter: none;
		opacity: 1;
	}

	// Monochrome logos, contrasting their capsule background.
	.dbw-logo-light img {
		filter: brightness(0) invert(1);
	}

	.dbw-logo-dark img {
		filter: brightness(0);
	}

	// Outline style: transparent fill with a colored border instead of a
	// background. Higher specificity (slider has both classes) so it wins
	// over the .dbw-cap-a/.dbw-cap-b background rules.
	&.dbw-cap-outline .dbw-capsule {
		background: transparent;
		border: var(--capsule-border-width, 2px) solid
			var(--capsule-color-a, #000000);
	}

	// Optional glow: a soft box-shadow around each capsule, in its own color.
	&.dbw-cap-glow {
		.dbw-cap-a {
			box-shadow: 0 0 var(--capsule-glow-size, 14px)
				var(--capsule-color-a, #000000);
		}

		.dbw-cap-b {
			box-shadow: 0 0 var(--capsule-glow-size, 14px)
				var(--capsule-color-b, #ffffff);
		}
	}
}

.dbw-slider-item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 calc(var(--slide-gap, 40px) / 2);

	// Responsive logo height. The user picks a value in the editor
	// (30–150 px) which we treat as the desktop ceiling — on narrower
	// viewports the logo scales down with the viewport so capsules + gaps
	// don't overflow on phones. clamp(min, vw, user) is a single fluid
	// formula, no media-query break points:
	//   • below ~233 px viewport width the 28 px floor takes over
	//   • from there up to ~user/0.12 the 12 vw track grows smoothly
	//   • above that the user's chosen height caps it
	//
	// Example with --logo-height: 150 px
	//   375 px iPhone  →  45 px logo  (12 vw)
	//   768 px iPad    →  92 px logo  (12 vw)
	//  1280 px laptop  → 150 px logo  (capped at user value)
	//  1920 px desktop → 150 px logo  (capped at user value)
	min-height: clamp(28px, 12vw, var(--logo-height, 50px));

	img {
		display: block;
		// max-width: none defeats the theme's global `img { max-width: 100% }`,
		// which could otherwise squeeze wide logos. width stays driven purely
		// by the logo's aspect ratio so nothing is ever cropped.
		max-width: none;
		max-height: clamp(28px, 12vw, var(--logo-height, 50px));
		min-height: clamp(28px, 12vw, var(--logo-height, 50px));
		width: auto;
		height: auto;
		object-fit: contain;
	}

	a {
		display: inline-block;
		line-height: 0;
	}
}

@keyframes dbw-infinity-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

// Pure-CSS safety net for the initial reveal (see .dbw-partner-slider).
@keyframes dbw-reveal-fallback {
	to {
		opacity: 1;
	}
}

// Mobile responsive layout. The v1.5.2 clamp() on logo-height and the
// min() cap on padding already shrink each capsule proportionally with
// the viewport, but for extremely wide logos (5:1 / 6:1 aspect ratios)
// a single height-shrunk logo can still produce an item wider than a
// phone screen — see dbw-media.de's Academy slider where a 150 px
// user-height logo at 6:1 fills an entire 390 px row.
//
// Below 600 px we therefore lock the item to a fluid uniform width so
// ~2 capsules fit side by side, regardless of any individual logo's
// aspect ratio. The capsule then stretches to fill the item, and the
// image inside falls back to max-width:100% so very wide logos compress
// horizontally (object-fit: contain keeps the aspect correct and lets
// the min-height letterbox center them vertically). On wider viewports
// the carousel falls back to the natural content-sized layout, so
// desktop wide logos render at full natural width as before.
@media (max-width: 600px) {
	.dbw-slider-item {
		width: clamp(140px, 46vw, 220px);
	}

	.dbw-capsules .dbw-capsule {
		width: 100%;
		justify-content: center;
	}

	.dbw-slider-item img {
		max-width: 100%;
	}
}

// Accessibility: respect the reduced-motion preference. !important also
// overrides the inline animation applied by the frontend script.
@media (prefers-reduced-motion: reduce) {
	.dbw-slider-track {
		animation: none !important;
	}
}