/**
 * Trust V1 — Client logos.
 * CSS only. Colors/type/spacing from tokens. Grayscale is a default, not baked into images.
 */

.nl-trust-v1 {
	--nl-trust-v1-logo-max-width: 160px;
	--nl-trust-v1-logo-max-height: 40px;
	--nl-trust-v1-header-gap: 12px;

	box-sizing: border-box;
	padding-block: var(--nl-space-2xl);
	padding-inline: var(--nl-pad-inline);
	background-color: var(--nl-color-background);
	color: var(--nl-color-body);
	text-align: center;
}

.nl-trust-v1__content {
	width: 100%;
	max-width: var(--nl-content-width);
	margin-inline: auto;
}

.nl-trust-v1__header {
	max-width: 36rem;
	margin: 0 auto var(--nl-space-lg);
}

.nl-trust-v1__eyebrow,
.nl-trust-v1__eyebrow p,
.nl-trust-v1__eyebrow .elementor-widget-container {
	margin: 0 0 var(--nl-trust-v1-header-gap);
	color: var(--nl-color-light-text);
	font-family: var(--nl-font-body);
	font-size: 12px;
	font-weight: var(--nl-fw-semibold);
	letter-spacing: 0.125em;
	line-height: 1.4;
	text-transform: uppercase;
}

.nl-trust-v1__description,
.nl-trust-v1__description p,
.nl-trust-v1__description .elementor-widget-container {
	margin: 0;
	color: var(--nl-color-body);
	font-family: var(--nl-font-body);
	font-size: 1rem;
	font-weight: var(--nl-fw-regular);
	line-height: 1.5;
}

.nl-trust-v1__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--nl-space-md);
}

.nl-trust-v1__logo,
.nl-trust-v1__logos > .elementor-widget-image {
	flex: 0 0 calc((100% - var(--nl-space-md)) / 2);
	max-width: none;
	min-width: 0;
	margin: 0;
}

.nl-trust-v1__logo,
.nl-trust-v1__logos > .elementor-widget-image,
.nl-trust-v1__logo .elementor-widget-container,
.nl-trust-v1__logo .elementor-image,
.nl-trust-v1__logos > .elementor-widget-image .elementor-widget-container,
.nl-trust-v1__logos > .elementor-widget-image .elementor-image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.nl-trust-v1__logo img,
.nl-trust-v1__logo .elementor-widget-container img,
.nl-trust-v1__logos > .elementor-widget-image img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(100%, var(--nl-trust-v1-logo-max-width));
	max-height: var(--nl-trust-v1-logo-max-height);
	object-fit: contain;
	opacity: 0.55;
	filter: grayscale(1);
}

/**
 * Optional overrides (add on the section or a single logo in Elementor):
 * .nl-trust-v1--full-color
 * .nl-trust-v1__logo--full-color
 */
.nl-trust-v1--full-color .nl-trust-v1__logo img,
.nl-trust-v1--full-color .nl-trust-v1__logo .elementor-widget-container img,
.nl-trust-v1--full-color .nl-trust-v1__logos > .elementor-widget-image img,
.nl-trust-v1__logo--full-color img,
.nl-trust-v1__logo--full-color .elementor-widget-container img {
	opacity: 1;
	filter: none;
}

@media (min-width: 768px) {
	.nl-trust-v1__logo,
	.nl-trust-v1__logos > .elementor-widget-image {
		flex: 0 0 calc((100% - (2 * var(--nl-space-md))) / 3);
	}
}

@media (min-width: 1025px) {
	.nl-trust-v1__logos {
		flex-wrap: nowrap;
		gap: var(--nl-space-md);
	}

	.nl-trust-v1__logo,
	.nl-trust-v1__logos > .elementor-widget-image {
		flex: 1 1 0;
		max-width: var(--nl-trust-v1-logo-max-width);
	}
}

