/* SRR Ads - Ad Carousel (horizontal logo-style slider/carousel) */

.srr-adcar {
	width: 100%;
	max-width: 100%;
}

.srr-adcar-viewport {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	/* Effective column count. Overridden per breakpoint below; the per-block
	   values arrive as inline custom properties from the shortcode. */
	--srr-adcar-c: var(--srr-adcar-cols, 4);
}

@media (max-width: 991px) {
	.srr-adcar-viewport { --srr-adcar-c: var(--srr-adcar-cols-md, 2); }
}

@media (max-width: 575px) {
	.srr-adcar-viewport { --srr-adcar-c: var(--srr-adcar-cols-sm, 1); }
}

.srr-adcar-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--srr-adcar-gap, 20px);
	will-change: transform;
}

.srr-adcar-slide {
	/* Pre-JS sizing. The script replaces this with an exact pixel basis. */
	flex: 0 0 calc((100% - (var(--srr-adcar-gap, 20px) * (var(--srr-adcar-c) - 1))) / var(--srr-adcar-c));
	max-width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.srr-adcar-slide > * {
	width: 100%;
	max-width: 100%;
}

.srr-adcar-slide img,
.srr-adcar-slide iframe,
.srr-adcar-slide video {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: var(--srr-adcar-maxh, 100px);
	margin: 0 auto;
	object-fit: contain;
}

.srr-adcar-slide a {
	display: block;
	max-width: 100%;
}

/* Fewer ads than visible columns: no motion, just center them. */
.srr-adcar-viewport.is-static .srr-adcar-track {
	justify-content: center;
	transform: none !important;
}

/* Slider steps use a transition; the script sets the duration. */
.srr-adcar-viewport[data-mode="slider"] .srr-adcar-track {
	transition-property: transform;
	transition-timing-function: ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	.srr-adcar-track {
		transform: none !important;
		transition: none !important;
	}
}