/* Start:/local/components/custom/guide.list/templates/.default/style.css?17849222012666*/
/* Ювелирный гид: алфавитный указатель /guide/.
   Токены — из local/templates/box/style/constructor.css (палитра mercury-монохром):
   заголовки/навигация — var(--font-family-display) (Manrope), текст списка —
   var(--font-family-serif) (Inter). Жёстких имён шрифтов не оставляем — Jost
   подключён глобально (footer.php, шапка/меню), но в токены шаблона не входит.
   Никаких новых hex — только --color/--text-color/--border-color/--accent из
   боевого шаблона. */

.guide-index {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 64px;
}

.guide-index__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 16px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 32px;
}

.guide-index__nav-letter {
    font-family: var(--font-family-display);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--text-color);
    text-decoration: none;
    transition: color .2s ease;
}

.guide-index__nav-letter:hover {
    color: var(--accent);
}

.guide-index__columns {
    columns: 4;
    column-gap: 48px;
}

.guide-index__group {
    break-inside: avoid;
    margin-bottom: 28px;
}

/* h2 по умолчанию — Manrope 200 (см. template_styles.css), но буква указателя —
   навигационный элемент, а не заголовок раздела: набираем var(--font-family-display)
   (Manrope) весом 500, тем же токеном, что и заголовки статьи гида. */
.guide-index__letter {
    font-family: var(--font-family-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--text-color);
    margin: 0 0 10px;
}

.guide-index__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.guide-index__list li {
    margin: 0 0 8px;
}

.guide-index__link {
    font-family: var(--font-family-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--text-color-2);
    text-decoration: none;
    transition: color .2s ease;
}

.guide-index__link:hover {
    color: var(--accent);
}

.guide-index__empty {
    font-family: var(--font-family-serif);
    font-size: 16px;
    font-weight: 400;
    color: var(--text-color-4);
    padding: 48px 0;
}

@media (max-width: 1024px) {
    .guide-index__columns { columns: 2; }
}

@media (max-width: 640px) {
    .guide-index__columns { columns: 1; }
}

/* End */
/* /local/components/custom/guide.list/templates/.default/style.css?17849222012666 */