/* ===================================================================
   Информация — большой SEO-справочник: типы серверов, режимы,
   плагины, версии.

   Заголовок страницы, чипы и кнопка возврата берутся из global.css.
   Значения — только из tokens.css.
   =================================================================== */

.info {
    max-width: var(--w-read);
}

/* ------------------------------------------------------------------
   Секции
   ------------------------------------------------------------------ */

.info__section {
    margin-bottom: var(--stack-lg);
    scroll-margin-top: var(--sp-5);
}

.info__h2 {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-title);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-snug);
    color: var(--text);
}

.info__h3 {
    margin: var(--sp-5) 0 var(--sp-3);
    font-size: var(--fs-lead);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--text);
}

.info__section p {
    margin: 0 0 var(--sp-3);
    max-width: var(--measure);
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    color: var(--text-2);
}

.info__section a {
    color: var(--accent);
    border-bottom: 1px solid var(--accent-line);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.info__section a:hover {
    border-bottom-color: var(--accent);
    color: var(--accent-hover);
}

.info__section strong {
    color: var(--text);
    font-weight: var(--fw-semibold);
}

.info__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-4);
    max-width: var(--measure);
}

.info__list li {
    position: relative;
    padding-left: var(--sp-5);
    margin-bottom: var(--sp-2);
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    color: var(--text-2);
}

/* Маркер нейтральный. Жёлтая точка перед каждым пунктом давала на
   странице справочника под сотню акцентных пятен — после этого жёлтым
   уже нечего было выделить. */
/* ------------------------------------------------------------------
   Содержание
   ------------------------------------------------------------------ */

.info__toc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--stack-lg);
    padding: 0;
}

.info__toc-label {
    margin-right: var(--sp-2);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-4);
}

/* Пункты содержания — те же чипы, что теги и версии. Раньше это была
   строка ссылок с палочками-разделителями и подчёркиванием по наведению:
   ещё один вид навигации на сайте, где их и так три. */
.info__toc-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-h-xs);
    padding: var(--sp-1) var(--sp-4);
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    transition: color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}

.info__toc-link:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-3);
}

/* ------------------------------------------------------------------
   Кросс-ссылки на FAQ
   ------------------------------------------------------------------ */

.info__faq-block {
    --card-spine: var(--accent);

    position: relative;
    margin: var(--stack-lg) 0;
    padding: var(--pad-card);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* Полоса псевдоэлементом, а не border-left: рамка сдвигала содержимое. */
.info__faq-block-title {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-lead);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--text);
}

.info__faq-block-intro {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-small);
    line-height: var(--lh-snug);
    color: var(--text-3);
}

/* auto-fit вместо repeat(2, 1fr): одна колонка получается сама, когда
   перестают помещаться две. */
.info__faq-block-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-4);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-2) var(--sp-6);
}

.info__faq-block-list li {
    font-size: var(--fs-body);
    line-height: var(--lh-snug);
}

.info__faq-block-list a {
    color: var(--text-2);
    border-bottom: 1px solid var(--border-strong);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.info__faq-block-list a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.info__faq-block-all {
    display: inline-block;
    color: var(--accent);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

.info__faq-block-all:hover {
    color: var(--accent-hover);
}

/* ------------------------------------------------------------------
   Чипы версий — общий .chip; здесь только сетка
   ------------------------------------------------------------------ */

.info__version-grid {
    list-style: none;
    padding: 0;
    margin: var(--sp-4) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

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

@media (max-width: 768px) {
    .info__section p,
    .info__list li,
    .info__faq-block-list li {
        font-size: var(--fs-small);
    }

    .info__toc-label {
        width: 100%;
        margin: 0 0 var(--sp-1);
    }
}