/* ============================================================
   Logo Grid Widget
   bh-logo-grid
   ============================================================ */

.bh-logo-grid {
	background-color: #ffffff;
}

/* Grid */
.bh-logo-grid__grid {
	align-items: center;
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(5, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Item slot */
.bh-logo-grid__item {
	--bh-lg-resting-opacity: 1;
	align-items: center;
	display: flex;
	height: 80px;
	justify-content: center;
	padding: 16px;
	text-decoration: none;
	transition-property: opacity, transform, filter, box-shadow;
	transition-duration: 250ms;
	transition-timing-function: ease;
}

/* Image */
.bh-logo-grid__image {
	display: block;
	height: 100%;
	max-width: 80%;
	object-fit: contain;
	object-position: center;
	transition-property: filter;
	transition-duration: 250ms;
	transition-timing-function: ease;
	width: auto;
}

/* ── Hover effects ──────────────────────────────────────────
   Each effect is a modifier class applied to the wrapper so
   Elementor-instance CSS generated from controls remains
   authoritative and the effects are opt-in, not global.
   ─────────────────────────────────────────────────────────── */

/* Fade */
.bh-logo-grid--hover-opacity .bh-logo-grid__item {
	opacity: var(--bh-lg-resting-opacity, 0.6);
}
.bh-logo-grid--hover-opacity .bh-logo-grid__item:hover,
.bh-logo-grid--hover-opacity .bh-logo-grid__item:focus-visible {
	opacity: 1;
}

/* Scale */
.bh-logo-grid--hover-scale .bh-logo-grid__item:hover,
.bh-logo-grid--hover-scale .bh-logo-grid__item:focus-visible {
	transform: scale(1.08);
}

/* Grayscale → full colour */
.bh-logo-grid--hover-grayscale .bh-logo-grid__image {
	filter: grayscale(100%);
}
.bh-logo-grid--hover-grayscale .bh-logo-grid__item:hover .bh-logo-grid__image,
.bh-logo-grid--hover-grayscale .bh-logo-grid__item:focus-visible .bh-logo-grid__image {
	filter: grayscale(0%);
}

/* Drop shadow */
.bh-logo-grid--hover-shadow .bh-logo-grid__item:hover,
.bh-logo-grid--hover-shadow .bh-logo-grid__item:focus-visible {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* Fade + scale */
.bh-logo-grid--hover-opacity-scale .bh-logo-grid__item {
	opacity: var(--bh-lg-resting-opacity, 0.6);
}
.bh-logo-grid--hover-opacity-scale .bh-logo-grid__item:hover,
.bh-logo-grid--hover-opacity-scale .bh-logo-grid__item:focus-visible {
	opacity: 1;
	transform: scale(1.08);
}

/* ── Focus ring ─────────────────────────────────────────── */

.bh-logo-grid__item:focus-visible {
	border-radius: 4px;
	outline: 2px solid #f0af24;
	outline-offset: 2px;
}

/* ── Reduced motion ─────────────────────────────────────── */

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

	.bh-logo-grid--hover-scale .bh-logo-grid__item:hover,
	.bh-logo-grid--hover-scale .bh-logo-grid__item:focus-visible,
	.bh-logo-grid--hover-opacity-scale .bh-logo-grid__item:hover,
	.bh-logo-grid--hover-opacity-scale .bh-logo-grid__item:focus-visible {
		transform: none;
	}
}