/* Client logo strip — a continuously scrolling marquee.
   Shared by the Partnership page and the home page, so it lives in
   components/ rather than either page stylesheet. */

/* ------------------------------------------------------- Logo marquee ---
   Two identical tracks side by side, the pair translated by exactly half its
   width. When the animation restarts, copy two sits precisely where copy one
   began, so the loop has no seam. The duplicate is aria-hidden in the markup —
   without that a screen reader reads every client name twice. */

.pt-logos {
  background: var(--bg);
  padding-block: var(--space-6);
  border-block-end: 1px solid var(--line);
}

.pl-viewport {
  display: flex;
  inline-size: 100%;
  overflow: hidden;
  /* Fade the strip out at both edges so logos enter and leave rather than
     being sliced off by the viewport. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.pl-track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-7);
  margin: 0;
  padding-inline-end: var(--space-7);
  list-style: none;
  animation: pl-scroll 48s linear infinite;
}

/* Always leftward, in both directions. The strip is a conveyor of logos, not
   running text — reversing it in Arabic would make the two language versions
   disagree about which client comes first. */
@keyframes pl-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

[dir='rtl'] .pl-track { animation-name: pl-scroll-rtl; }

@keyframes pl-scroll-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

.pl-item {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.pl-item img {
  /* Scaled to the height the DESIGN gives this logo (--cap, either 64 or 35 in
     its 64px band), not to one shared height. --pl-band is the rendered size of
     that band, so the whole strip resizes from a single value. */
  --pl-band: 3.6rem;
  block-size: calc(var(--pl-band) * var(--cap, 64) / 64);
  inline-size: auto;
  max-inline-size: none;
  object-fit: contain;
  display: block;
}

@media (max-width: 48rem) {
  .pl-item img { --pl-band: 2.8rem; }
  .pl-track { gap: var(--space-6); padding-inline-end: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  /* The strip stops — but it must not become a horizontal scroller.
     `overflow-x: auto` put a real scrollbar under the logos, which reads as a
     broken component rather than a design, and the edge mask made it ambiguous
     where the row ended. It also meant anyone with Reduce Motion on saw no
     marquee at all AND had to drag to reach half the clients.
     A wrapping, centred row instead: every logo visible at once, no motion,
     nothing to scroll. */
  .pl-viewport {
    display: block;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .pl-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-5);
    padding-inline-end: 0;
  }
  /* Show each client once, not the four belt copies. */
  .pl-viewport > [aria-hidden='true'],
  .pl-item[aria-hidden='true'] { display: none; }
}