/* ==========================================================================
   Clienti (Portfolio, 25/10/2026). Identico fra it/ ed en/.

   I loghi sono maschere: il file da' solo la forma, il colore lo da' il tema
   (--text), quindi sono neri in chiaro e bianchi in scuro senza due file.
   Le dimensioni le calcola il template perche' ogni logo occupi la stessa
   area visiva: i loghi lunghi e bassi non schiacciano quelli alti.

   Tutti i clienti insieme, divisi per tipo: quelli con un progetto in corso
   pieni e col punto azzurro, quelli conclusi attenuati.
   ========================================================================== */

.clients { padding: 32px 0 88px; background: var(--bg, #FFFFFF); }
.clients-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.clients-head .eyebrow { justify-content: center; }
.clients-head .section-sub { margin: 14px auto 0; }

.clients-groups { border-top: 1px solid var(--line, rgba(10, 10, 10, .08)); }
/* Tutto dal centro (regola del 25/10/2026): l'etichetta del gruppo sta sopra
   le schede, non in una colonna a sinistra, e le schede si dispongono dal
   centro con larghezza fissa, anche nell'ultima riga incompleta. */
.clients-group { padding: 30px 0; border-bottom: 1px solid var(--line, rgba(10, 10, 10, .08)); }
.clients-label { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--fog); text-align: center; margin-bottom: 18px; }
.clients-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; list-style: none; margin: 0; padding: 0; }
.clients-logos > .client { flex: 0 1 270px; min-width: 0; }

/* Una scheda leggera per cliente. Quelle dei progetti in corso sono piene e
   hanno il punto azzurro che respira, lo stesso segnale "live" delle schede
   (cap. 05: si muove solo l'azzurro); quelle concluse sono attenuate. */
