/* =========================================================
   CloudSpark — Integrations page CSS (only for /integrations/)
   ========================================================= */

/* Hero */
.integrations-hero {
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* Filters bar */
.integrations-filters {
  padding-top: clamp(0.75rem, 2vw, 1rem);
}
.integrations-search .form-control {
  border-radius: 12px;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.filter-chips .chip {
  border: 1px solid var(--bs-border-color);
  background: var(--bs-surface-bg);
  color: var(--bs-body-color);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.filter-chips .chip:hover {
  transform: translateY(-1px);
}
.filter-chips .chip.active,
.filter-chips .chip[aria-pressed="true"] {
  background: rgba(var(--bs-primary-rgb), 0.12);
  border-color: color-mix(
    in srgb,
    var(--bs-border-color),
    var(--bs-primary) 35%
  );
  color: var(--bs-primary);
}

/* Grid & cards */
.integrations-grid {
}
.integration-card {
  display: block;
  background: var(--bs-surface-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 16px;
  padding: 0.9rem;
  text-decoration: none;
  color: var(--bs-body-color);
  height: 100%;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.integration-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(
    in srgb,
    var(--bs-border-color),
    var(--bs-primary) 35%
  );
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.integration-card .logo {
  width: 100%;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 0.5rem;
}
.integration-card .logo img {
  max-height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  opacity: 0.95;
  transition:
    filter 0.2s ease,
    opacity 0.2s ease;
}
.integration-card:hover .logo img {
  filter: none;
  opacity: 1;
}

/* Fallback logo block for items without an SVG */
.integration-card .logo-fallback {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(var(--bs-primary-rgb), 0.12);
  color: var(--bs-primary);
  font-weight: 800;
}

.integration-card .name {
  font-weight: 700;
}
.integration-card .cats {
  font-size: 0.8rem;
  color: var(--bs-gray-600);
}

/* Count text */
#intCount {
  opacity: 0.85;
}

/* Sticky header safety if we ever deep-link to categories */
.integrations-filters,
.integrations-grid {
  scroll-margin-top: calc(var(--nav-h) + 24px);
}