/* marquee של המלצות עם שליטה באצבע. שקד, 30.9.2026, סבב 3. רכיב עצמאי: marquee.css + marquee.js, ותלוי רק במשתנים של tokens.css.
   המבנה: שתי רשימות זהות על מסילה אחת (השנייה aria-hidden), וה-JS מזיז את המסילה ב-translateX בתוך טווח של רשימה אחת, ולכן הלולאה אינסופית בשני הכיוונים.
   margin ולא gap בין הכרטיסים: כך רשימה אחת = בדיוק חצי מסילה, והחיבור לא קופץ.
   touch-action:pan-y: החלקה לצד שייכת לקרוסלה, והחלקה למעלה ולמטה נשארת גלילה רגילה של הדף. */
.mq{--mq-w:260px;--mq-h:360px;--mq-gap:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--rn-s2);margin-block:var(--rn-s5)}
/* minmax(0,1fr): clip הוא לא scroll container, ובלי זה העמודה נמתחת לרוחב המסילה כולה */
@media (min-width:768px){.mq{--mq-w:300px;--mq-h:420px;--mq-gap:24px}}
.mq__vp{overflow:clip;padding-block:12px;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq__vp:active{cursor:grabbing}
.mq__vp:focus-visible{outline:var(--rn-focus);outline-offset:-3px}
.mq__track{display:flex;align-items:center;inline-size:max-content;will-change:transform}
.mq ul{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.mq li{flex:none;inline-size:var(--mq-w);max-block-size:var(--mq-h);margin-inline-end:var(--mq-gap);overflow:clip;border-radius:var(--rn-radius);box-shadow:var(--rn-shadow);background:var(--rn-on-dark)}
.mq img{display:block;inline-size:100%;pointer-events:none}
/* 0.4.4: צילום שלא חותכים (ניב 1.10, edut-08 ו-edut-10): הכרטיס בגובה המלא שלו. השאר עד --mq-h */
.mq li.mq__full{max-block-size:none}
/* reduced-motion: אין תנועה אוטומטית (ב-JS). הגרירה והחצים עובדים.
   אין כפתור עצירה (החלטת ניב, 30.9.2026, אחרי הסבר על WCAG 2.2.2). במקומו: נגיעה, עכבר ופוקוס עוצרים, ו-Space/Escape בפוקוס עוצרים עד שהפוקוס יוצא */