/* ============================================================
   body-integration — "Всі інтеграції"
   Розмітка: integration.html | Скрипт: integration.js
   ============================================================ */

.body-integration *,
.body-integration *::before,
.body-integration *::after { box-sizing: border-box; }

.body-integration {
    --bi-blue:    #2d7ff9;
    --bi-navy:    #15264a;
    --bi-ink:     #1f2a44;
    --bi-gray:    #6b7280;
    --bi-amber:   #f4a52f;
    --bi-line:    #e6eaf1;
    --bi-card-bd: #e4e9f2;
    --bi-maxw:    1320px;

    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background: #ffffff;
    color: var(--bi-ink);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    padding: 24px 24px 64px;
}

.body-integration .bi-inner {
    max-width: var(--bi-maxw);
    margin: 0 auto;
}

/* ---------- back ---------- */
.body-integration .bi-back {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bi-gray);
    text-decoration: none;
    margin-bottom: 26px;
    transition: opacity .15s ease;
}
.body-integration .bi-back:hover { opacity: .7; }

/* ---------- header ---------- */
.body-integration .bi-head {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    align-items: center;
    gap: 40px;
    margin-bottom: 24px;
}
.body-integration .bi-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--bi-navy);
}
.body-integration .bi-title .bi-accent { color: var(--bi-blue); }
.body-integration .bi-lead {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--bi-gray);
}

/* ---------- banner ---------- */
.body-integration .bi-banner {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 36px;
}
.body-integration .bi-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- body layout ---------- */
.body-integration .bi-body {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 36px;
    align-items: start;
}

/* ---------- categories ---------- */
.body-integration .bi-cats {
    display: flex;
    flex-direction: column;
}
.body-integration .bi-cat {
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--bi-line);
    padding: 18px 6px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--bi-navy);
    cursor: pointer;
    transition: color .15s ease;
}
.body-integration .bi-cat:first-child { padding-top: 6px; }
.body-integration .bi-cat:hover { color: var(--bi-blue); }
.body-integration .bi-cat.is-active { color: var(--bi-blue); background: rgb(29 147 255 / 0.16)
}
/* прибираємо прямокутну обводку фокуса (та «коробка» після кліку) */
.body-integration .bi-cat:focus { outline: none; }
.body-integration .bi-cat:focus-visible { outline: 2px solid rgba(45,127,249,.45); outline-offset: 2px; }

/* крапка стоїть лише біля активної категорії */
.body-integration .bi-cat::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bi-amber);
    flex: none;
    opacity: 0;                 /* прихована у неактивних */
    transition: opacity .15s ease;
}
.body-integration .bi-cat.is-active::before { opacity: 1; }

/* ---------- cards grid ---------- */
.body-integration .bi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    /* 2 ряди -> далі скрол. Точну висоту проставляє integration.js;
       значення нижче — фолбек, якщо скрипт не підключено. */
    grid-auto-rows: max-content;
    max-height: 760px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 8px;            /* місце під скролбар, щоб картки не липли */
}
/* тонкий акуратний скролбар */
.body-integration .bi-grid {
    scrollbar-width: thin;
    scrollbar-color: #c7d2e6 transparent;
}
.body-integration .bi-grid::-webkit-scrollbar { width: 8px; }
.body-integration .bi-grid::-webkit-scrollbar-track { background: transparent; }
.body-integration .bi-grid::-webkit-scrollbar-thumb {
    background: #c7d2e6;
    border-radius: 999px;
}
.body-integration .bi-grid::-webkit-scrollbar-thumb:hover { background: #aebbd4; }

.body-integration .bi-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bi-card-bd);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .18s ease, transform .18s ease;
}
.body-integration .bi-card:hover {
    box-shadow: 0 16px 34px rgba(40, 70, 130, .10);
    transform: translateY(-2px);
}

/* logo header */
.body-integration .bi-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    background: linear-gradient(180deg, #f3f7fd, #eef3fb);
    border-bottom: 1px solid var(--bi-card-bd);
}
.body-integration .bi-logo img {
    max-height: 34px;
    max-width: 70%;
    width: auto;
    object-fit: contain;
    display: block;
}

/* card content */
.body-integration .bi-card-title {
    margin: 20px 22px 10px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--bi-navy);
}
.body-integration .bi-card-text {
    margin: 0 22px 20px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--bi-gray);
    flex: 1;
}

/* more button */
.body-integration .bi-more {
    align-self: flex-start;
    margin: 0 22px 22px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--bi-navy);
    border: 1.5px solid var(--bi-card-bd);
    border-radius: 999px;
    padding: 11px 26px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.body-integration .bi-more:hover { border-color: var(--bi-blue); color: var(--bi-blue); }
.body-integration .bi-more--primary {
    color: #fff;
    background: var(--bi-blue);
    border-color: var(--bi-blue);
    box-shadow: 0 8px 18px rgba(45, 127, 249, .30);
}
.body-integration .bi-more--primary:hover { color: #fff; background: #1f6fe6; border-color: #1f6fe6; }

/* hidden state (filter) */
.body-integration .bi-card.is-hidden { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
    .body-integration .bi-body { grid-template-columns: 200px 1fr; gap: 24px; }
    .body-integration .bi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .body-integration .bi-head { grid-template-columns: 1fr; gap: 14px; }
    .body-integration .bi-body { grid-template-columns: 1fr; gap: 24px; }
    /* категорії горизонтально, з прокруткою */
    .body-integration .bi-cats {
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 6px;
    }
    .body-integration .bi-cat {
        border: 1px solid var(--bi-line);
        border-radius: 999px;
        padding: 9px 16px;
        white-space: nowrap;
        font-size: 14px;
    }
    .body-integration .bi-cat:first-child { padding-top: 9px; }
    .body-integration .bi-cat.is-active { border-color: var(--bi-blue); }
    .body-integration .bi-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .body-integration { padding: 18px 16px 44px; }
    .body-integration .bi-title { font-size: 24px; }
}