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

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