/**
 * Nexza Logo Grid widget.
 */

.nx-logos-title {
	max-width: 16ch;
}

.nx-logo-grid {
	display: grid;
	margin: clamp(40px, 5vw, 80px) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--nx-line-2);
	border-left: 1px solid var(--nx-line-2);
}

.nx-logo-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nx-logo-grid--4 { grid-template-columns: repeat(4, 1fr); }
.nx-logo-grid--5 { grid-template-columns: repeat(5, 1fr); }
.nx-logo-grid--6 { grid-template-columns: repeat(6, 1fr); }

.nx-logo-cell {
	position: relative;
	isolation: isolate;
	min-width: 0;
	aspect-ratio: 2 / 1;
	border-right: 1px solid var(--nx-line-2);
	border-bottom: 1px solid var(--nx-line-2);
	overflow: hidden;
}

/* Copper fill rising from the bottom on hover (transform only). */
.nx-logo-cell::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--nx-copper);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform .55s var(--nx-ease);
}

.nx-logo-cell:hover::before,
.nx-logo-cell:focus-within::before {
	transform: scaleY(1);
}

.nx-logo-cell > a,
.nx-logo-cell > span {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 12% 16%;
	color: var(--nx-taupe);
	transition: color .3s;
}

.nx-logo-cell:hover > a,
.nx-logo-cell:hover > span,
.nx-logo-cell:focus-within > a {
	color: var(--nx-ink);
}

.nx-logo-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.nx-logo-name {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-align: center;
	text-transform: uppercase;
}

@media (max-width: 860px) {
	.nx-logo-grid--3,
	.nx-logo-grid--4,
	.nx-logo-grid--5,
	.nx-logo-grid--6 {
		grid-template-columns: repeat(2, 1fr);
	}

	.nx-logo-grid {
		margin-top: 40px;
	}

	.nx-logo-cell > a,
	.nx-logo-cell > span {
		padding: 14% 14%;
	}

	.nx-logo-name {
		font-size: 11px;
		letter-spacing: .1em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nx-logo-cell::before {
		transition: none;
	}
}