/* =========================================================================
 * Integrations: skinsflow.com/integrations and the dashboard Integrations page.
 *
 *   .int-grid            2 columns (1 on phones)       .int-grid--3  3 columns
 *   .int-card            platform / SDK card (__head __name __kind __how __list __foot __meta)
 *   .int-tile            text tile instead of a logo (--violet --ink)
 *   .int-snippet         a labelled code block inside a card
 * No logos: platforms are named in plain text tiles (brand rule).
 * ========================================================================= */

.int-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.int-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .int-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .int-grid, .int-grid--3 { grid-template-columns: minmax(0, 1fr); } }

.int-card {
    display: flex; flex-direction: column; gap: 16px; min-width: 0;
    padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.int-card__head { display: flex; align-items: center; gap: 14px; }
.int-card__name { margin: 0; font-family: var(--f-display); font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; }
.int-card__kind { display: block; color: var(--faint); font-size: 13px; margin-top: 2px; }
.int-card__how { margin: 0; color: var(--muted); }
.int-card__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; }
.int-card__list li { display: flex; gap: 10px; align-items: flex-start; }
.int-card__list svg { color: var(--mint); margin-top: 3px; }
.int-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.int-card__meta { color: var(--faint); font-size: 13px; }

.int-tile {
    flex: none; width: 52px; height: 52px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em;
    background: var(--panel-3); color: var(--mint); border: 1px solid var(--line-2);
}
.int-tile svg { width: 24px; height: 24px; }
.int-tile--violet { color: var(--violet); }
.int-tile--ink { color: var(--fg); }
/* Official logo: white tile in both themes so every brand keeps its own colours. */
.int-tile--logo { background: #fff; border-color: var(--line-2); padding: 8px; }
.int-tile--logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.int-tile--lg.int-tile--logo { padding: 10px; }
.int-tile--logo.int-tile--fill { padding: 0; overflow: hidden; }
.int-tile--fill img { object-fit: cover; }

.int-snippet { display: grid; gap: 6px; min-width: 0; }
.int-snippet .code { margin: 0; font-size: 13px; max-width: 100%; overflow-x: auto; }
.int-snippet__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 32px; }
.int-snippet__label { color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

.int-note { color: var(--muted); font-size: 14px; }
.int-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.int-group-title { margin: 0; font-size: 13px; font-family: var(--f-mono); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }