/* Logos grid */
.logos-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  align-items: center;
  justify-items: center;
  padding: 1rem 0 2rem;
}

/* Individual logo item */
.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-color);
  width: 100%;
  max-width: 180px;
  height: 120px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  padding: 0.75rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
  color: inherit;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

/* Logo image */
.logo-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  filter: none;
}

/* Hover / focus */
.logo-item:hover,
.logo-item:focus {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  outline: none;
}

/* accessible focus ring */
.logo-item:focus-visible {
  box-shadow: 0 10px 30px rgba(0,0,0,0.12), 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 70%);
}

/* Visually-hidden text for screen readers */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Responsive tweaks */
@media (max-width: 575px) {
  .logo-item {
    height: 88px;
    max-width: 140px;
  }
  .logos-grid {
    gap: 0.75rem;
  }
}

.bold {
    font-weight: 700;
}