/* ==========================================================================
   CLIENT LOGO WALL
   Sits directly under the hero as the first credibility beat. No per-logo
   card chrome - a single quiet grid of monochrome marks that come up to full
   strength on hover. One panel, not sixteen boxes.
   ========================================================================== */

section.client-logos-section.container-custom {
  /* Ticker band, not a full section - reply on comment [o]: "thinner...
     more like a ticker you see on some of the other marketing sites".
     main.css carries a catch-all `.wp-block-group[class*="section"]` rule
     that also sets this padding at equal (0,0,2,0) specificity and wins on
     source order - the added type selector here breaks the tie. */
  padding: var(--space-xl) var(--space-md);
  background: var(--color-base);
}

.client-logos-section .section-title {
  /* Small, quiet - this is a trust strip, not a headline moment */
  font-size: var(--font-size-lg);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-text-tertiary);
  max-width: none;
  text-align: center;
  margin: 0 auto var(--space-lg);
}

/* Auto-scrolling logo ticker (comment [n]/[o]: "Carousel?"). Two identical
   tracks sit side by side in one flex row; animating the row exactly -100%
   of one track's width loops seamlessly with no jump. */
.logos-marquee {
  overflow: hidden;
  width: 100%;
  display: flex;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 6%,
    black 94%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 6%,
    black 94%,
    transparent
  );
}

.logos-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-xl);
  padding-right: var(--space-xl);
  animation: logos-scroll 34s linear infinite;
}

.logos-marquee:hover .logos-track {
  animation-play-state: paused;
}

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

@media (prefers-reduced-motion: reduce) {
  .logos-track {
    animation: none;
  }
  .logos-marquee {
    overflow-x: auto;
  }
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: none;
  border: 0;
  min-height: 56px;
  flex-shrink: 0;
}

img.client-logo {
  max-width: 100%;
  height: auto;
  max-height: 90px;
  width: auto;
  margin: 0;
  object-fit: contain;
  /* Normalise the mixed bag of white-on-transparent and full-colour PNGs to
     one flat ink tone. Sits in a moving ticker now (not a static grid), so
     the resting state has to read clearly on its own - nobody hovers a
     scrolling logo - rather than depending on a hover state to brighten. */
  filter: grayscale(1) brightness(0) invert(0.28);
  opacity: 0.92;
  transition:
    filter var(--transition-base),
    opacity var(--transition-base);
}

.logo-item:hover img.client-logo {
  filter: grayscale(1) brightness(0) invert(0.15);
  opacity: 1;
}

.client-logos-section .wp-block-buttons {
  margin-top: var(--space-2xl);
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .logos-track {
    gap: var(--space-lg);
    animation-duration: 26s;
  }

  .logo-item {
    min-height: 44px;
    padding: var(--space-sm);
  }
}

/* Paused while scrolled out of view (class toggled in animations.js) */
.logos-marquee.is-offscreen .logos-track {
  animation-play-state: paused;
}