/* ─────────────────────────────────────────────────
   Logos Showcase Widget
   ───────────────────────────────────────────────── */

.pxl-logos-container {
	--pxl-col-xs: 1;
	--pxl-col-sm: 2;
	--pxl-col-md: 3;
	--pxl-col-lg: 4;
	--pxl-col-xl: 5;
	--pxl-col-xxl: inherit;
	--pxl-gap: 20px;
	--pxl-anim-speed: 15s;
	--pxl-anim-dir: vertical;
	--pxl-fade-color-rgb: 255, 255, 255;
	--pxl-fade-opacity: 1;
	--pxl-fade-height: 100px;

	position: relative;
	width: 100%;
}

.pxl-logos-grid {
	display: grid;
	grid-template-columns: repeat(var(--pxl-col-xs), 1fr);
	gap: var(--pxl-gap);
	width: 100%;
	align-items: center;
	justify-items: center;
}

.pxl-logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.pxl-logo-item a,
.pxl-logo-item img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
}

.pxl-logo-item img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center;
}

/* ─────────────────────────────────────────────────
   Animation: Vertical Scroll
   ───────────────────────────────────────────────── */

.pxl-animated-logos.pxl-fade-vertical .pxl-col-0 {
	animation: slide-up-infinite var(--pxl-anim-speed) linear infinite;
}

.pxl-animated-logos.pxl-fade-vertical .pxl-col-1 {
	animation: slide-down-infinite var(--pxl-anim-speed) linear infinite;
}

@keyframes slide-up-infinite {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
	}
}

@keyframes slide-down-infinite {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(100%);
	}
}

/* ─────────────────────────────────────────────────
   Animation: Horizontal Scroll
   ───────────────────────────────────────────────── */

.pxl-animated-logos.pxl-fade-horizontal .pxl-col-0 {
	animation: slide-left-infinite var(--pxl-anim-speed) linear infinite;
}

.pxl-animated-logos.pxl-fade-horizontal .pxl-col-1 {
	animation: slide-right-infinite var(--pxl-anim-speed) linear infinite;
}

@keyframes slide-left-infinite {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-100%);
	}
}

@keyframes slide-right-infinite {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(100%);
	}
}

/* ─────────────────────────────────────────────────
   Gradient Fade Overlay
   ───────────────────────────────────────────────── */

.pxl-logos-fade {
	position: absolute;
	pointer-events: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

/* Vertical fade (top and bottom) */
.pxl-logos-fade.pxl-fade-vertical {
	background: linear-gradient(to bottom,
			rgba(var(--pxl-fade-color-rgb), var(--pxl-fade-opacity)) 0%,
			rgba(var(--pxl-fade-color-rgb), 0) var(--pxl-fade-height),
			rgba(var(--pxl-fade-color-rgb), 0) calc(100% - var(--pxl-fade-height)),
			rgba(var(--pxl-fade-color-rgb), var(--pxl-fade-opacity)) 100%);
}

/* Horizontal fade (left and right) */
.pxl-logos-fade.pxl-fade-horizontal {
	background: linear-gradient(to right,
			rgba(var(--pxl-fade-color-rgb), var(--pxl-fade-opacity)) 0%,
			rgba(var(--pxl-fade-color-rgb), 0) var(--pxl-fade-height),
			rgba(var(--pxl-fade-color-rgb), 0) calc(100% - var(--pxl-fade-height)),
			rgba(var(--pxl-fade-color-rgb), var(--pxl-fade-opacity)) 100%);
}

/* ─────────────────────────────────────────────────
   Responsive Grid Columns
   ───────────────────────────────────────────────── */

/* Extra Small (< 576px) */
@media (max-width: 575px) {
	.pxl-logos-grid {
		grid-template-columns: repeat(var(--pxl-col-xs), 1fr);
	}
}

/* Small (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
	.pxl-logos-grid {
		grid-template-columns: repeat(var(--pxl-col-sm), 1fr);
	}
}

/* Medium (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
	.pxl-logos-grid {
		grid-template-columns: repeat(var(--pxl-col-md), 1fr);
	}
}

/* Large (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
	.pxl-logos-grid {
		grid-template-columns: repeat(var(--pxl-col-lg), 1fr);
	}
}

/* Extra Large (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
	.pxl-logos-grid {
		grid-template-columns: repeat(var(--pxl-col-xl), 1fr);
	}
}

/* Extra Extra Large (>= 1400px) */
@media (min-width: 1400px) {
	.pxl-logos-grid {
		grid-template-columns: repeat(var(--pxl-col-xxl, var(--pxl-col-xl)), 1fr);
	}
}