/**
 * BongoHive Logos Marquee
 *
 * Image-driven sibling of the text Trusted By Marquee. Same CSS-only
 * infinite scroll (duplicated list + translateX(-50%) keyframe), same
 * mask-based edge fade, same prefers-reduced-motion fallback to a
 * static, wrap-friendly layout. Items can be <img> or — when an editor
 * leaves the image empty — a styled <span> text fallback so the bar
 * never collapses.
 *
 * Every item renders inside a fixed-size **slot** so wide and square
 * logos take up the same horizontal space — the row reads as a clean
 * grid even when the source images vary wildly in aspect ratio. The
 * image inside the slot uses `object-fit: contain` (or `cover`) so it
 * never crops or stretches.
 *
 * Animation timing-function is exposed as a control selector on the
 * PHP side so the existing duration / new ease-in-out options just
 * override the variable.
 */

.bh-logos-marquee {
	--bh-logos-shark-dark: #1d2229;
	--bh-logos-white: #ffffff;
	--bh-logos-gold: #f0af24;

	align-items: center;
	background-color: var(--bh-logos-shark-dark);
	color: var(--bh-logos-white);
	display: flex;
	gap: 80px;
	justify-content: center;
	overflow: hidden;
	padding: 50px 110px;
	width: 100%;
	box-sizing: border-box;
}

.bh-logos-marquee__label {
	color: var(--bh-logos-gold);
	flex-shrink: 0;
	font-family: 'Ubuntu', 'Noto Sans', Arial, sans-serif;
	font-size: clamp(16px, 1vw + 12px, 22px);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
}

.bh-logos-marquee__viewport {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 8%,
		#000 92%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 8%,
		#000 92%,
		transparent 100%
	);
}

.bh-logos-marquee__track {
	align-items: center;
	animation: bh-logos-marquee-scroll 40s linear infinite;
	display: flex;
	gap: 80px;
	width: max-content;
	will-change: transform;
}

.bh-logos-marquee__list {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	gap: 80px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The default gallery presentation never moves logos through a clipped
   viewport, so each identity remains fully readable at every width. */
.bh-logos-marquee--static .bh-logos-marquee__viewport {
	-webkit-mask-image: none;
	mask-image: none;
	overflow: visible;
}

.bh-logos-marquee--static .bh-logos-marquee__track {
	animation: none;
	justify-content: center;
	width: 100%;
}

.bh-logos-marquee--static .bh-logos-marquee__list {
	flex: 1 1 100%;
	flex-wrap: wrap;
	justify-content: center;
	min-width: 0;
	row-gap: 32px;
	width: 100%;
}

.bh-logos-marquee--static .bh-logos-marquee__item {
	max-width: 100%;
}

.bh-logos-marquee__item-row {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

/* Each item is a fixed-size slot — controlled by Slot Width / Slot
   Height in the widget. The image inside is forced to fill the slot
   via object-fit. */
.bh-logos-marquee__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 64px;
	text-decoration: none;
	color: inherit;
	opacity: 1;
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.bh-logos-marquee__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
	transition: filter 0.2s ease;
}

/* Grayscale / white-out treatments applied to the IMAGE only so the
   text fallback keeps its configured colour. */
.bh-logos-marquee--filter-grayscale .bh-logos-marquee__image {
	filter: grayscale(1);
}

.bh-logos-marquee--filter-invert-grayscale .bh-logos-marquee__image {
	filter: grayscale(1) invert(1) brightness(1.2);
}

/* Color on Hover — restore real brand colours when a visitor mouses
   over an individual logo. Only active when a treatment is selected. */
.bh-logos-marquee--color-on-hover .bh-logos-marquee__item:hover .bh-logos-marquee__image,
.bh-logos-marquee--color-on-hover .bh-logos-marquee__item:focus-visible .bh-logos-marquee__image {
	filter: none;
}

.bh-logos-marquee__fallback {
	color: var(--bh-logos-white);
	font-family: 'Ubuntu', 'PT Sans', Arial, sans-serif;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.4;
	white-space: nowrap;
	text-align: center;
	padding: 0 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* Left → Right reverses the direction by playing the keyframe negatively. */
.bh-logos-marquee--right .bh-logos-marquee__track {
	animation-direction: reverse;
}

/* Pause on hover / focus — only when the editor opts in. */
.bh-logos-marquee--pause-hover:hover .bh-logos-marquee__track {
	animation-play-state: paused;
}

.bh-logos-marquee--pause-focus:focus-within .bh-logos-marquee__track {
	animation-play-state: paused;
}

/* Editor-only notice shown when Dynamic mode is selected. */
.bh-logos-marquee__editor-notice {
	color: var(--bh-logos-white);
	opacity: 0.6;
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
}

@keyframes bh-logos-marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Reduced motion — drop the scroll, wrap the logos, centre the row. */
@media (prefers-reduced-motion: reduce) {
	.bh-logos-marquee__viewport {
		-webkit-mask-image: none;
		mask-image: none;
		overflow: visible;
	}

	.bh-logos-marquee__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}

	/* Keep one copy of the list — hide the aria-hidden duplicate. */
	.bh-logos-marquee__list[aria-hidden="true"] {
		display: none;
	}

	.bh-logos-marquee__list {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 32px;
	}
}

/* Mobile — tighten padding & item gaps so logos still breathe. */
@media (max-width: 768px) {
	.bh-logos-marquee {
		gap: 32px;
		padding: 28px 24px;
		flex-direction: column;
	}

	.bh-logos-marquee__viewport {
		width: 100%;
	}

	.bh-logos-marquee__track,
	.bh-logos-marquee__list {
		gap: 40px;
	}

	.bh-logos-marquee__item {
		width: 120px;
		height: 48px;
	}

	.bh-logos-marquee__fallback {
		font-size: 18px;
	}
}