/* integrations.css — Integrations logo cloud */

.integrations__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 480px) {
  .integrations__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .integrations__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ─── Logo card ─── */

.integrations__logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  transition: border-color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.integrations__logo-card:hover {
  border-color: rgba(22, 163, 74, 0.3);
  background: var(--color-primary-dim);
  color: var(--color-text);
  transform: translateY(-3px);
}

.integrations__logo-card--more {
  border-style: dashed;
}

.integrations__more-dots {
  font-size: var(--text-2xl);
  color: var(--color-text-subtle);
  letter-spacing: 4px;
  line-height: 1;
}

/* ─── CTA ─── */

.integrations__cta {
  text-align: center;
  margin-top: var(--space-10);
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.integrations__cta-link {
  color: var(--color-primary-hover);
  font-weight: var(--font-medium);
  transition: color var(--duration-fast);
}

.integrations__cta-link:hover {
  color: var(--color-accent);
}