/* Jobit knowledge-center article card (blog.css blog-card subset), un-scoped. */
.jo-kc-card {
            --jobit-blue: #4364AD; --jobit-blue-50: #EEF2FA; --jobit-blue-100: #D9E1F2;
            --jobit-blue-200: #B3C3E4; --jobit-blue-600: #36528E; --jobit-blue-700: #2A4071;
            --border: #DDE3EC; --fg-strong: #1F2F54; --fg-muted: #4E596D; --fg-subtle: #6D798F;
            --bg-subtle: #F5F7FA; --neutral-300: #C3CCDA;
            --r-md: 10px; --r-xl: 20px; --r-pill: 999px;
            --shadow-md: 0 8px 20px rgba(31,47,84,0.10);
            --dur-base: 180ms; --dur-fast: 120ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
            --cat: var(--jobit-blue);
            font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            display: flex;
        }
        .blog-card {
            display: flex; flex-direction: column; flex: 1;
            background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl);
            text-decoration: none; color: inherit; position: relative; overflow: hidden;
            transition: all var(--dur-base) var(--ease-out);
        }
        .blog-card:hover {
            border-color: color-mix(in srgb, var(--cat) 42%, var(--border));
            box-shadow: var(--shadow-md);
            transform: translateY(-3px);
            text-decoration: none;
        }
        .blog-card-media {
            position: relative; width: 100%; height: 172px; flex-shrink: 0;
            background: color-mix(in srgb, var(--cat) 12%, #eef2f8); overflow: hidden;
        }
        .blog-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .blog-card-badge {
            position: absolute; top: 12px; left: 12px; z-index: 2;
            display: inline-flex; align-items: center;
            font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
            color: #fff; background: var(--cat); padding: 6px 11px; border-radius: var(--r-pill);
            box-shadow: 0 2px 8px rgba(31,47,84,0.20);
        }
        .blog-card-body { display: flex; flex-direction: column; flex: 1; padding: 18px 22px; }
        .kb-card-title {
            font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 700;
            color: var(--fg-strong); margin: 0 0 8px; text-wrap: balance;
        }
        .blog-card:hover .kb-card-title { color: var(--jobit-blue-700); }
        .kb-card-excerpt { font-size: 14.5px; line-height: 1.5; color: var(--fg-muted); margin: 0 0 16px; text-wrap: pretty; }
        .kb-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
        .kb-tag {
            display: inline-block; font-size: 12px; font-weight: 600; color: var(--fg-muted);
            background: var(--bg-subtle); padding: 4px 9px; border-radius: var(--r-pill);
        }
        .kb-card-foot {
            margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
            display: flex; align-items: center; gap: 8px;
            font-size: 13px; font-weight: 500; color: var(--fg-subtle);
        }
        .kb-card-arrow {
            margin-left: auto; width: 32px; height: 32px; flex-shrink: 0;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--bg-subtle); border-radius: var(--r-pill); color: var(--cat);
            transition: all var(--dur-base) var(--ease-out);
        }
        .blog-card:hover .kb-card-arrow { background: var(--cat); color: #fff; transform: translateX(2px); }

/* Jobit knowledge-center filters block (jo-knowledge-center-filters), un-scoped. */
.jo-knowledge-center-filters {
    --jobit-blue: #4364AD;
    --jobit-blue-50: #EEF2FA;
    --border: #DDE3EC;
    --fg-strong: #1F2F54;
    --fg-muted: #4E596D;
    --fg-subtle: #6D798F;
    --bg-subtle: #F5F7FA;
    --r-md: 12px;
    --r-xl: 20px;
    --r-pill: 999px;
    --dur-fast: 120ms;
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}

/* each facet group is its own card */
.jo-knowledge-center-filters .jo-knowledge-center-filter-group {
    width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 22px 20px;
}
.jo-knowledge-center-filters .jo-knowledge-center-filter-group-label {
    display: block;
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-strong);
}
.jo-knowledge-center-filters .jo-knowledge-center-filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* category rows: bullet + name + count */
.jo-knowledge-center-filters .jo-knowledge-center-filter-option {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: 0;
    border-radius: var(--r-md);
    cursor: pointer;
    text-align: left;
    transition: background-color 150ms ease;
}
.jo-knowledge-center-filters .jo-knowledge-center-filter-option:hover,
.jo-knowledge-center-filters .jo-knowledge-center-filter-option.is-selected {
    background-color: var(--jobit-blue-50);
}
.jo-knowledge-center-filters .jo-knowledge-center-filter-bullet {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: var(--r-pill);
    background-color: var(--jobit-blue);
}
.jo-knowledge-center-filters .jo-knowledge-center-filter-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--fg-strong);
}
.jo-knowledge-center-filters .jo-knowledge-center-filter-count {
    display: inline-block;
    flex-shrink: 0;
    min-width: 28px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    background: var(--bg-subtle);
    color: var(--fg-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    transition: all var(--dur-fast) var(--ease-out);
}
.jo-knowledge-center-filters .jo-knowledge-center-filter-option.is-selected .jo-knowledge-center-filter-count {
    background-color: var(--jobit-blue);
    color: #fff;
}

/* tags group: pill chips instead of rows */
.jo-knowledge-center-filters .jo-knowledge-center-filter-group-tags .jo-knowledge-center-filter-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}
.jo-knowledge-center-filters .jo-knowledge-center-filter-group-tags .jo-knowledge-center-filter-bullet,
.jo-knowledge-center-filters .jo-knowledge-center-filter-group-tags .jo-knowledge-center-filter-count {
    display: none;
}
.jo-knowledge-center-filters .jo-knowledge-center-filter-group-tags .jo-knowledge-center-filter-option {
    width: auto;
    gap: 0;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    background-color: var(--bg-subtle);
    transition: background-color 150ms ease, color 150ms ease;
}
.jo-knowledge-center-filters .jo-knowledge-center-filter-group-tags .jo-knowledge-center-filter-option:hover {
    background-color: var(--jobit-blue-50);
}
.jo-knowledge-center-filters .jo-knowledge-center-filter-group-tags .jo-knowledge-center-filter-option.is-selected {
    background-color: var(--jobit-blue);
}
.jo-knowledge-center-filters .jo-knowledge-center-filter-group-tags .jo-knowledge-center-filter-name {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-strong);
}
.jo-knowledge-center-filters .jo-knowledge-center-filter-group-tags .jo-knowledge-center-filter-name::before {
    content: '#';
    opacity: 0.65;
}
.jo-knowledge-center-filters .jo-knowledge-center-filter-group-tags .jo-knowledge-center-filter-option.is-selected .jo-knowledge-center-filter-name {
    color: #fff;
}

/* keyword search + clear */
.jo-knowledge-center-filters .jo-knowledge-center-filters-search {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px 12px;
    font-size: 14px;
}
.jo-knowledge-center-filters .jo-knowledge-center-filter-clear {
    align-self: flex-start;
    background: none;
    border: 0;
    padding: 0;
    font-size: 14px;
    color: var(--fg-subtle);
    cursor: pointer;
}
.jo-knowledge-center-filters .jo-knowledge-center-filter-clear:hover {
    text-decoration: underline;
}