/*
 * Clients page
 *
 * Developed by: Rhyll Neri
 */

.clients-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-8);
}

.clients-filter__btn {
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--color-mist);
  color: var(--color-ink);
  border: 1px solid transparent;
  font-size: var(--fs-13, 0.8125rem);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--dur-200), color var(--dur-200), border-color var(--dur-200);
}

.clients-filter__btn:hover { background: var(--color-primary-50); color: var(--color-primary); }
.clients-filter__btn.is-active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}

@media (max-width: 1024px) { .clients-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .clients-grid { grid-template-columns: repeat(2, 1fr); } }

.clients-cta {
  margin-top: var(--space-9);
  background: var(--color-mist);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  text-align: center;
}

.clients-cta h3 { margin-bottom: var(--space-3); }
.clients-cta p { color: var(--color-text-muted); margin-bottom: var(--space-5); }