/* integrations (views/site/pages/integrations.php); classes prefixed ig- because site.css has a home page .int */
.ig-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.ig-filters button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 14px var(--body); cursor: pointer; }
.ig-filters button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ig-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ig-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.ig-item[hidden] { display: none; }
.ig-logo { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; font: 700 15px var(--display); color: #0E1116; }
.ig-logo img { width: 30px; height: 30px; object-fit: contain; }
.ig-item b { display: block; font-weight: 600; }
.ig-item span { display: block; color: var(--ink-muted); font-size: 14px; }
.ig-item small { display: block; margin-top: 8px; font: 600 11px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
@media (max-width: 960px) { .ig-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ig-list { grid-template-columns: 1fr; } }