/**
 * قسم الشركاء في ثيم تنمية الشمالية (template-parts/home/home-partners.php): «شريط الشركاء».
 *
 * شريط بعرض الشاشة كله من بلاطات بيضاء بشعارات الشركاء بألوانها، يدور ببطء بلا انقطاع (القائمة مكررة مرتين،
 * والحركة نصف طول الشريط) ويتلاشى عند الطرفين، ويتوقف عند المرور أو التركيز. عند المرور ترتفع البلاطة وتنمو
 * تحتها جرّة كوفية بتدرّج الرمز. مع تقليل الحركة: لا دوران، والشريط يُمرَّر باليد بلا النسخة المكررة.
 */

.sh-partners {
	overflow: hidden;
}

.sh-partners .sh-head {
	margin-bottom: 38px;
}

.sh-partners__strip {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 10px 0 18px;
	/* تلاشي الطرفين */
	-webkit-mask: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.sh-partners__track {
	display: flex;
	gap: 18px;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: sh-partners-run var(--sh-partners-duration, 40s) linear infinite;
}

/* من اليسار إلى اليمين بنصف طول الشريط (طول نسخة واحدة)، فيلتقي آخره بأوله */
@keyframes sh-partners-run {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(50% + 9px));
	}
}

.sh-partners__strip:hover .sh-partners__track,
.sh-partners__strip:focus-within .sh-partners__track {
	animation-play-state: paused;
}

.sh-partners__item {
	flex: 0 0 auto;
}

/* ==========================================================================
   البلاطة
   ========================================================================== */

.sh-partners__tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 120px;
	padding: 20px 26px;
	overflow: hidden;
	border: 1px solid var(--sh-line);
	border-radius: var(--sh-radius-lg);
	background: var(--sh-card);
	color: var(--sh-ink);
	text-decoration: none;
	transition: transform 0.35s var(--sh-ease), box-shadow 0.35s ease, border-color 0.3s ease;
}

/* جرّة كوفية بتدرّج الرمز على الحافة السفلية، تنمو من الوسط عند المرور */
.sh-partners__tile::before {
	content: '';
	position: absolute;
	inset: auto 26% 0;
	height: 4px;
	border-radius: 3px 3px 0 0;
	background: linear-gradient(to left, var(--sh-mint), var(--theme-primary));
	transform: scaleX(0);
	transition: transform 0.4s var(--sh-ease);
}

.sh-partners__logo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.4s var(--sh-ease);
}

/* الشريك بلا شعار: اسمه داخل البلاطة */
.sh-partners__name {
	color: var(--theme-text-dark);
	font-size: 0.92rem;
	font-weight: 800;
	line-height: 1.6;
	text-align: center;
}

.sh-partners__tile:hover,
.sh-partners__tile:focus-visible {
	border-color: transparent;
	box-shadow: var(--sh-shadow-hover);
	transform: translateY(-4px);
}

.sh-partners__tile:hover::before,
.sh-partners__tile:focus-visible::before {
	transform: scaleX(1);
}

.sh-partners__tile:hover .sh-partners__logo,
.sh-partners__tile:focus-visible .sh-partners__logo {
	transform: scale(1.05);
}

.sh-partners__tile:focus-visible {
	outline: 2px solid var(--sh-mint);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.sh-partners__track {
		gap: 12px;
	}

	.sh-partners__tile {
		width: 150px;
		height: 96px;
		padding: 16px 18px;
	}

	@keyframes sh-partners-run {
		from {
			transform: translateX(0);
		}

		to {
			transform: translateX(calc(50% + 6px));
		}
	}
}

/* تقليل الحركة: بلا دوران، والشريط يُمرَّر باليد، والنسخة المكررة مخفية */
@media (prefers-reduced-motion: reduce) {
	.sh-partners__strip {
		overflow-x: auto;
		-webkit-mask: none;
		mask: none;
	}

	.sh-partners__track {
		animation: none;
		padding-inline: 16px;
	}

	.sh-partners__item[aria-hidden="true"] {
		display: none;
	}

	.sh-partners__tile,
	.sh-partners__tile::before,
	.sh-partners__logo {
		transition: none;
	}
}