/* Блоки листингов специальностей (layboard.com).
   Палитра/компоненты сайта: акцент #2EA4DE, текст #242424, карточки .white-backgroud-card.
   Сайдбар: интро + виджет ЗП. Между карточками: врезка стран. Внизу: кросс-линки + модератор. */

/* ---------- Сайдбар: интро ---------- */
.spl-intro .white-backgroud-card-title span { color: #2EA4DE; }
.spl-intro__def {
    color: #5a6066; font-size: 14px; line-height: 1.5; margin: 0 0 12px;
}
.spl-skills-label { color: #242424; font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.spl-skills { list-style: none; padding: 0; margin: 0 0 16px; width: 100%; }
.spl-skills li {
    position: relative; padding-left: 16px; margin-bottom: 7px;
    font-size: 13px; line-height: 1.45; color: #5a6066;
}
.spl-skills li:last-child { margin-bottom: 0; }
.spl-skills li::before {
    content: ''; position: absolute; left: 0; top: 7px;
    width: 6px; height: 6px; border-radius: 50%; background: #2EA4DE;
}
.spl-stats { width: 100%; margin-bottom: 12px; }
.spl-stat {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid #eef1f4;
}
.spl-stat:last-child { border-bottom: none; }
.spl-stat__label { color: #838c90; font-size: 13px; }
.spl-stat__value { color: #242424; font-size: 16px; font-weight: 700; }
.spl-stat__value.is-demand { color: #2EA4DE; font-size: 14px; }

.spl-cta {
    display: inline-block; color: #2EA4DE; font-size: 14px; font-weight: 600;
    text-decoration: none;
}
.spl-cta:hover { color: #1e83b6; }

/* ---------- Сайдбар: виджет ЗП ---------- */
.spl-salary .spl-sal-main {
    display: flex; align-items: baseline; justify-content: space-between;
    width: 100%; margin-bottom: 10px;
}
.spl-sal-amount { color: #242424; font-size: 26px; font-weight: 700; line-height: 1; }
.spl-sal-delta { font-size: 13px; font-weight: 600; white-space: nowrap; }
.spl-sal-delta.up { color: #2CC96A; }
.spl-sal-delta.down { color: #ff5252; }
.spl-sal-row {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 6px 0; font-size: 14px; color: #5a6066;
    border-bottom: 1px solid #eef1f4;
}
.spl-sal-row b { color: #242424; font-weight: 700; }
.spl-sal-sub { width: 100%; margin: 12px 0 4px; font-size: 12px; color: #838c90; }
.spl-salary .card-side-link { border-bottom: 1px solid #eef1f4; }

/* ---------- В конце списка: врезка стран (карточка как вакансия) ---------- */
.spec-ci-card { overflow: hidden; margin-left: 10px; margin-right: 10px; } /* выравниваем края с карточками вакансий (.vacancy__card) */
.spec-ci-inner { padding: 18px 24px; }
.spec-ci-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.spec-ci-head .wallet__icon svg { width: 18px; height: 18px; }
.spec-ci-title { font-size: 16px; font-weight: 600; color: #242424; }
.spec-ci-prof { color: #2EA4DE; }

.spec-ci-grid { display: grid; grid-template-columns: repeat(var(--ci-cols, 5), minmax(0, 1fr)); gap: 6px; }
.spec-ci-tile {
    cursor: pointer; border: 1px solid #e6ebf0; background: #f8fafc; border-radius: 8px;
    padding: 6px 10px; text-align: left; min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
    transition: border-color .15s, background .15s;
}
.spec-ci-tile:hover { background: #f1f7fb; border-color: #bfe0f1; }
.spec-ci-tile.is-active { background: #eaf5fb; border-color: #2EA4DE; }
.spec-ci-tile-country { font-size: 11px; color: #5a6066; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spec-ci-tile-salary { font-size: 13px; font-weight: 700; color: #2EA4DE; white-space: nowrap; }

.spec-ci-details { margin-top: 10px; }
.spec-ci-detail {
    display: none; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    text-decoration: none; background: #f1f7fb; border: 1px solid #bfe0f1; border-radius: 9px; padding: 12px 16px;
}
.spec-ci-detail.is-active { display: flex; }
.spec-ci-detail-country { font-size: 15px; font-weight: 700; color: #242424; display: block; margin-bottom: 3px; }
.spec-ci-detail-figs { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #5a6066; }
.spec-ci-detail-figs b { color: #242424; }
.spec-ci-detail-delta { font-weight: 700; }
.spec-ci-detail-delta.up { color: #2CC96A; }
.spec-ci-detail-delta.down { color: #ff5252; }
.spec-ci-detail-cta {
    white-space: nowrap; border: 1px solid #2EA4DE; color: #2EA4DE; font-weight: 600; font-size: 13px;
    border-radius: 7px; padding: 8px 14px;
}

@media (max-width: 768px) {
    .spec-ci-inner { padding: 16px 18px; }
    .spec-ci-grid { grid-template-columns: repeat(2, 1fr); }
    .spec-ci-detail { flex-direction: column; align-items: flex-start; }
}

/* ---------- Внизу: кросс-линки ---------- */
.spec-cross-links { margin: 24px 0; }
.spec-cross-title { font-size: 20px; font-weight: 600; color: #242424; margin: 0 0 14px; font-family: 'Mariupol-Regular'; }
.spec-cross-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.spec-cross-card {
    background: #fff; border-radius: 12px; padding: 16px;
    box-shadow: 0px 24px 36.1px -7px rgba(0, 0, 0, 0.08);
    display: flex; flex-direction: column; gap: 6px;
}
.spec-cross-card-title { font-size: 15px; font-weight: 700; color: #2EA4DE; text-decoration: none; }
.spec-cross-card-title:hover { color: #1e83b6; }
.spec-cross-card-salary { font-size: 13px; color: #838c90; }
.spec-cross-card-salary b { color: #242424; }
.spec-cross-card-link { font-size: 13px; color: #2EA4DE; text-decoration: none; margin-top: auto; }

/* ---------- Внизу: плашка модератора ---------- */
.spec-moderator { margin: 18px 0; }
.spec-moderator-card {
    display: flex; align-items: center; gap: 14px;
    background: #f5f6f8; border-radius: 12px; padding: 12px 16px;
}
.spec-moderator-avatar {
    flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%;
    background-size: cover; background-position: center; background-color: #dde3ea;
}
.spec-moderator-body { font-size: 13px; color: #5a6066; line-height: 1.5; }
.spec-moderator-name { color: #2EA4DE; font-weight: 700; text-decoration: none; }
.spec-moderator-name:hover { color: #1e83b6; }
.spec-moderator-job { color: #838c90; }
.spec-moderator-stats { margin-top: 2px; }
.spec-moderator-badge-check { color: #2CC96A; font-weight: 700; }
.spec-moderator-policy { color: #2EA4DE; text-decoration: none; }
.spec-moderator-policy:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .spec-moderator-card { flex-direction: column; align-items: flex-start; }
    .spec-cross-grid { grid-template-columns: 1fr 1fr; }
}