/* ═════════════════════════════════════
   CLIENTI E COLLABORAZIONI
   Spostata da chi-siamo alla homepage.
   Le varianti mobile restano in responsive.css.
═════════════════════════════════════ */

.clienti-section {
  background: var(--accent);
  /* Come la sezione numeri: il nastro arriva ai bordi, quindi niente
     padding orizzontale; il rientro ce l'ha solo il titolo. */
  padding: 80px 0;
}

.clienti-title {
  font-family: 'Inter', sans-serif;
  font-size: var(--t-didascalia);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dark);
  margin: 0 40px 64px;
  text-align: center;
}

/* Ogni logo e' una cella di larghezza fissa: i nove SVG hanno proporzioni
   molto diverse (da 93.8x9.6 a 49.7x49.7) e lasciandoli liberi il passo
   del nastro sarebbe irregolare. Larghezza uguale per tutti, logo centrato
   dentro, e il ritmo resta costante. Il margine destro e' anche lo stacco
   fra una copia e la successiva. */
.clienti-item {
  flex: none;
  width: 200px;
  margin-right: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Il logo e' cliccabile: il link non deve alterare la griglia,
   e in hover il logo si schiarisce leggermente. */
.clienti-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  transition: opacity .25s ease;
}

.clienti-item a:hover,
.clienti-item a:focus-visible {
  opacity: .6;
}

.clienti-item img {
  width: auto;
  max-width: 100%;
  object-fit: contain;   /* se la colonna e' stretta rimpicciolisce senza deformare */
  display: block;
  filter: brightness(0); /* loghi in nero sullo sfondo verde */
}

/* ── Altezza dei loghi ──
   Ogni marchio va calibrato a occhio: gli SVG sono ritagliati a filo
   dell'inchiostro, quindi questa altezza e' l'altezza vera delle
   lettere, e un logo tutto maiuscolo a 34px pesa come uno minuscolo a
   28. Nel sito statico erano nove regole nth-child, una per posizione
   nel nastro; qui l'ordine dei clienti lo decide chi scrive in bacheca,
   e bastava spostarne uno perche' tutti gli altri ereditassero
   l'altezza del vicino. Ora ogni cliente si porta dietro la sua, nel
   campo "Altezza del logo", e il tema la scrive sull'immagine.
   Questo valore vale solo quando quel campo e' vuoto. */
.clienti-item img { height: 34px; }