/**
 * Sponsors Widget — Picklemall Widgets
 */

/* ── Section wrapper ──────────────────────────────────────────────────────── */

.pm-sp-section {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-bottom: 2rem;
}

/* ── Top border overlay ───────────────────────────────────────────────────── */

.pm-sp-border {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: block;
	pointer-events: none;
	user-select: none;
	z-index: 10;
}

/* ── Title ────────────────────────────────────────────────────────────────── */

.pm-sp-header {
	text-align: center;
	/* border.png is 3840×644 px → display height ≈ 16.8vw at any viewport. */
	padding: calc(16.8vw + 2rem) 1rem 3rem;
}

.pm-sp-title {
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	font-size: 48px;
	color: var(--pm-color-dark, #1a3030);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.15;
	margin: 0;
	max-width: 500px;
	margin: 0 auto;
}

.pm-sp-title-graffiti {
	font-family: var(--pm-font-graffiti, 'Permanent Marker', cursive);
	color: var(--pm-color-orange, #E85D22);
	text-transform: none;
	letter-spacing: 0.01em;
}

/* ── Marquee container ────────────────────────────────────────────────────── */

.pm-sp-marquee-container {
	width: 100%;
	overflow: hidden;
	position: relative;
}

/* ── Marquee track ────────────────────────────────────────────────────────── */

@keyframes pm-sp-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

.pm-sp-marquee-track {
	display: flex;
	width: max-content;
	flex-wrap: nowrap;
	align-items: center;
	gap: 2rem !important;
	padding: 1rem 0;
	animation: pm-sp-marquee 28s linear infinite;
	will-change: transform;
}

/* Pause scrolling while the user hovers over the strip */
.pm-sp-marquee-container:hover .pm-sp-marquee-track {
	animation-play-state: paused;
}

/* ── Logo item ────────────────────────────────────────────────────────────── */

.pm-sp-logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pm-sp-logo-item a {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── Logo image ───────────────────────────────────────────────────────────── */

.pm-sp-logo {
	height: 200px !important;
	width: auto;
	max-width: 200px;
	object-fit: contain;
	opacity: 1;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.pm-sp-logo:hover {
	opacity: 1;
	transform: scale(1.06);
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.pm-sp-title {
		font-size: 32px;
	}

	.pm-sp-marquee-track {
		gap: 3rem;
		animation-duration: 10s;
	}

	.pm-sp-logo {
		height: 42px;
	}
}