.elementor-element.elementor-widget-vn-clients-home { margin-block-end: 0 !important; }

.vn-clients-home {
  --vn-clients-surface: #fff;
  --vn-clients-title: #0b0b0b;
  --vn-clients-intro: #0b0b0b;
  --vn-clients-accent: #f20046;
  --vn-clients-brand-height: 100px;
  width: 100%;
  padding: 130px 0;
  overflow: hidden;
  color: var(--vn-clients-title);
  background: var(--vn-clients-surface);
  font-family: "Futura PT", Arial, Helvetica, sans-serif;
}

.vn-clients-home__inner { width: min(calc(100% - 200px), var(--vn-page-container-width, 1000px)); margin-inline: auto; }

.vn-clients-home__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 557px);
  gap: 48px;
  align-items: start;
  margin-bottom: 86px;
}

.vn-clients-home h2 {
  margin: 0;
  color: var(--vn-clients-title);
  font-family: "Futura PT", Arial, Helvetica, sans-serif;
  font-size: 60px;
  font-weight: 500;
  line-height: 90%;
  letter-spacing: -1.6px;
  text-align: left;
}

.vn-clients-home__title-spacer { display: block; }

.vn-clients-home__intro {
  width: min(557px, 100%);
  margin: 0;
  color: var(--vn-clients-intro);
  font-family: "Futura PT", Arial, Helvetica, sans-serif;
  font-size: 38px;
  font-weight: 700;
  font-style: normal;
  line-height: 85%;
  letter-spacing: -.76px;
  text-align: right;
}

.vn-clients-home__intro-dot {
  display: inline-block;
  width: 9px;
  height: 8px;
  margin-left: .08em;
  color: var(--vn-clients-accent);
  vertical-align: baseline;
}

.vn-clients-home__intro-dot svg { display: block; width: 100%; height: 100%; }

.vn-clients-home__dot { display: inline-flex; width: 10px; margin-left: 5px; color: var(--vn-clients-accent); vertical-align: .08em; }
.vn-clients-home__dot svg { display: block; width: 10px; height: 8px; }

.vn-clients-home__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 44px 18px;
}

.vn-client-item { min-width: 0; }
.vn-client-item__link { display: flex; height: 142px; align-items: center; justify-content: center; padding: 12px; }
.vn-client-item__media { display: flex; width: 100%; height: var(--vn-client-logo-height, var(--vn-clients-brand-height)); align-items: center; justify-content: center; transform: translateY(var(--vn-client-logo-offset, 0px)); }
.vn-client-item__media img { display: block; max-width: 100%; width: auto; height: 100%; object-fit: contain; filter: grayscale(1); opacity: 1; transition: filter .36s ease, opacity .36s ease, transform .42s cubic-bezier(.2,.8,.2,1); }
.vn-client-item__media img[src*="MAYBE_YOU.svg"] { filter: none; }
.vn-client-item__link { position: relative; text-decoration: none; }
.vn-client-item__link::after { position: absolute; bottom: 5px; left: 50%; width: 0; height: 1px; background: var(--vn-clients-accent); content: ""; transform: translateX(-50%); transition: width .34s cubic-bezier(.2,.8,.2,1); }
.vn-clients-home__grid:has(.vn-client-item__link:hover) .vn-client-item__link:not(:hover) img { opacity: .22; transform: scale(.94); }
.vn-client-item:hover .vn-client-item__media img,
.vn-client-item:focus-within .vn-client-item__media img,
.vn-client-item__link:hover .vn-client-item__media img,
.vn-client-item__link:focus-visible .vn-client-item__media img {
  -webkit-filter: brightness(0) saturate(100%) !important;
  filter: brightness(0) saturate(100%) !important;
  opacity: 1;
  transform: translateY(-4px) scale(1.08);
}
/* Globus è già bianco su fondo nero: non applicare brightness(0), altrimenti
   le lettere bianche diventano nere e resta un rettangolo pieno. */
.vn-client-item:hover .vn-client-item__media img[src*="globus" i],
.vn-client-item:focus-within .vn-client-item__media img[src*="globus" i],
.vn-client-item__link:hover .vn-client-item__media img[src*="globus" i],
.vn-client-item__link:focus-visible .vn-client-item__media img[src*="globus" i],
.vn-client-item:hover .vn-client-item__media img[alt*="globus" i],
.vn-client-item:focus-within .vn-client-item__media img[alt*="globus" i],
.vn-client-item__link:hover .vn-client-item__media img[alt*="globus" i],
.vn-client-item__link:focus-visible .vn-client-item__media img[alt*="globus" i] {
  -webkit-filter: none !important;
  filter: none !important;
}
.vn-client-item__link:hover::after, .vn-client-item__link:focus-visible::after { width: 34px; }

@media (max-width: 1024px) {
  .vn-clients-home { padding-inline: 68px; }
  .vn-clients-home__inner { width: min(633px, 100%); }
  .vn-clients-home__top { grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 32px; margin-bottom: 68px; }
  .vn-clients-home__intro { width: 100%; font-size: 38px; }
  .vn-clients-home h2 { font-size: 60px; }
  .vn-clients-home__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 16px; }
  .vn-client-item__link { height: 126px; padding: 12px; }
  .vn-client-item__media {
    height: var(--vn-client-logo-height-tablet, var(--vn-client-logo-height, var(--vn-clients-brand-height)));
    transform: translateY(var(--vn-client-logo-offset-tablet, var(--vn-client-logo-offset, 0px)));
  }
}

/* Sotto questa larghezza il titolo passa sopra al testo, mantenendo il bordo
   destro e l'allineamento del layout Figma. */
@media (max-width: 720px) and (min-width: 601px) {
  .vn-clients-home { padding-inline: 24px; }
  .vn-clients-home__top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .vn-clients-home__title-spacer { display: none; }
  .vn-clients-home h2 { width: min(420px, 100%); margin-left: auto; text-align: right; }
  .vn-clients-home__intro { width: 100%; margin-left: auto; text-align: right; }
}

@media (max-width: 600px) {
  .vn-clients-home { padding-inline: 16px; }
  .vn-clients-home__inner { width: min(323px, 100%); }
  .vn-clients-home__top { display: block; margin-bottom: 52px; }
  .vn-clients-home__title-spacer { display: none; }
  .vn-clients-home__top h2 { width: min(300px, 100%); margin: 0 0 28px auto; font-size: 52px; letter-spacing: -1.6px; text-align: right; }
  .vn-clients-home__intro {
    width: min(300px, 100%);
    margin-left: auto;
    font-size: 45px;
    letter-spacing: -1.8px;
    text-align: right;
  }
  .vn-clients-home__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vn-clients-home__grid { gap: 26px 18px; }
  .vn-client-item__link { height: 112px; padding: 12px; }
  .vn-client-item__media {
    height: var(--vn-client-logo-height-mobile, var(--vn-client-logo-height-tablet, var(--vn-client-logo-height, var(--vn-clients-brand-height))));
    transform: translateY(var(--vn-client-logo-offset-mobile, var(--vn-client-logo-offset-tablet, var(--vn-client-logo-offset, 0px))));
  }
}

@media (prefers-reduced-motion: reduce) {
  .vn-client-item__media img, a.vn-client-item__link::after { transition: none; }
}
