/* ============================================================
 * ESSIKNETWORK — Widget Logos Clients (grille / slider / marquee).
 * Variables : essik-design-tokens.css. Dark mode auto.
 * ============================================================ */
.essik-logos-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.essik-logo-item {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 1.25rem; min-height: 5.5rem;
  background: #fff; border: 1px solid var(--essik-border); border-radius: var(--essik-radius-sm);
  transition: border-color var(--essik-speed) var(--essik-ease), box-shadow var(--essik-speed) var(--essik-ease);
}
a:hover > .essik-logo-item, .essik-logo-item:hover { border-color: var(--essik-primary); box-shadow: var(--essik-shadow-card); }
.essik-logo-item img { display: block; max-width: 100%; max-height: 3.5rem; width: auto; height: auto; object-fit: contain; transition: filter var(--essik-speed) var(--essik-ease), opacity var(--essik-speed) var(--essik-ease); }
.essik-logo-item img.essik-logo-gray { filter: grayscale(1); }
.essik-logo-item:hover img.essik-logo-gray, a:hover .essik-logo-item img.essik-logo-gray { filter: grayscale(0); opacity: 1 !important; }
.essik-logos-slider .essik-logo-item { width: 100%; }
.essik-logos-marquee .essik-logo-item { flex: none; }
html[data-theme="dark"] .essik-logo-item { background: #151A24; border-color: #1F2633; }
@media (max-width: 1024px) { .essik-logos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .essik-logos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }