/*
 * Clients marquee.
 *
 * Every measurement comes from the prototype's clients strip: 40px block
 * padding between two hairlines, a centred 11px mono label, and a 168x56 cell
 * repeated behind an edge-faded window. The prototype's container queries are
 * media queries here, and the offsets are logical so the Hebrew RTL build
 * needs no second stylesheet.
 */

.ad-clients {
  padding: 40px var(--ad-space-page);
  border-top: 1px solid var(--ad-color-hairline);
  border-bottom: 1px solid var(--ad-color-hairline);
}

/*
 * The prototype set this label in #5B6470, which measures 3.32:1 on the page
 * ground and fails SC 1.4.3 for 11px text. --ad-color-text-meta is the tested
 * replacement at 4.54:1.
 */
.ad-clients__label {
  margin-bottom: 24px;
  font-family: var(--ad-font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-align: center;
  color: var(--ad-color-text-meta);
}

/* ------------------------------------------------------------- the window */

.ad-clients__window {
  overflow: hidden;
  /*
   * #000 here is an alpha stop for the mask, not a design colour, which is
   * the same use hero.css makes of it. The -webkit- prefix is required or
   * Safari drops the mask entirely and both edges land hard.
   */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ad-clients__track {
  display: flex;
  width: max-content;
  animation: ad-ticker var(--ad-clients-duration, 32s) linear infinite;
}

@keyframes ad-ticker {
  to { transform: translateX(-50%); }
}

/*
 * RTL lays the flex track out from the right, so the same -50% would slide it
 * away from its start point and open a growing gap on the leading edge. The
 * audit logged this as a visible RTL breakage, not a nicety.
 */
[dir="rtl"] .ad-clients__track { animation-name: ad-ticker-rtl; }

@keyframes ad-ticker-rtl {
  to { transform: translateX(50%); }
}

.ad-clients__set { display: flex; }

/* --------------------------------------------------------------- the cell */

/*
 * The 12px gutter is a margin on the cell, not `gap` on the track. A track of
 * 2N cells joined by gaps carries 2N-1 gutters, so translateX(-50%) lands
 * half a gutter short and the loop jumps 6px every cycle. As a margin each
 * cell owns its own gutter, the two halves are exactly equal, and the one
 * trailing gutter falls outside the masked window where nothing can see it.
 */
.ad-clients__cell {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ad-size-logo-cell-w);
  height: var(--ad-size-logo-cell-h);
  margin-inline-end: 12px;
  padding-block: 8px;
  padding-inline: 13px;
  border: 1px solid var(--ad-color-hairline);
}

/*
 * Logo artwork is white on transparency per the schema help text, so it sits
 * far above the 3:1 that SC 1.4.11 asks of a meaningful graphic and the
 * hairline cell border stays decorative. max-height keeps a tall logo inside
 * the 56px cell; width and height stay auto so the aspect ratio holds.
 */
/*
 * The artwork is trimmed to its ink bounds, so it can fill the cell instead
 * of floating in it. The originals carried 54 to 83 percent transparent
 * padding baked into a 255x138 canvas with the ink off-centre by up to 7px,
 * which is why every logo used to render a different size at a different
 * height. object-fit keeps aspect ratio for artwork ranging from 92x97 to
 * 620x96.
 */
/*
 * act_picture wraps the img in a <picture>, so the <picture> was the flex item
 * and the img inside it stayed display:inline. An inline image sits on the
 * text baseline, which leaves descender space underneath it: the picture
 * measured 40.3px around a 32px logo, and because the img is at the top of
 * that box every logo rendered 4.2px above the centre of its cell.
 *
 * display:contents drops the wrapper box so the img is the flex item itself.
 * align-items:center then centres the artwork rather than the artwork plus a
 * gap, and max-height below finally resolves against the cell rather than
 * against a picture whose height the img was defining in the first place.
 */
.ad-clients__cell picture {
  display: contents;
}

.ad-clients__logo {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* --------------------------------------------------------------- motion */

/*
 * SC 2.2.2, part one. A pointer user who has not set an OS preference cannot
 * reach the site's focus-only motion toggle, so holding the pointer over the
 * strip stops it. focus-within is there for the day a logo becomes a link.
 */
.ad-clients__window:hover .ad-clients__track,
.ad-clients__window:focus-within .ad-clients__track {
  animation-play-state: paused;
}

/*
 * SC 2.2.2, part two. Stopping the ticker on its own would strand every logo
 * past the window edge, so the strip also stops being a single line: the
 * track wraps, the mask comes off, and the aria-hidden duplicate is removed.
 * Every client is then on screen at once, static.
 */
@media (prefers-reduced-motion: reduce) {
  .ad-clients__window {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ad-clients__track {
    width: 100%;
    animation: none;
  }

  /*
   * The cell's trailing margin is what keeps the two ticker halves exactly
   * equal. Once the strip is a wrapped static block that margin sits on the
   * last cell of every row and pushes each centred row 6px off centre, so
   * the gutter goes back to being a gap here.
   */
  .ad-clients__cell { margin-inline-end: 0; }

  .ad-clients__set {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .ad-clients__set[aria-hidden="true"] { display: none; }
}

/* Same treatment when the visitor has asked for motion to stop. */
[data-ad-motion="off"] .ad-clients__window {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

[data-ad-motion="off"] .ad-clients__track {
  width: 100%;
  animation: none;
}

/* Same reason as the reduced-motion block: no trailing margin off centre. */
[data-ad-motion="off"] .ad-clients__cell { margin-inline-end: 0; }

[data-ad-motion="off"] .ad-clients__set {
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

[data-ad-motion="off"] .ad-clients__set[aria-hidden="true"] { display: none; }

/* ---------------------------------------------------------- responsive */

/*
 * The prototype changes nothing at 1100px here. At 640px only the page
 * padding narrows: the cell, the gutter, the tempo and the edge mask are the
 * same at every width.
 */
@media (max-width: 640px) {
  .ad-clients { padding-inline: var(--ad-space-page-mobile); }
}