/* Pair cards — compact "related item" cards used wherever a page lists
   things that pair well with the current item. Used on app and solution
   detail pages ("Pairs well with"). Smaller and denser than .app-card.
   Pages link this file; do not re-inline. */

.pair-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.pair-card {
  background: white;
  border: 1px solid var(--c-cobalt-100);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-decoration: none; color: inherit;
  display: flex; gap: 14px; align-items: flex-start;
  transition: all 160ms ease;
}
.pair-card:hover { border-color: var(--c-blue-cobalt); transform: translateY(-1px); }

.pair-card .icon-wrap {
  width: 44px; height: 50px;
  clip-path: var(--hex-pointy-top);
  background: var(--c-blue-cobalt); color: white;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pair-card .icon-wrap svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; }

.pair-card .name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.pair-card .why { font-size: 13px; color: var(--c-cobalt-700); line-height: 1.5; }