/* Client logo grid widget (inc/elementor/class-logo-grid-widget.php). Sizes and colors come from widget controls. */
.lawyer-logo-grid {
	--llg-columns: 6;
	--llg-transition: .3s;
	display: grid;
	grid-template-columns: repeat(var(--llg-columns), minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 20px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.lawyer-logo-grid__item {
	box-sizing: border-box;
	display: flex;
	aspect-ratio: 3 / 2;
	align-items: center;
	justify-content: center;
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
	transition: background-color var(--llg-transition), border-color var(--llg-transition), box-shadow var(--llg-transition), transform var(--llg-transition);
}

/* Fills the box by default; "max width/height" in the widget shrink it. */
.lawyer-logo-grid__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
	transition: opacity var(--llg-transition), filter var(--llg-transition), transform var(--llg-transition);
}

.lawyer-logo-grid__actions {
	display: flex;
	justify-content: center;
	margin-block-start: 32px;
}

.lawyer-logo-grid__more {
	padding: 12px 32px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: background-color var(--llg-transition, .3s), color var(--llg-transition, .3s);
}

.lawyer-logo-grid__more[hidden] {
	display: none;
}

.lawyer-logo-grid__more:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.lawyer-logo-grid__empty {
	padding: 24px;
	border: 1px dashed currentColor;
	text-align: center;
	opacity: .6;
}

@media (prefers-reduced-motion: reduce) {
	.lawyer-logo-grid__item,
	.lawyer-logo-grid__img {
		transition: none;
	}
}