@import url("feature-plus.css");

/* =============================================================================
   Integrations directory page — .ig-* helpers
   Only the pieces the shared .fp-* / .fp-mk-* / .fx-* vocabulary does not
   already cover: the directory group header, the two-line rows inside the
   connection-health and channel mockups, and the inline "read more" link.
   Everything else on the page reuses the shared classes.
   ========================================================================== */

/* --- Inline "read more" link --------------------------------------------- */
.ig-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 10px 4px;
    font-size: 15px;
    font-weight: 700;
    color: #6f42c1;
    text-decoration: none;
}
.ig-more:hover { color: #9333ea; text-decoration: underline; }
.ig-more:focus-visible { outline: 2px solid #6f42c1; outline-offset: 3px; border-radius: 6px; }
.ig-more i { font-size: 17px; }

.ig-more-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 26px;
    margin-top: 8px;
}

/* --- Directory group header ---------------------------------------------- */
/* Each group is an in-page anchor target for the jump pills, so it needs a
   scroll offset that clears the sticky site header. */
.ig-group { scroll-margin-top: 110px; }
.ig-group + .ig-group { margin-top: 64px; }

.ig-group-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 26px;
}

.ig-group-mark {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(111,66,193,.1), rgba(155,92,255,.15));
    color: #6f42c1;
}
.ig-group-mark i { font-size: 26px; color: #6f42c1; }

.ig-group-copy { min-width: 0; }

.ig-group-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    color: #0f172a;
    margin: 6px 0 10px;
}

.ig-group-lead {
    font-size: 16px;
    line-height: 1.75;
    color: #6b7280;
    margin: 0;
    max-width: 780px;
}

.ig-count {
    display: inline-block;
    margin-left: 9px;
    padding: 3px 10px;
    border-radius: 20px;
    background: #f3e8ff;
    color: #7e22ce;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    vertical-align: middle;
}

@media (min-width: 768px) {
    .ig-group-title { font-size: 27px; }
}

/* --- Two-line rows inside the mockups ------------------------------------ */
/* Used with .fp-mk-row: a bold primary line with a small grey second line. */
.ig-line {
    display: block;
    min-width: 0;
    overflow-wrap: break-word;
}
.ig-line span {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .2px;
    color: #7b8794;
}

.ig-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* --- Sub-heading above a mock block -------------------------------------- */
.ig-mock-note {
    margin: 10px 2px 0;
    font-size: 10px;
    line-height: 1.6;
    color: #7b8794;
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ig-more { transition: none; }
}