/* Reviews strip — homepage section 4. Design spec 1.8 §6.1.
   The block below is copied from spec §6.1.9 — do not change a value without approval
   (direction ltr/rtl, one-set translateX and the auto-clone in reviews-strip.js depend on each other).
   Two changes approved by Nir, 08/10/2026: breakpoints 767/479 (like the header and footer)
   and the level-0 fallback fonts in every font-family. */

/* ===== רצועת הביקורות ===== */
.reviews{background:#F5F7FB;border-block:1px solid #E4E9F2;
         padding:56px 0 52px;overflow:hidden}
.reviews .top{text-align:center;padding-inline:24px;margin-bottom:28px}
.reviews .eb{font-family:"Assistant",system-ui,-apple-system,sans-serif;font-weight:700;font-size:12px;
             letter-spacing:.12em;color:#5A6472;margin:0 0 8px}
.reviews h2{font-family:"Heebo",system-ui,-apple-system,sans-serif;font-weight:900;font-size:36px;
            color:#16181D;margin:0 0 14px;line-height:1.15}

/* בלוק הדירוג — בלי מכל */
.rating{display:grid;gap:7px;justify-items:center}
.rating .stars{color:#C2570A;letter-spacing:4px;font-size:27px;line-height:1}
.rating .num{display:flex;align-items:baseline;gap:9px;color:#0F2E63}
.rating .num b{font-family:"Heebo",system-ui,-apple-system,sans-serif;font-weight:900;font-size:31px;line-height:1}
.rating .num span{font-size:15.5px;font-weight:600}
.rating a{color:#1A57C2;text-decoration:none;border-bottom:1px solid currentColor;
          font-weight:600;font-size:15px}

/* המסילה — direction:ltr חובה */
.rows{display:grid;gap:16px;position:relative;direction:ltr;overflow:hidden;
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
      mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.row{display:flex;gap:16px;width:max-content;will-change:transform;
     animation:slide var(--dur,40s) linear infinite}
.row.b{animation-direction:reverse}
.rows:hover .row,.rows:focus-within .row{animation-play-state:paused}
@keyframes slide{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--dist,50%)))}
}

/* הכרטיס — direction:rtl חובה */
.rc{direction:rtl;flex:none;width:330px;background:#FFFFFF;
    border:1px solid #E4E9F2;border-radius:16px;padding:20px;
    display:flex;flex-direction:column;gap:10px}
.rc .st{color:#C2570A;font-size:14px;letter-spacing:2px;line-height:1}
.rc p{margin:0;font-size:15px;color:#5A6472;line-height:1.55}
.rc .who{display:flex;align-items:center;gap:9px;margin-top:auto}
.rc .who i{width:28px;height:28px;border-radius:999px;background:#DCE7FA;
           color:#0F2E63;display:grid;place-items:center;font-style:normal;
           font-family:"Heebo",system-ui,-apple-system,sans-serif;font-weight:900;font-size:13px;flex:none}
.rc .who b{font-size:14px;color:#16181D;font-weight:600}

@media (max-width:767px){
  .reviews{padding:40px 0 36px}
  .reviews .top{padding-inline:16px}
  .reviews h2{font-size:26px}
  .rc{width:270px}
}
@media (max-width:479px){
  .rating .stars{font-size:22px;letter-spacing:3px}
  .rating .num b{font-size:26px}
}
@media (prefers-reduced-motion: reduce){
  .row{animation:none !important}
  .rows{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
}

/* ===== Additions approved by Nir, 08/10/2026 (not in spec §6.1.9) ===== */
/* The accessibility widget's "stop animations" button (html.a11y-reduce-motion) gets the same rule as prefers-reduced-motion. */
html.a11y-reduce-motion .row{animation:none !important}
html.a11y-reduce-motion .rows{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
/* Screen-reader-only text ("דירוג 5 מתוך 5" in each card) — the site had no such class. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* mobile-fixes.css forces "section h2{margin-bottom:16px !important}" up to 768px.
   Spec §6.1.2 says 14px at every width — this keeps the spec value (768 here = the range mobile-fixes.css covers). */
@media (max-width:768px){
  .reviews h2{margin-bottom:14px !important}
}
/* Spec §6.1.4: the quote is two lines, cut with "…" (at 270px two quotes wrapped to three). */
.rc p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
/* Keyboard focus ring drawn inside the strip. Outside it, the edge fade (mask-image) hid it completely;
   an inside outline sat under the moving cards (their own layer). So: a frame on top of the cards. */
.rows:focus-visible::after{content:"";position:absolute;inset:0;z-index:1;border:3px solid #0F2E63;pointer-events:none}
/* Reduced motion: no edge fade, and the strip scrolls (a frame inside would scroll away) → the normal outside ring shows. */
@media (prefers-reduced-motion: reduce){.rows:focus-visible::after{content:none}}
html.a11y-reduce-motion .rows:focus-visible::after{content:none}