/* Logo / partner slider — auto-advancing carousel on Swiper. Square language,
   colour-only hover. Slide widths are managed by Swiper (slidesPerView). */

.logos-slider__viewport {
	/* Swiper's own CSS sets margin-left/right:auto. Inside our flex-column
	   .content-with-title__wrapper those auto margins cancel align-items:stretch
	   and let the slider size to its content — a runaway width that breaks the
	   whole page. Pin it to the parent width and drop the auto margins. */
	width: 100%;
	min-width: 0;
	margin: 0;
	overflow: hidden;
}

.logos-slider__viewport .swiper-wrapper {
	align-items: center;
}

/* Continuous mode: linear timing turns zero-delay autoplay into a steady
   marquee instead of an eased per-slide slide. */
.logos-slider--marquee .swiper-wrapper {
	transition-timing-function: linear !important;
}

.logos-slider__slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

.logos-slider__item {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.logos-slider__lightbox {
	cursor: zoom-in;
}

/* Height comes from the inline --logos-base (size preset). */
.logos-slider {
	--logos-h: var(--logos-base, 56px);
}
/* Logo fills its column width at a uniform height (contained — no distortion). */
.logos-slider__logo {
	display: block;
	width: 100%;
	height: var(--logos-h);
	object-fit: contain;
}

/* Orientation: a fixed-aspect slide box (image contained). Overrides the
   height-based sizing; the size preset then has no effect. */
.logos-slider--orient-landscape .logos-slider__item { aspect-ratio: 16 / 9; }
.logos-slider--orient-portrait  .logos-slider__item { aspect-ratio: 3 / 4; }
.logos-slider--orient-square    .logos-slider__item { aspect-ratio: 1 / 1; }
.logos-slider[class*="--orient-"] .logos-slider__logo {
	height: 100%;
}

/* Greyscale at rest, full colour on hover/focus — colour change only. */
.logos-slider--grayscale .logos-slider__logo {
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.25s ease, opacity 0.25s ease;
}
.logos-slider--grayscale .logos-slider__item:hover .logos-slider__logo,
.logos-slider--grayscale .logos-slider__item:focus-visible .logos-slider__logo {
	filter: grayscale(0);
	opacity: 1;
}

@media (max-width: 767px) {
	.logos-slider {
		--logos-h: calc(var(--logos-base, 56px) * 0.72);
	}
}