/* Styles for the Trusted-By logo ticker (includes/trusted-by.php).
   Load with: <link rel="stylesheet" href="/css/trusted-by.css">
   Requires: --font-narrow, --light-gray CSS variables on :root.
   Animation: paired with /js/trusted-by.js */

.trusted-by {
  background: var(--light-gray);
  padding: 2rem 0 2.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(17,17,17,0.1);
}

.trusted-by-label {
  font-family: var(--font-narrow);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(17,17,17,0.45);
  margin-bottom: 2rem;
}

.ticker-scroll {
  overflow: clip;
  margin-bottom: 0.5rem;
  visibility: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.ticker-scroll.is-ready { visibility: visible; }
.ticker-scroll:last-of-type { margin-bottom: 0; }

.ticker-scroll-inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  white-space: nowrap;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
}

.ticker-scroll-inner img { height: 36px; width: auto; flex-shrink: 0; }
.ticker-scroll-inner img.logo-sm { height: 24px; }
.ticker-scroll-inner img.logo-xs { height: 20px; }
.ticker-scroll-inner img.logo-xxs { height: 16px; }

@media (max-width: 600px) {
  .ticker-scroll-inner { gap: 1.5rem; }
  .ticker-scroll-inner img { height: 28px; }
  .ticker-scroll-inner img.logo-sm { height: 20px; }
  .ticker-scroll-inner img.logo-xs { height: 16px; }
  .ticker-scroll-inner img.logo-xxs { height: 13px; }
}