/* Home "Our clients" logo strip (L2v): [abd_client_marquee].
 * One track holds the logos twice and slides by half its width (left in English, right in Arabic), so the loop has no
 * seam. Grey logos take their own colours under the pointer; the strip pauses on hover, with the pause button, and stops
 * at its start while a logo has keyboard focus. Reduce motion: no movement, the logos sit in centred rows.
 * Sizes come from the shortcode as --abd-w/h (desktop), -wt/-ht (tablet), -wm/-hm (phone). */
.abd-clients {
  --abd-gap: 72px;
  --abd-row: 72px;
  --abd-fade: 7%;
  position: relative;
}
.abd-clients__mq {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--abd-fade), #000 calc(100% - var(--abd-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--abd-fade), #000 calc(100% - var(--abd-fade)), transparent 100%);
}
.abd-clients__track {
  display: flex;
  width: max-content;
  animation: abd-clients-l var(--abd-dur, 40s) linear infinite;
  will-change: transform;
}
html[dir="rtl"] .abd-clients__track { animation-name: abd-clients-r; }
@keyframes abd-clients-l { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes abd-clients-r { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(50%, 0, 0); } }
.abd-clients__mq:hover .abd-clients__track,
.abd-clients.is-paused .abd-clients__track { animation-play-state: paused; }
/* keyboard: the strip waits at its start so the focused logo can be scrolled into view (client-marquee.js resets it) */
.abd-clients__mq:has(.abd-clients__link:focus-visible) .abd-clients__track { animation: none; }

.abd-clients .abd-clients__set {
  display: flex;
  align-items: center;
  gap: var(--abd-gap);
  margin: 0;
  padding: 0 calc(var(--abd-gap) / 2);
  list-style: none;
}
.abd-clients .abd-clients__item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--abd-row);
  margin: 0;
  padding: 0;
}
.abd-clients .abd-clients__item::marker { content: none; }
.abd-clients .abd-clients__logo {
  display: block;
  width: var(--abd-w);
  height: var(--abd-h);
  max-width: none;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .6;
  transition: filter .35s ease, opacity .35s ease;
}
.abd-clients .abd-clients__item:hover .abd-clients__logo,
.abd-clients .abd-clients__link:focus-visible .abd-clients__logo { filter: none; opacity: 1; }
.abd-clients .abd-clients__link { display: block; border-radius: 2px; }
.abd-clients .abd-clients__link:focus-visible { outline: 2px solid #BB8100; outline-offset: 6px; }
.abd-clients__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* pause / play: in the faded end of the strip (outside the mask, which would fade it too) */
.abd-clients button.abd-clients__toggle {
  position: absolute;
  top: 50%;
  inset-inline-end: 12px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 50%;
  background: #fff;
  color: #6b6b6b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.abd-clients button.abd-clients__toggle[hidden] { display: none; }
.abd-clients button.abd-clients__toggle:hover,
.abd-clients button.abd-clients__toggle:focus { background: #fff; color: #BB8100; border-color: #BB8100; }
.abd-clients button.abd-clients__toggle:focus-visible { outline: 2px solid #BB8100; outline-offset: 3px; }
.abd-clients .abd-clients__icon { display: block; }
.abd-clients .abd-clients__icon--play,
.abd-clients button.abd-clients__toggle[aria-pressed="true"] .abd-clients__icon--pause { display: none; }
.abd-clients button.abd-clients__toggle[aria-pressed="true"] .abd-clients__icon--play { display: block; }

@media (max-width: 1024px) {
  .abd-clients { --abd-gap: 56px; --abd-row: 64px; --abd-fade: 8%; }
  .abd-clients__track { animation-duration: var(--abd-dur-t, 34s); }
  .abd-clients .abd-clients__logo { width: var(--abd-wt); height: var(--abd-ht); }
}
@media (max-width: 767px) {
  .abd-clients { --abd-gap: 44px; --abd-row: 56px; --abd-fade: 10%; }
  .abd-clients__track { animation-duration: var(--abd-dur-m, 30s); }
  .abd-clients .abd-clients__logo { width: var(--abd-wm); height: var(--abd-hm); }
  .abd-clients button.abd-clients__toggle { inset-inline-end: 6px; width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .abd-clients__track,
  html[dir="rtl"] .abd-clients__track { animation: none; width: auto; justify-content: center; }
  .abd-clients .abd-clients__set { flex-wrap: wrap; justify-content: center; row-gap: 8px; max-width: 1200px; margin: 0 auto; }
  .abd-clients .abd-clients__set[aria-hidden="true"],
  .abd-clients .abd-clients__item[aria-hidden="true"] { display: none; }
  .abd-clients__mq { -webkit-mask-image: none; mask-image: none; }
  .abd-clients button.abd-clients__toggle { display: none; }
}