.client {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 20px 20px 18px; border: 1px solid var(--line, rgba(10, 10, 10, .08)); border-radius: 14px;
  background: var(--raise, #FFFFFF);
}
.client:not(.is-active) .client-mark, .client:not(.is-active) .client-tags { opacity: .5; transition: opacity .5s var(--ease-brand, ease); }
.client:not(.is-active):hover .client-mark, .client:not(.is-active):hover .client-tags { opacity: .9; }
/* il tag dello stato, in alto nella scheda: in corso col punto azzurro che
   respira (lo stesso segnale "live" delle schede), concluso in grigio */
.client-state {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  padding: 5px 8px; border-radius: 3px; background: var(--line, rgba(10, 10, 10, .08)); color: var(--fog);
}
.client.is-active .client-state { background: rgba(89, 152, 44, .14); color: var(--tag-live, #3F7519); }
.client.is-active .client-state::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--azure); box-shadow: 0 0 0 0 rgba(0, 174, 239, .45);
  animation: live-breath 3.75s var(--ease-brand, ease-in-out) infinite;
}
.client-mark { height: 56px; display: flex; align-items: center; }

.client-logo {
  display: block; flex-shrink: 0;
  background-color: var(--text, var(--ink));
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* chi non ha un logo: il nome composto, con la stessa presenza dei loghi */
.client-name { font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; color: var(--text, var(--ink)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* tag leggeri: il verticale per primo, col suo lettering, poi le piattaforme, in fondo i servizi */
.client-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.client-tags li {
  font-size: 11px; font-weight: 600; line-height: 1; color: var(--fog);
  padding: 5px 8px; border: 1px solid var(--line, rgba(10, 10, 10, .08)); border-radius: 999px;
}
.client-tags .client-vertical { color: var(--text, var(--ink)); padding: 4px 9px; display: inline-flex; align-items: center; }
.client-vertical .eu-lockup .eu-word { font-size: 11px; }
.client-vertical.v-bike { border-color: rgba(0, 174, 239, .45); }
.client-vertical.v-home { border-color: rgba(122, 31, 46, .45); }
.client-vertical.v-education { border-color: rgba(209, 65, 36, .45); }
.client-vertical.v-studio { border-color: rgba(224, 0, 122, .45); }
/* al passaggio la parola del verticale prende il suo colore canonico,
   sia nelle schede sia nei filtri; in scuro il bordeaux schiarisce per leggersi */
.client-vertical, .chip-vertical { --v-color: currentColor; }
.v-bike { --v-color: #00AEEF; }
.v-home { --v-color: #7A1F2E; }
.v-education { --v-color: #D14124; }
.v-studio { --v-color: var(--fuchsia); }
:root[data-theme="dark"] .v-home { --v-color: #D9667A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v-home { --v-color: #D9667A; } }
.client-vertical .eu-word, .chip-vertical .eu-word { transition: color .4s var(--ease-brand, ease); }
.client-vertical:hover .eu-word, .chip-vertical:hover .eu-word, .chip-vertical:focus-visible .eu-word { color: var(--v-color); }
.chip-vertical:hover { border-color: var(--v-color); }


/* --- stato e anni -------------------------------------------------------- */
.client-top { display: flex; align-items: center; gap: 10px; }
.client-years { font-size: 11px; font-weight: 600; color: var(--fog); font-variant-numeric: tabular-nums; }

/* il nome (o il logo) porta al sito: sottolineatura e luce solo al passaggio */
.client-link { display: inline-flex; color: inherit; text-decoration: none; }
.client-link .client-name { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding-bottom: 2px; transition: background-size .5s var(--ease-brand, ease); }
.client-link:hover .client-name, .client-link:focus-visible .client-name { background-size: 100% 2px; }
/* i loghi al passaggio si ingrandiscono appena, senza cambiare colore */
.client-logo { transform-origin: left center; transition: transform .5s var(--ease-brand, ease); }
.client-mark:hover .client-logo, .client-link:focus-visible .client-logo { transform: scale(1.08); }
.client-visit { align-self: flex-start; margin-top: auto; font-size: 13px; font-weight: 700; color: var(--azure); text-decoration: none; display: inline-flex; gap: 6px; }
/* la regola generica "li a:hover" sottolineerebbe tutto il link, freccia compresa */
.client a.client-visit:hover, .client a.client-visit:focus-visible, .client a.client-link:hover, .client a.client-link:focus-visible { text-decoration: none; }

/* piattaforme: nome in maiuscoletto, senza riquadro, per distinguerle dai servizi */
/* piattaforme: nell'ovale come il verticale, col wordmark del sito (nome
   pieno, prima lettera azzurra); quelle di terzi in testo semplice */
.client-tags .client-platform { color: var(--text, var(--ink)); border-color: var(--line-strong, rgba(10, 10, 10, .2)); padding: 4px 9px; display: inline-flex; align-items: center; }
.pf-mark { font-weight: 900; letter-spacing: -.01em; white-space: nowrap; }
.pf-mark .h-accent { color: var(--azure); }
.pf-third { font-weight: 700; white-space: nowrap; }

/* --- testo di crescita e numeri ----------------------------------------- */
.clients-intro { font-size: 16px; color: var(--fog); line-height: 1.7; margin: 14px auto 0; max-width: 760px; }
.clients-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; list-style: none; margin: 0 0 40px; padding: 0;
  border: 1px solid var(--line, rgba(10, 10, 10, .08)); border-radius: 14px; overflow: hidden; background: var(--line, rgba(10, 10, 10, .08)); }
.clients-stats li { background: var(--bg, #FFFFFF); padding: 22px 20px; display: grid; gap: 6px; align-content: start; justify-items: center; text-align: center; }
.stat-value { font-size: clamp(30px, 3.6vw, 44px); font-weight: 900; letter-spacing: -.03em; line-height: 1; color: var(--text, var(--ink)); font-variant-numeric: tabular-nums; }
.stat-label { font-size: 13px; color: var(--fog); line-height: 1.45; }
/* al passaggio: il numero diventa fucsia e una linea fucsia cresce dal centro;
   la nuvola di punti segue il mouse (canvas creato dallo script) */
.stat-cloud { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: inherit; }
/* nelle schede dei clienti la stessa nuvola, in azzurro, sotto i contenuti */
.client > :not(.stat-cloud) { position: relative; }
.clients-stats .stat-value, .clients-stats .stat-label { position: relative; }
.clients-stats li { position: relative; transition: background-color .5s var(--ease-brand, ease); }
.clients-stats li::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--fuchsia);
  transform: scaleX(0); transform-origin: center; transition: transform .6s var(--ease-brand, ease); }
.stat-value { transition: color .5s var(--ease-brand, ease), transform .5s var(--ease-brand, ease); transform-origin: center bottom; }
.clients-stats li:hover::after { transform: scaleX(1); }
.clients-stats li:hover .stat-value { color: var(--fuchsia); transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .clients-stats li::after, .stat-value { transition: none; }
  .clients-stats li:hover .stat-value { transform: none; }
  .client-logo { transition: none; }
  .client-mark:hover .client-logo { transform: none; }
}

/* --- filtri --------------------------------------------------------------- */
.clients-filters { display: grid; gap: 14px; margin: 0 0 28px; }
/* ogni gruppo di filtri: titolo sopra, bottoni sotto; un filetto li separa */
.filter-row + .filter-row { border-top: 1px solid var(--line, rgba(10, 10, 10, .08)); padding-top: 14px; }
.clients-filters[hidden] { display: none; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.filter-label { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--fog); flex-basis: 100%; margin-bottom: 2px; text-align: center; }
.chip { font: inherit; font-size: 12px; font-weight: 700; color: var(--text, var(--ink)); background: transparent; cursor: pointer;
  border: 1px solid var(--line-strong, rgba(10, 10, 10, .2)); border-radius: 999px; padding: 6px 12px; display: inline-flex; align-items: center; }
.chip:hover { border-color: var(--text, var(--ink)); }
.chip[aria-pressed="true"] { background: var(--text, var(--ink)); color: var(--bg, #FFFFFF); border-color: var(--text, var(--ink)); }
.chip[aria-pressed="true"] .eu-mark { filter: invert(1); }
:root[data-theme="dark"] .chip[aria-pressed="true"] .eu-mark { filter: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip[aria-pressed="true"] .eu-mark { filter: none; } }
.chip .eu-lockup .eu-word { font-size: 12px; }
.clients-group[hidden], .client[hidden] { display: none; }
.clients-empty { text-align: center; color: var(--fog); padding: 32px 0; }

@media (max-width: 720px) { .clients-stats { grid-template-columns: 1fr; } }

@media (max-width: 720px) {
  .clients-group { padding: 24px 0; }
}
@media (max-width: 640px) {
  .clients-logos > .client { flex-basis: 100%; }
}
@media (forced-colors: active) {
  .client-logo { background-color: CanvasText; }
  .client .client-mark, .client .client-tags { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .client.is-active .client-state::before { animation: none; }
}