/*
 * [sg-client-logos] — client logo strip
 * Version: 1.0.0
 *
 * Tweak spacing / sizing via the custom properties on .sg-client-logos.
 * Logo files are supplied trimmed (no padding baked in), so all spacing
 * between logos comes from --sg-client-gap.
 */
.sg-client-logos-wrap {
	--sg-client-gap: 40px;
	--sg-client-logo-height: 60px;
	--sg-client-gap-mobile: 24px;
	--sg-client-logo-height-mobile: 48px;
	--sg-client-label-color: #ffffff;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: var(--sg-client-gap);
	width: 100%;
}

.sg-client-logos-wrap .sg-client-logos__label {
	flex: 0 0 auto;
	align-self: center;
	color: var(--sg-client-label-color);
	font-weight: bold;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;
}

.sg-client-logos {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: var(--sg-client-gap);
	flex: 1 1 auto;
	min-width: 0;
}

.sg-client-logos .sg-client-logo {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.sg-client-logos .sg-client-logo__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--sg-client-logo-height);
	object-fit: contain;
}

/* Tablet + phone (Divi ≤980px): logos wrap into 2 rows (per-row count set inline by the shortcode) */
@media (max-width: 980px) {
	.sg-client-logos-wrap {
		gap: var(--sg-client-gap-mobile);
	}

	.sg-client-logos {
		flex-wrap: wrap;
		gap: var(--sg-client-gap-mobile);
	}

	.sg-client-logos .sg-client-logo {
		flex: 0 1 calc( (100% - var(--sg-client-gap-mobile) * (var(--sg-client-per-row) - 1)) / var(--sg-client-per-row) );
	}

	.sg-client-logos .sg-client-logo__img {
		max-height: var(--sg-client-logo-height-mobile);
	}
}

/* Phone (Divi ≤767px): label stacks above the 2 logo rows */
@media (max-width: 767px) {
	.sg-client-logos-wrap {
		flex-direction: column;
	}

	.sg-client-logos {
		width: 100%;
	}
}