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

/* ======================== LOGO WALL ======================== */
.logo-wall-section {
	display: flex;
	flex-flow: column nowrap;
	width: var(--logo-wall-section-width, 90%);
	margin: 0 auto 3rem;
	/* border: 3px solid red; */
}

/*
	.section.logo-wall-section {
		.logo-wall-heading {} ... => VAR / CUSTOM PROP <=
		.brand-groups {
			.heading-about-our-brands { a.about-our-brands {} } ... // ALL TENANTS: display: none;

			.brand-group {
				.brand-group-heading {}
				.nav-ul-brands {}
			}
		}
	}
*/

/* ============ ORIG LOGO WALL HEADING (LOC DB) ============ */
.logo-wall-section > .logo-wall-heading { display: var(--logo-wall-heading-display); }

/* ============ 'ABOUT OUR BRANDS' (.heading-about-our-brands > a) ============ */
.logo-wall-section .heading-about-our-brands { display: none; }

.logo-wall-section .brand-group {
	max-width: unset;
	margin-bottom: 1.5rem;
}

.logo-wall-section .brand-group .brand-group-heading {
	display: var(--logo-wall-brand-group-heading-display);
}

/* ============ SHARE VIZ STYLE OF EITHER .heading ============ */
.logo-wall-section > .logo-wall-heading,
.logo-wall-section .brand-group .brand-group-heading {
	/* max-width: 100%; */
	width: 100%;
	margin: var(--logo-wall-heading-margin, 0 0 1.8ch 0);
	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);
	/* border: 3px solid coral; */

	/* FOR TENANTS w/BRAND GROUP HEADINGS, BUT ONLY IF THEY WANT A BORDER (because defaults are '0') */
	border: var(--logo-wall-brand-group-heading-border, 0);
	border-width: var(--logo-wall-brand-group-heading-border-width, 0);
}
.logo-wall-section .brand-group .brand-group-heading:empty { display: none; }


.logo-wall-section .nav-ul-brands {
	display: grid;
	/* !!! DNU max-width !!! */
	position: relative;
	margin: 0;
	padding: 0;
	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, 3rem);
	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); }

.logo-wall-section .nav-li-brand a img.showcase-img { display: none; }

/* ============ TODO: FIND ANY OF THIS IN [T].css AND TRASH IT */
.landscape .logo-wall-section .nav-li-brand,
.landscape .logo-wall-section .nav-li-brand:last-child { border: var(--logo-wall-li-border, 1px solid transparent); }

.landscape .logo-wall-section .nav-li-brand:hover,
.landscape .logo-wall-section .nav-li-brand:last-child:hover { border: var(--logo-wall-li-hover-border, 1px solid #ccc); }

.landscape .logo-wall-section .nav-li-brand > a:hover { background: transparent; }








/*
	.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; }
*/