/* /salary: обзор медиан в левой колонке (между блоком аналитики и FAQ) и медианы у ссылок на профессии.
   Строки с полосами — из profession/02_market.css, строка методики — из salary_profession.css */

.salary-hub-overview {
    margin-top: 24px;
}

.salary-hub-overview-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.salary-hub-overview-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.salary-page .salary-hub-overview-card .cv-analysis-title {
    margin: 0 0 4px;
}

.salary-hub-overview-sub {
    margin: 0 0 16px;
    color: var(--text-muted);
    font-size: var(--fs-14);
    line-height: var(--lh-14);
    letter-spacing: var(--ls-14);
}

/* Компактнее, чем на странице профессии: карточка в половину ширины */
.salary-hub-overview .sp-grades {
    gap: 8px;
    max-width: none;
    margin: 0;
}

.salary-hub-overview .sp-grade {
    grid-template-columns: 88px minmax(0, 1fr) 100px;
    padding: 0;
}

.salary-hub-overview .sp-grade-bar {
    height: 32px;
}

.salary-hub-overview .sp-method {
    margin-top: 12px;
}

.salary-hub-median {
    margin-left: 4px;
    color: var(--text-muted);
    white-space: nowrap;
}

@media (max-width: 1279px) {
    .salary-hub-overview-card {
        padding: 16px;
    }

    /* Мобилка: название и диапазон сверху, полоса под ними — как на странице профессии */
    .salary-hub-overview .sp-grade {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 4px;
    }

    .salary-hub-overview .sp-grades {
        gap: 12px;
    }
}