/* ================================================================
   Sync Inn Digital — Client Logos / Brand Logos Section
   Three rows of client logos in continuous horizontal scroll.
   Rows 1 & 3 scroll left; row 2 scrolls right.
   Left/right fade overlay matches section background.

   Content managed globally in Appearance → Sync Inn Settings → Client Logos.
   No per-page fields — renders the same on every page.

   All colours use var(--sid-*) global CSS custom properties.
   ================================================================ */

/* ── Section wrapper — full bleed, no side padding ───────────── */

.sid-clients {
  background-color: var(--sid-light-grayish-blue-bg, #F5F6FA);
  width: 100%;
  padding: 110px 0;
}

/* ── Inner: only wraps the heading, keeps it centred ─────────── */

.sid-clients__inner {
  max-width: var(--sid-site-width, 1400px);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Section heading ─────────────────────────────────────────── */

.sid-clients__heading {
  font-family: 'Poppins', var(--sid-font-heading, sans-serif);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sid-black, #000000);
  text-align: center;
  margin: 0;
}

/* Highlighted portion (e.g. "350+") */
.sid-clients__heading-highlight {
  color: var(--sid-highlight-text-color, var(--sid-orange, #f97316));
}

/* ── Logo rows wrapper (full width, fade overlays here) ──────── */

/*
 * .sid-clients__rows sits directly inside .sid-clients (not .sid-clients__inner)
 * so it spans the full section width — no max-width cap.
 */
.sid-clients__rows {
  position: relative;
  overflow: hidden;
  margin-top: 60px;
}

/* Left fade — matches section background */
.sid-clients__rows::before,
.sid-clients__rows::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.sid-clients__rows::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--sid-light-grayish-blue-bg, #F5F6FA) 0%,
    transparent 100%
  );
}

.sid-clients__rows::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--sid-light-grayish-blue-bg, #F5F6FA) 0%,
    transparent 100%
  );
}

/* ── Individual row ──────────────────────────────────────────── */

/*
 * Each row is twice as wide as its logo list (logos rendered twice).
 * Left rows: translateX(0 → -50%)
 * Right row:  translateX(-50% → 0)
 */

.sid-clients__row {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  margin-bottom: 45px;
}

.sid-clients__row:last-child {
  margin-bottom: 0;
}

/* Pause on hover */
.sid-clients__row:hover {
  animation-play-state: paused;
}

/* Left-scrolling rows (1 & 3) */
.sid-clients__row--left {
  animation: sid-clients-left var(--sid-clients-speed, 30s) linear infinite;
}

/* Right-scrolling row (2) */
.sid-clients__row--right {
  animation: sid-clients-right var(--sid-clients-speed, 30s) linear infinite;
}

@keyframes sid-clients-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes sid-clients-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ── Individual logo ─────────────────────────────────────────── */

.sid-clients__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  flex-shrink: 0;
}

.sid-clients__logo img {
  max-height: 40px;
  max-width: 100px;
  width: auto;
  object-fit: contain;
  /* Subtle by default, full colour on hover */
  filter: grayscale(100%) opacity(0.6);
  transition: filter 0.3s ease;
}

.sid-clients__logo img:hover {
  filter: grayscale(0%) opacity(1);
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .sid-clients {
    padding: 80px 0;
  }
}

@media (max-width: 767px) {
  .sid-clients {
    padding: 60px 0;
  }

  .sid-clients__heading {
    font-size: 20px;
  }

  .sid-clients__rows {
    margin-top: 40px;
  }

  .sid-clients__rows::before,
  .sid-clients__rows::after {
    width: 60px;
  }

  /* Collapse to a single scrolling row — hide rows 2 and 3 */
  .sid-clients__row:nth-child(2),
  .sid-clients__row:nth-child(3) {
    display: none;
  }

  .sid-clients__row {
    margin-bottom: 0;
  }

  .sid-clients__logo {
    padding: 0 24px;
  }

  .sid-clients__logo img {
    max-height: 36px;
    max-width: 100px;
  }
}

@media (max-width: 479px) {
  .sid-clients {
    padding: 48px 0;
  }

  .sid-clients__heading {
    font-size: 18px;
  }

  .sid-clients__rows {
    margin-top: 32px;
  }

  .sid-clients__logo {
    padding: 0 16px;
  }

  .sid-clients__logo img {
    max-height: 28px;
    max-width: 80px;
  }
}