/* === PAGES.CSS ===
   assets/css/pages.css
   НАЗНАЧЕНИЕ: публичные страницы-тексты — документация и её будущие соседи из
   футера (задача 16). Шапка .page-topbar и типографика длинного текста.

   ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ ДОПИСКА В landing.css. Лендинг — витрина с
   секциями во всю ширину, здесь же читаемая колонка текста; правила у них
   разные, и смешивать их значит ломать одно правкой другого.

   ПОДКЛЮЧАЕТСЯ ТОЛЬКО В index.php. В templates/editor.php и site.php этих
   страниц нет, и лишний файл там был бы мёртвым весом. Списки подключений у
   трёх точек входа независимы — правя одну, проверяйте остальные.

   Переменные берутся в том же виде, что в landing.css: hsl(var(--…)). Смешивать
   с формой var(--…) нельзя — цвета молча станут пустыми.
   ============================================ */

/* ============================================
   ШАПКА ПУБЛИЧНОЙ СТРАНИЦЫ
   ============================================ */
.page-topbar {
    padding: 1.25rem 0;
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--surface-1));
}

.page-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.page-topbar-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    text-decoration: none;
}

.page-topbar-logo:hover {
    color: hsl(var(--primary));
}

/* ============================================
   СТРАНИЦА-ТЕКСТ
   ============================================ */
.page-doc {
    padding: 3.5rem 0 5rem;
    background: hsl(var(--surface-0));
}

/* Читаемая колонка: длинная строка утомляет глаз, и это единственная причина
   ограничения. Отступ снизу — чтобы последний раздел не прилипал к футеру. */
.page-doc .container {
    max-width: 860px;
}

.page-doc-header {
    text-align: center;
    margin-bottom: 3rem;
}

.page-doc-title {
    font-size: 2.75rem;
    font-weight: 800;
    margin: 0.5rem 0 1rem;
}

.page-doc-subtitle {
    font-size: 1.125rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.7;
    margin: 0;
}

/* ── Оглавление ───────────────────────────── */
.page-doc-toc {
    padding: 1.5rem 1.75rem;
    background: hsl(var(--surface-1));
    border: 1px solid hsl(var(--border));
    border-radius: 1rem;
    margin-bottom: 3rem;
}

.page-doc-toc-title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsl(var(--muted-foreground));
    margin: 0 0 0.875rem;
}

.page-doc-toc ol {
    columns: 2;
    column-gap: 2rem;
    margin: 0;
    padding-left: 1.125rem;
}

.page-doc-toc li {
    margin-bottom: 0.5rem;
    break-inside: avoid;
    color: hsl(var(--muted-foreground));
}

.page-doc-toc a {
    color: hsl(var(--foreground));
    text-decoration: none;
}

.page-doc-toc a:hover {
    color: hsl(var(--primary));
    text-decoration: underline;
}

/* ── Раздел ───────────────────────────────── */
.page-doc-section {
    margin-bottom: 3rem;
    /* Якорь из оглавления не должен ставить заголовок вплотную к краю окна. */
    scroll-margin-top: 1.5rem;
}

.page-doc-section h2 {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.page-doc-section h2 i {
    color: hsl(var(--primary));
    flex-shrink: 0;
}

.page-doc-section p {
    color: hsl(var(--muted-foreground));
    line-height: 1.75;
    margin: 0 0 1rem;
}

.page-doc-section p:last-child {
    margin-bottom: 0;
}

.page-doc-section code {
    padding: 0.15em 0.4em;
    border-radius: 0.375rem;
    background: hsl(var(--surface-2));
    border: 1px solid hsl(var(--border));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.875em;
    color: hsl(var(--foreground));
}

/* Раздел «чего пока нет» отличается фоном намеренно: он говорит обратное
   всему остальному тексту, и читатель должен это заметить. */
.page-doc-section-muted {
    padding: 1.75rem;
    background: hsl(var(--surface-1));
    border: 1px solid hsl(var(--border));
    border-radius: 1rem;
}

/* ── Шаги ─────────────────────────────────── */
.page-doc-steps {
    margin: 0;
    padding-left: 1.25rem;
}

.page-doc-steps li {
    margin-bottom: 1rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.75;
}

.page-doc-steps strong {
    display: block;
    color: hsl(var(--foreground));
    margin-bottom: 0.125rem;
}

/* ── Списки ───────────────────────────────── */
.page-doc-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.page-doc-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.7;
}

.page-doc-list i {
    color: hsl(var(--primary));
    flex-shrink: 0;
    margin-top: 0.3rem;
}

.page-doc-list-plain i {
    color: hsl(var(--muted-foreground));
}

/* ── Карточки редактора ───────────────────── */
.page-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.page-doc-card {
    padding: 1.5rem;
    background: hsl(var(--surface-1));
    border: 1px solid hsl(var(--border));
    border-radius: 1rem;
}

