/*
 * Стили страницы "Заболевания" — алфавитный указатель.
 * Файл автоматически подключается Bitrix, т.к. лежит в папке шаблона
 * компонента (style.css / script.js подключаются ядром без ручного
 * подключения через AddHeadString / Asset).
 *
 * Брендовые цвета:
 *   --diseases-az-accent   #70acd0  — акцент (активные буквы, ссылки, hover)
 *   --diseases-az-text     #4a4a49  — основной текст
 */

.diseases-az {
    --diseases-az-accent: #70acd0;
    --diseases-az-accent-dark: #5a94b8;
    --diseases-az-text: #4a4a49;
    --diseases-az-text-muted: #b7b7b6;
    --diseases-az-border: #e3e3e2;

    color: var(--diseases-az-text);
    font-family: inherit;
}

/* ---------- Алфавитная навигация ---------- */

.diseases-az__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 16px 0;
    margin-bottom: 24px;
    background: #fff;
    border-bottom: 1px solid var(--diseases-az-border);
}

.diseases-az__letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.diseases-az__letter--active {
    color: var(--diseases-az-accent);
    background: rgba(112, 172, 208, 0.1);
}

.diseases-az__letter--active:hover,
.diseases-az__letter--active:focus-visible {
    color: #fff;
    background: var(--diseases-az-accent);
    outline: none;
}

.diseases-az__letter--active.is-current {
    color: #fff;
    background: var(--diseases-az-accent-dark);
}

.diseases-az__letter--disabled {
    color: var(--diseases-az-text-muted);
    cursor: default;
    user-select: none;
}

/* ---------- Группы по буквам ---------- */

.diseases-az__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.diseases-az__group {
    scroll-margin-top: 76px; /* учитывает высоту sticky-навигации */
}

.diseases-az__group-title {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 700;
    color: var(--diseases-az-accent);
    border-bottom: 2px solid var(--diseases-az-accent);
    padding-bottom: 6px;
}

.diseases-az__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.diseases-az__item {
    margin: 0;
    padding: 0;
}

.diseases-az__link {
    display: inline-block;
    padding: 6px 0;
    color: var(--diseases-az-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.diseases-az__link:hover,
.diseases-az__link:focus-visible {
    color: var(--diseases-az-accent);
    border-bottom-color: var(--diseases-az-accent);
    outline: none;
}

    #diseases {
        margin: 104px 0;
    }

/* ---------- Адаптив ---------- */

@media (max-width: 900px) {
    .diseases-az__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .diseases-az__nav {
        gap: 6px;
        padding: 12px 0;
    }

    .diseases-az__letter {
        min-width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .diseases-az__list {
        grid-template-columns: 1fr;
    }

    .diseases-az__group-title {
        font-size: 20px;
    }
}