/* Logo Wall — front end. Per-wall sizes and stagger rules are printed inline. */

.lgw-wall {
	box-sizing: border-box;
	width: 100%;
	container-type: inline-size;
	container-name: lgw;
}

.lgw-wall *,
.lgw-wall *::before,
.lgw-wall *::after {
	box-sizing: border-box;
}

/*
 * The grid is narrowed so a shifted row ends exactly at the right edge:
 * width = 100% × cols / (cols + shift). Horizontal spacing lives inside
 * each cell (padding) so the shift is exactly a fraction of one cell.
 */
.lgw-wall .lgw-grid {
	display: grid;
	grid-template-columns: repeat(var(--lgw-cols, 6), minmax(0, 1fr));
	column-gap: 0;
	row-gap: var(--lgw-gap, 40px);
	width: calc(100% * var(--lgw-cols, 6) / (var(--lgw-cols, 6) + var(--lgw-shift, 0)));
	margin: 0;
	padding: 0;
	list-style: none;
}

.lgw-wall .lgw-item {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-width: 0;
	margin: 0;
	padding: 0 var(--lgw-px, 16px);
	list-style: none;
}

.lgw-wall .lgw-item::before,
.lgw-wall .lgw-item::marker {
	content: none;
}

.lgw-wall.lgw-align-center .lgw-item {
	justify-content: center;
}

.lgw-wall .lgw-link {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	line-height: 0;
	text-decoration: none;
	border: 0;
	box-shadow: none;
}

.lgw-wall .lgw-item img {
	display: block;
	width: auto;
	height: calc(var(--lgw-h, 52px) * var(--lgw-scale, 1));
	max-width: 100%;
	max-height: none;
	margin: 0;
	object-fit: contain;
	object-position: left center;
	opacity: var(--lgw-opacity, 1);
	transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}

.lgw-wall.lgw-align-center .lgw-item img {
	object-position: center;
}

/* Colour modes. "Black" and "White" need logos with a transparent background (PNG/SVG/WebP). */
.lgw-wall.lgw-color-grayscale .lgw-item img {
	filter: grayscale(1);
}

.lgw-wall.lgw-color-black .lgw-item img {
	filter: grayscale(1) brightness(0);
}

.lgw-wall.lgw-color-white .lgw-item img {
	filter: grayscale(1) brightness(0) invert(1);
}

/* Hover effects. */
.lgw-wall.lgw-hover-color .lgw-item:hover img,
.lgw-wall.lgw-hover-color .lgw-item:focus-within img {
	filter: none;
	opacity: 1;
}

.lgw-wall.lgw-hover-opacity .lgw-item:hover img,
.lgw-wall.lgw-hover-opacity .lgw-item:focus-within img {
	opacity: 1;
}

.lgw-wall.lgw-hover-lift .lgw-item:hover img,
.lgw-wall.lgw-hover-lift .lgw-item:focus-within img {
	transform: scale(1.07);
	opacity: 1;
}

.lgw-wall .lgw-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.lgw-wall .lgw-item img {
		transition: none;
	}
}