/*
 * Partner logos - front page, About us.
 * Markup: template-parts/logotypes-part.php  |  Slider: js/logotypes.js
 */

.sl-logotypes {
	--logo-pad-y: clamp(2.5rem, 1.786vw + 1.357rem, 4rem);
	--logo-height: 4.0625rem;
	--logo-slot: 10.625rem;
	--logo-image: 10.1875rem;

	margin: 0;
	padding-block: var(--logo-pad-y);
	border-bottom: 1px solid var(--sl-grey-200);
	font-family: var(--theme-font);
}

.sl-logotypes--tinted {
	background: var(--sl-grey-50);
}

/* The pause button belongs to the moving slider only; the static row has no use for it. */
.sl-logotypes-slider:not(.slick-initialized) + .sl-pause {
	display: none;
}

.sl-logotypes .sl-pause {
	display: flex;
	margin: 0.75rem 0 0 auto;
}

.sl-logotypes-title {
	margin: 0 0 2rem;
	font-family: var(--sl-font-ui);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.075rem;
	text-transform: uppercase;
	color: var(--sl-grey-500);
}

.sl-logotypes-slider:not(.slick-initialized) {
	display: flex;
	justify-content: space-between;
	overflow: hidden;
}

/* Fixed 170 x 65 slot like the design: the first logo starts at the left edge
   of the grid and the last one ends at the right edge. The artwork carries
   its own margin, so the image is sized to the slot and may overflow it. */
.sl-logotypes-item {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--logo-slot);
	height: var(--logo-height);
}

.sl-logotypes-slider.slick-initialized .sl-logotypes-item {
	width: auto;
}

/* In a slider the slide can be narrower than the artwork (3 or 2 per row on a
   phone): the image shrinks to the slide instead of spilling into the next one. */
.sl-logotypes-slider.slick-initialized .sl-logotypes-image {
	width: 100%;
	max-width: var(--logo-image);
	padding-inline: 0.5rem;
	box-sizing: border-box;
}

.sl-logotypes-image {
	display: block;
	flex: none;
	width: var(--logo-image);
	max-width: none;
	height: auto;
}

@media (max-width: 767.98px) {
	.sl-logotypes-title {
		margin-bottom: 1.5rem;
	}

	.sl-logotypes-slider:not(.slick-initialized) .sl-logotypes-item {
		width: 33.333%;
	}
}

@media (max-width: 479.98px) {
	.sl-logotypes-slider:not(.slick-initialized) .sl-logotypes-item {
		width: 50%;
	}
}