/* ==========================================================================
   Sezione 3 — Clienti / social proof (carpooling, Figma 667:9289)
   Banda chiara full-width: label "CHI CI HA SCELTO" + marquee loghi clienti.
   Marquee infinito via carousel.js (data-marquee + .marquee__inner clonato).
   ========================================================================== */

.clients {
  background: linear-gradient(to right, #fafafa 0%, #f4f4f4 100%);
  padding-block: 16px;
}

.clients__inner {
  display: flex;
  align-items: center;
  gap: 16px;
}

.clients__label {
  flex-shrink: 0;
  font-size: var(--fs-p20);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: var(--color-text);
  white-space: nowrap;
}

.clients__marquee {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
.clients__marquee:hover .marquee__inner { animation-play-state: paused; }

.clients__track { display: flex; align-items: center; flex-shrink: 0; }

.clients__logo {
  width: 163px;
  height: 82px;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: -28px;   /* sovrapposizione come da Figma (compensa il padding interno dei PNG) */
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 720px) {
  .clients__label { font-size: var(--fs-body); }
  .clients__logo { width: 120px; height: 60px; margin-right: -20px; }
  .clients__marquee {
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
    mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
}