/* Client Logos — פס Social Proof עדין, נע לאט, לולאה רציפה. עצירה ב-hover/focus,
   ומכבד prefers-reduced-motion (ללא תנועה אוטומטית — גלילה אופקית ידנית בלבד). */

.gc-client-logos {
	padding: 36px 0;
	background: var(--wp--preset--color--paper, #fefcfa);
}

.gc-client-logos__heading {
	text-align: center;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--ink-soft, #6b6464);
	margin: 0 0 24px;
}

.gc-client-logos__viewport {
	overflow: hidden;
	/* direction: ltr בכוונה, גם באתר RTL — זה התיקון האמיתי לבאג ה"נעלם".
	   בעמוד RTL, בלוק שרחב מההורה שלו "תלוי" מהצד הימני שלו ומשתרע שמאלה
	   (הקצה הימני שלו צמוד לימין ה-Viewport). translateX שלילי (תזוזה שמאלה)
	   רק דוחף אותו עוד יותר שמאלה — בלי שום "מאגר" תוכן שנכנס מימין, ולכן
	   ברגע שה-Offset גדל, פינה ימנית של ה-Viewport נשארת ריקה לגמרי (נבדק
	   ואומת ישירות: ברוחב Offset שהתקרב ל-Track אחד, כמעט כל הפס התרוקן).
	   direction:ltr הופך את זה לגיאומטריה "רגילה": ה-Scroller צמוד לשמאל
	   ומשתרע ימינה, כך שתזוזה שמאלה תמיד חושפת תוכן אמיתי נוסף מימין — בדיוק
	   מה שהחישוב ב-JS (site.js) מניח. לא משפיע על קריאות הטקסט של לוגו בודד
	   (Bidi עדיין מציג עברית נכון בתוך כל פריט) — רק על סדר הפריטים בפס
	   הדקורטיבי, שאין לו משמעות סמנטית/קריאה. */
	direction: ltr;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.gc-client-logos__scroller {
	display: flex;
	width: max-content;
	animation: gc-logos-scroll 32s linear infinite;
}

.gc-client-logos__viewport:hover .gc-client-logos__scroller,
.gc-client-logos__viewport:focus-within .gc-client-logos__scroller {
	animation-play-state: paused;
}

.gc-client-logos__track {
	display: flex;
	align-items: center;
	gap: 52px;
	list-style: none;
	margin: 0;
	padding: 0 24px;
}

/* Refinement (Media Pass): הוסר Grayscale/Opacity — כל הלוגואים מוצגים תמיד
   בצבעי המותג המקוריים והמלאים שלהם, לא רק ב-Hover.
   Polishing Pass: גובה הוגדל ~20% (44→53px) לנוכחות ויזואלית חזקה יותר ביחס
   לחשיבות הסקשן — aspect-ratio של כל לוגו (width:auto) נשמר במדויק, כך שאין
   מתיחה/חיתוך; רוחב ה-Scroller מחושב מחדש אוטומטית ב-JS (site.js) כך שהלולאה
   האינסופית נשארת Seamless בכל גודל. */
.gc-client-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 53px;
	min-width: 120px;
	text-decoration: none;
	border-radius: 6px;
}

/* עכשיו שהצבע תמיד מלא (אין יותר Grayscale ל-Hover "לחשוף"), נדרש אינדיקטור
   Focus מפורש משלו לניווט מקלדת — לא היה צריך את זה קודם כי השינוי בצבע
   עצמו שימש כאינדיקטור. */
.gc-client-logos__item:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue, #00afe9);
	outline-offset: 3px;
}

.gc-client-logos__item img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

.gc-client-logos__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 18px;
	border: 1.5px dashed var(--wp--preset--color--ink-soft, #6b6464);
	border-radius: 10px;
	font-size: 0.78rem;
	color: var(--wp--preset--color--ink-soft, #6b6464);
	white-space: nowrap;
}

/* Fallback ל-No-JS בלבד — 2 עותקים סטטיים (מוזרקים ב-PHP) + translateX(-50%)
   הפשוט (בלי var()/calc()!). site.js (כשהוא רץ) מזריק @keyframes נפרד עם ערך
   פיקסלים קונקרטי מחושב בפועל, ומחליף אליו את animation-name — כי דפדפנים לא
   בהכרח מבצעים אינטרפולציה חלקה ל-Keyframe שהערך הסופי שלו תלוי ב-var() שהשתנה
   מ-JS (נבדק בפועל: זה גרם לאנימציה "קפואה" שקופצת בבת-אחת בסוף כל מחזור,
   בדיוק התסמין שדווח). translateX(-50%) רגיל, בלי var/calc, כן מקבל אינטרפולציה
   חלקה כרגיל — לכן זה fallback תקין למקרה שה-JS לא רץ, גם אם גיאומטרית לא
   מדויק כמו הגרסה המחושבת. */
@keyframes gc-logos-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* dir="rtl": translateX(-50%) עדיין נכון — התנועה היא תמיד "שמאלה" בקואורדינטות
   הפיזיות של הדף, שזו התחושה העדינה והרציפה המבוקשת, בלי קשר לכיווניות הטקסט. */

@media (prefers-reduced-motion: reduce) {
	.gc-client-logos__viewport {
		overflow-x: auto;
	}
	.gc-client-logos__scroller {
		animation: none;
	}
	.gc-client-logos__track--clone {
		display: none;
	}
}

@media (max-width: 600px) {
	.gc-client-logos__track {
		gap: 36px;
	}
	.gc-client-logos__item {
		height: 43px;
		min-width: 95px;
	}
}