/* Template sections: Integrations variants (template-sections/integrations.html). V1 is the homepage section (css/sections/integrations.css).
   .ts-int is an integration logo tile image; filters use [data-filter-group] from js/main.js. */
.ts-int-s p { color: var(--text-medium); }
.ts-int { flex: none; max-width: none; width: 40px; height: 40px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--border-thin); object-fit: contain; }
.ts-int__tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--btn-dark); color: var(--text-negative); }

/* V2 filterable grid */
.ts-int__filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: var(--space-6) 0 var(--space-6); }
.ts-int__filters .tabs__btn { flex: none; }
.ts-int__grid { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.ts-int__card { display: grid; grid-template-columns: auto 1fr; align-content: start; gap: var(--space-4); }
.ts-int__card p { margin-top: var(--space-1); font-size: var(--para-sm-size); }
.ts-int__cat { grid-column: 2; justify-self: start; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--base-medium); font-size: 12px; color: var(--text-medium); }
.ts-int__card[hidden] { display: none; }
@media (min-width: 640px) { .ts-int__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ts-int__grid { grid-template-columns: repeat(3, 1fr); } }

/* V3 flow diagram */
.ts-int__cols-wrap { display: grid; gap: var(--space-12); align-items: center; }
.ts-int__hubcopy { display: grid; gap: var(--space-5); justify-items: start; }
.ts-int__flow { display: grid; justify-items: center; gap: 0; }
.ts-int__side { display: grid; gap: var(--space-3); width: 100%; max-width: 280px; margin: 0; padding: 0; list-style: none; }
.ts-int__side li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-thin); border-radius: var(--radius-lg); background: var(--base-high); box-shadow: var(--shadow-sm); }
.ts-int__side span:last-child { display: grid; }
.ts-int__side b, .ts-int__hub b { font-weight: var(--fw-medium); color: var(--text-strong); }
.ts-int__side small, .ts-int__hub small { font-size: 12px; color: var(--text-low); }
.ts-int__hub { display: grid; justify-items: center; gap: 4px; padding: var(--space-6) var(--space-8); border-radius: var(--radius-xl); background: var(--base-high); box-shadow: var(--shadow-lg), 0 0 0 10px color-mix(in srgb, var(--accent) 10%, transparent); text-align: center; }
.ts-int__hub img { width: 56px; height: 56px; margin-bottom: var(--space-2); }
.ts-int__wire { position: relative; width: 2px; height: 56px; overflow: hidden; background: var(--border-strong); }
.ts-int__wire i { position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: linear-gradient(transparent, var(--accent)); animation: ts-int-flow-y 1.8s linear infinite; }
@keyframes ts-int-flow-y { to { top: 100%; } }
@keyframes ts-int-flow-x { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .ts-int__wire i { animation: none; top: 30%; } }
@media (min-width: 1024px) {
  .ts-int__flow { grid-template-columns: 1fr 120px auto 120px 1fr; align-items: center; }
  .ts-int__side { justify-self: stretch; max-width: none; }
  .ts-int__wire { width: 100%; height: 2px; }
  .ts-int__wire i { top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--accent)); animation-name: ts-int-flow-x; }
  .ts-int__cols-wrap { grid-template-columns: 1fr 1fr; gap: var(--space-20); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) { .ts-int__wire i { left: 30%; } }

/* V4 list with switches */
.ts-int__listwrap { display: grid; gap: var(--space-10); }
.ts-int__listcopy { display: grid; gap: var(--space-4); align-content: start; }
.ts-int__list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border-thin); border-radius: var(--radius-xl); background: var(--base-high); }
.ts-int__list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-5); }
.ts-int__list li + li { border-top: 1px solid var(--border-thin); }
.ts-int__list p { font-size: var(--para-sm-size); }
.ts-int__list code { font-size: 0.9em; }
@media (min-width: 1024px) { .ts-int__listwrap { grid-template-columns: 1fr 1.2fr; gap: var(--space-20); } }

/* V5 logo columns */
.ts-int__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); height: 420px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.ts-int__col { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; animation: ts-int-up 24s linear infinite; }
.ts-int__col--down { animation-direction: reverse; animation-duration: 28s; }
.ts-int__col li { display: grid; place-items: center; height: 112px; border: 1px solid var(--border-thin); border-radius: var(--radius-lg); background: var(--base-high); }
.ts-int__col .ts-int { width: 48px; height: 48px; box-shadow: none; }
@keyframes ts-int-up { to { transform: translateY(calc(-50% - var(--space-2))); } }
@media (prefers-reduced-motion: reduce) { .ts-int__col { animation: none; } }

/* V6 logos + API */
.ts-int__api { display: grid; gap: var(--space-8); }
.ts-int__mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); align-content: start; }
.ts-int__mini > * { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-thin); border-radius: var(--radius-md); background: var(--base-high); font-weight: var(--fw-medium); font-size: var(--body-sm-size); color: var(--text-strong); }
.ts-int__mini .ts-int { width: 28px; height: 28px; border-radius: 7px; }
.ts-int__request { border-style: dashed !important; background: transparent !important; color: var(--text-medium) !important; }
.ts-int__request .ts-svg { width: 28px; height: 18px; }
.ts-int__snippet { display: grid; gap: var(--space-3); align-content: start; }
.ts-int__snippet .ts-code { margin: 0; }
@media (min-width: 1024px) { .ts-int__api { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }
@media (min-width: 640px) { .ts-int__mini { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.ts-int__snippet .ts-code { overflow-x: auto; }