/* The integration card.

   Shared by the directory page, which grids sixty of them, and by every
   combination page, which shows six under "Related integrations". It lives in
   its own file because those pages load different stylesheets and the card
   has to look identical on all of them.

   Colours used to be literal here, on the grounds that not every page loaded
   the token file. That is no longer true — every page links theme.css first —
   so the literals are gone and a reskin reaches the card like everything else.

   Every card is a real <a>. Nothing here depends on JavaScript. */

.tile-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid #ece7fb;
  padding: 5px;
  transition: border-color .14s ease;
}
.tile-sm .app-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-4);
}

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: var(--sp-6);
  color: inherit;
  box-shadow: 0 10px 28px rgba(91, 47, 224, .06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 18px 40px rgba(91, 47, 224, .16);
}

/* Every pair on these pages is supported, so the cards carry no status
   badge — the head is just the two apps and the arrow between them, closed
   off with a rule so the summary below it reads as its own block. */
.card-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line-soft);
}
.card-link-icon { color: #b9a5f2; font-size: var(--fs-md); }

.card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  line-height: var(--lh-heading);
}
.card-title span { color: var(--brand); margin: 0 2px; }

.card-sub { font-size: var(--fs-base); color: var(--body); line-height: 1.55; flex: 1; }
.card-cta {
  margin-top: auto;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--brand);
}
.card-cta span { display: inline-block; transition: transform .16s ease; }
.card:hover .card-cta span { transform: translateX(4px); }
.card:hover .tile-sm { border-color: #d9cbfa; }

/* 300px plus the page gutters overflows a 320px screen, so the track floor
   comes down before it can. */
@media (max-width: 480px) {
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
  .card { padding: var(--sp-5); }
  .card-title { font-size: 15.5px; }
}