/**
 * PID Logo Carousel - Frontend Styles
 *
 * Pure CSS infinite scroll animation using @keyframes and translateX.
 * No JavaScript required for the scrolling effect.
 *
 * CSS Custom Properties (set per-instance via inline styles):
 *   --pid-logo-speed:   Animation duration (default: 30s)
 *   --pid-logo-gap:     Gap between logos (default: 40px)
 *   --pid-logo-height:  Logo height (default: 60px)
 *
 * @package PID_Logo_Carousel
 * @version 1.0.1
 */

/* ==========================================================================
   Container
   ========================================================================== */

.pid-logo-carousel {
	--pid-logo-speed: 30s;
	--pid-logo-gap: 40px;
	--pid-logo-height: 60px;

	overflow: hidden;
	position: relative;
	width: 100%;
	padding: 5px 0;

	/* Fade edges for a polished look. */
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 5%,
		black 95%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 5%,
		black 95%,
		transparent 100%
	);
}

/* ==========================================================================
   Track - The scrolling container
   ========================================================================== */

.pid-logo-carousel__track {
	display: flex;
	width: max-content;
	animation: pid-logo-scroll var(--pid-logo-speed) linear infinite;
}

/* Reverse direction modifier. */
.pid-logo-carousel--reverse .pid-logo-carousel__track {
	animation-name: pid-logo-scroll-reverse;
}

/* Pause on hover - CSS only. */
.pid-logo-carousel:hover .pid-logo-carousel__track {
	animation-play-state: paused;
}

/* Respect reduced motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.pid-logo-carousel__track {
		animation-play-state: paused;
	}
}

/* ==========================================================================
   Logo Sets - Each set contains all logos once
   ========================================================================== */

.pid-logo-carousel__set {
	display: flex;
	align-items: center;
	gap: var(--pid-logo-gap);
	flex-shrink: 0;
	padding-right: var(--pid-logo-gap); /* Gap between the two sets. */
}

/* ==========================================================================
   Individual Logos
   ========================================================================== */

.pid-logo-carousel__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

.pid-logo-carousel__logo img {
	height: var(--pid-logo-height);
	width: auto;
	max-width: none;
	object-fit: contain;
	display: block;

	/* Prevent any theme interference. */
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

/* Subtle hover effect on linked logos. */
a.pid-logo-carousel__logo:hover img,
a.pid-logo-carousel__logo:focus img {
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

a.pid-logo-carousel__logo:focus {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 2px;
}

/* ==========================================================================
   Keyframe Animations
   ========================================================================== */

/**
 * Scroll left (default).
 * Translates from 0 to -50% because the track contains
 * exactly two identical sets of logos.
 */
@keyframes pid-logo-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/**
 * Scroll right (reverse).
 */
@keyframes pid-logo-scroll-reverse {
	0% {
		transform: translateX(-50%);
	}
	100% {
		transform: translateX(0);
	}
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

/* Tablet (768px and below): slightly reduce gap. */
@media (max-width: 768px) {
	.pid-logo-carousel {
		padding: 5px 0;
		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0%,
			black 3%,
			black 97%,
			transparent 100%
		);
		mask-image: linear-gradient(
			to right,
			transparent 0%,
			black 3%,
			black 97%,
			transparent 100%
		);
	}

	.pid-logo-carousel__set {
		gap: calc(var(--pid-logo-gap) * 0.8);
		padding-right: calc(var(--pid-logo-gap) * 0.8);
	}
}

/* Mobile (480px and below): reduce gap only, keep logo height full. */
@media (max-width: 480px) {
	.pid-logo-carousel {
		padding: 5px 0;
	}

	.pid-logo-carousel__set {
		gap: calc(var(--pid-logo-gap) * 0.6);
		padding-right: calc(var(--pid-logo-gap) * 0.6);
	}
}

/* ==========================================================================
   Admin notice (shown to editors when no logos configured)
   ========================================================================== */

.pid-logo-carousel-notice {
	padding: 12px 16px;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 4px;
	color: #856404;
	font-size: 14px;
}