.page-doc-card h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0.875rem 0 0.5rem;
}

.page-doc-card p {
    margin: 0;
    font-size: 0.9375rem;
}

/* ── Призыв к действию ────────────────────── */
.page-doc-cta {
    text-align: center;
    padding: 3rem 2rem;
    background: hsl(var(--surface-1));
    border: 1px solid hsl(var(--border));
    border-radius: 1.25rem;
    margin-top: 4rem;
}

.page-doc-cta h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.page-doc-cta p {
    color: hsl(var(--muted-foreground));
    margin: 0 0 1.75rem;
}


/* ============================================
   ССЫЛКА ВНУТРИ ТЕКСТА
   ============================================ */
.page-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: hsl(var(--primary));
    font-weight: 500;
    text-decoration: none;
}

.page-doc-link:hover {
    text-decoration: underline;
}

/* ============================================
   КАРТОЧКИ ШАБЛОНОВ САЙТОВ (site-templates.php)
   ============================================ */
.page-tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.page-tpl-card {
    padding: 1.75rem;
    background: hsl(var(--surface-1));
    border: 1px solid hsl(var(--border));
    border-radius: 1rem;
}

.page-tpl-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0.875rem 0 0.5rem;
}

.page-tpl-card > p {
    color: hsl(var(--muted-foreground));
    line-height: 1.7;
    margin: 0 0 1.25rem;
}

.page-tpl-sections-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.625rem;
}

.page-tpl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* Секции — перечень, а не действия: у «чипов» намеренно нет вида кнопок,
   иначе по ним станут кликать и не получат ничего. */
.page-tpl-chip {
    padding: 0.25rem 0.625rem;
    background: hsl(var(--surface-2));
    border: 1px solid hsl(var(--border));
    border-radius: 9999px;
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}

/* ============================================
   ЛЕНТА ИЗМЕНЕНИЙ (changelog.php)
   ============================================ */
.page-log {
    list-style: none;
    margin: 0 0 3rem;
    padding: 0;
    border-left: 2px solid hsl(var(--border));
}

.page-log-item {
    position: relative;
    padding: 0 0 1.75rem 1.75rem;
}

/* Точка на линии времени. Отступ слева у элемента больше её радиуса, поэтому
   текст не наезжает на неё ни при какой длине даты. */
.page-log-item::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 0.5rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: hsl(var(--primary));
}

.page-log-date {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.8125rem;
    color: hsl(var(--primary));
    margin-bottom: 0.375rem;
}

.page-log-text {
    margin: 0;
    color: hsl(var(--muted-foreground));
    line-height: 1.75;
}

/* ============================================
   ВОПРОСЫ И ОТВЕТЫ (support.php)
   ============================================ */
.page-faq {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Ответы раскрыты сразу, без сворачивания: вопросов девять, они короткие, и
   лишний клик здесь только мешает искать глазами. */
.page-faq-item {
    padding: 1.25rem 1.5rem;
    background: hsl(var(--surface-1));
    border: 1px solid hsl(var(--border));
    border-radius: 0.875rem;
}

.page-faq-q {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: hsl(var(--foreground));
}

.page-faq-a {
    margin: 0;
    color: hsl(var(--muted-foreground));
    line-height: 1.75;
}

/* ============================================
   ЗАГЛУШКА (page-stub.php, blog.php, careers.php)
   ============================================ */
.page-stub {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 3rem;
    padding: 3rem 2rem;
    background: hsl(var(--surface-1));
    border: 1px solid hsl(var(--border));
    border-radius: 1.25rem;
}

.page-stub-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 1rem;
    background: hsl(var(--surface-2));
    border: 1px solid hsl(var(--border));
    color: hsl(var(--muted-foreground));
    margin-bottom: 1.25rem;
}

.page-stub h2 {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.page-stub p {
    color: hsl(var(--muted-foreground));
    line-height: 1.75;
    margin: 0 0 1rem;
}

.page-stub p:last-of-type {
    margin-bottom: 1.75rem;
}

/* ============================================
   УЗКИЙ ЭКРАН

   СТОИТ В КОНЦЕ ФАЙЛА, И ЭТО ВАЖНО. Медиазапрос не добавляет специфичности:
   при равных селекторах побеждает то правило, что ниже. Стой он в середине —
   правило, дописанное после него, молча отменило бы мобильное переопределение,
   и заметили бы это только на телефоне. Новые правила добавляйте ВЫШЕ.
   ============================================ */
@media (max-width: 768px) {
    .page-doc {
        padding: 2rem 0 3rem;
    }

    .page-doc-title {
        font-size: 2rem;
    }

    /* Две колонки оглавления на телефоне дают строки в два слова. */
    .page-doc-toc ol {
        columns: 1;
    }

    .page-doc-section h2 {
        font-size: 1.25rem;
    }

    .page-stub {
        padding: 2rem 1.25rem;
    }
}