/* ... JIEcosystemB2B/wwwroot/components/logo-wall/logo-wall.css */

/* ======================== LOGO WALL ======================== */
.logo-wall-section {
	width: var(--logo-wall-section-width, 90%);
	margin: 0 auto 3rem;
}

.logo-wall-section .heading {
	display: var(--logo-wall-heading-display, block);
	margin: var(--logo-wall-heading-margin, 2.1ch);
	font-family: var(--logo-wall-heading-font);
	font-size: var(--logo-wall-heading-font-size, 3ch);
	text-align: var(--logo-wall-heading-text-align, center);
	color: var(--logo-wall-heading-color, #666);
	background: var(--logo-wall-heading-bg-color, transparent);
	text-transform: var(--logo-wall-heading-text-transform, uppercase);
	word-spacing: var(--logo-wall-heading-word-spacing, .9ch);
	letter-spacing: var(--logo-wall-heading-letter-spacing, .3ch);
}

.logo-wall-section .nav-ul-brands {
	display: grid;
	/* !!! DNU max-width !!! */
	position: relative;
	grid-template-columns: var(--logo-wall-grid-template-columns, repeat(auto-fill, minmax(240px, 1fr)));
	grid-auto-rows: var(--logo-wall-grid-auto-rows, 90px);
	grid-gap: var(--logo-wall-grid-gap, 9px);
	margin-bottom: var(--logo-wall-margin-bottom, 0);
	background: var(--logo-wall-bg-color, transparent);
	border: var(--logo-wall-border, transparent);
}

.logo-wall-section .nav-li-brand {
	opacity: var(--logo-wall-li-opacity, .9);
	color: #000; /* re: contrast errors at https://wave.webaim.org: robots are fast, not smart */
	background: var(--logo-wall-li-bg-color, #f6f6f6);
	transition: all .3s ease-in-out;
	border: var(--logo-wall-li-border, 1px solid #f0f0f0);
}
.logo-wall-section .nav-li-brand:hover {
	opacity: 1;
	background: var(--logo-wall-li-hover-bg-color, transparent);
	border: var(--logo-wall-li-hover-border, 3px solid #f0f0f0);
	border-radius: var(--logo-wall-li-hover-border-radius, 3px);
}

.logo-wall-section .nav-li-brand a {
	height: 100%; /* !!! */
	text-indent: -999rem;
	/* odd, but text-align required to overwrite .nav-li-brand { text-align: right; } in main_nav.css */
	text-align: initial;
}

.logo-wall-section .nav-li-brand a img {
	display: block;
	width: 100%;
	max-width: var(--logo-wall-img-max-width, 180px);
	max-height: var(--logo-wall-img-max-height, 75%);
	margin: auto; /* !!! */
	object-fit: contain;
	transition: all .3s ease-in-out;
	transform: var(--logo-wall-img-transform, scale(.9));
}
.logo-wall-section .nav-li-brand:hover a img { transform: scale(1); }


/*
	.en .logo-wall .brand a img.en,
	.fr .logo-wall .brand a img.fr { display: block; }

	if any logos or brand deco have embedded language:
	.en .logo-wall .brand a img.en,
	.es .logo-wall .brand a img.es { display: block; }
*/