/* ══════════════════════════════════════════════════════════════
   Roso — קרוסלת לוגואים (Marquee אוטומטי בלופ אינסופי)
══════════════════════════════════════════════════════════════ */
.roslg-marquee {
    --roslg-speed: 30s;
    --roslg-dir: normal;
    --roslg-gap: 50px;
    width: 100%;
    overflow: hidden;
    position: relative;
    direction: ltr; /* האנימציה תמיד LTR פנימית, הכיוון נשלט ע"י animation-direction */
}
.roslg-viewport {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: roslg-scroll var(--roslg-speed) linear infinite;
    animation-direction: var(--roslg-dir);
}
.roslg-track {
    display: flex;
    align-items: center;
    gap: var(--roslg-gap);
    padding-left: var(--roslg-gap); /* רווח בין הסט המקורי לכפיל */
    flex-shrink: 0;
    width: max-content; /* רוחב לפי התוכן האמיתי — קריטי ללופ חלק */
}
/* שני tracks זהים → הזזת ה-viewport ב-50% = בדיוק track אחד → לופ חלק */
@keyframes roslg-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.roslg-pause-hover:hover .roslg-viewport { animation-play-state: paused; }
.roslg-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    /* רוחב כל לוגו לפי כמה רוצים להציג בו-זמנית (מחשב) — יחידת vw קבועה */
    width: calc((100vw - (var(--roslg-items-d, 5) - 1) * var(--roslg-gap, 50px)) / var(--roslg-items-d, 5));
}
@media (max-width: 1024px) {
    .roslg-item {
        width: calc((100vw - (var(--roslg-items-t, 3) - 1) * var(--roslg-gap, 50px)) / var(--roslg-items-t, 3));
    }
}
@media (max-width: 600px) {
    .roslg-item {
        width: calc((100vw - (var(--roslg-items-m, 2) - 1) * var(--roslg-gap, 50px)) / var(--roslg-items-m, 2));
    }
}
.roslg-item img {
    height: 60px;
    width: auto;
    display: block;
    object-fit: contain;
    transition: filter 0.3s, opacity 0.3s, transform 0.3s;
}
/* גווני אפור (צבע בריחוף) */
.roslg-grayscale .roslg-item img {
    filter: grayscale(100%);
    opacity: 0.7;
}
.roslg-grayscale .roslg-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}
.roslg-item:hover img {
    transform: scale(1.05);
}

/* נגישות — עצירת אנימציה למי שמעדיף תנועה מופחתת */
@media (prefers-reduced-motion: reduce) {
    .roslg-viewport { animation: none; overflow-x: auto; }
}