/*
 * VERSTA desktop — раскладка страницы: общие секции и сетки страниц.
 * Шапка — header.css, подвал — footer.css, UI-кит — ui.css, токены — base.css.
 *
 * Содержание:
 *  1. Секция страницы (.page-section)
 *  2. Заголовок страницы (.page-head, include/ui/page-head.php)
 *  3. Текстовая страница (.content-page) и боковое меню раздела (.content-nav)
 */

/* ========== 1. Секция страницы ========== */
.page-section {
    padding-inline: var(--vd-gutter);
}

/* ========== 2. Заголовок страницы ========== */
/*
 * <header class="page-head page-head--d2 [page-head--has-lead] [page-head--<modifier>]">
 *   <div class="page-head__crumbs">…bitrix:breadcrumb [vd]…</div>
 *   <div class="page-head__body">
 *     <div class="page-head__main">
 *       <p class="page-head__eyebrow">О компании</p>
 *       <div class="page-head__heading">
 *         <h1 class="display display--d2 page-head__title">Помощь</h1>
 *         <span class="page-head__count">12</span>
 *       </div>
 *     </div>
 *     <div class="page-head__lead">…</div>
 *   </div>
 * </header>
 * Модификаторы: stacked — лид под заголовком; surface — серая плашка (экран 24);
 * compact — заголовок на ступень меньше; flush — без своих боковых полей (внутри .container).
 */
.page-head {
    padding: clamp(40px, 5vw, 72px) var(--vd-gutter) clamp(32px, 3.33vw, 48px);
}

/* С крошками сверху — отступ как у листинга каталога */
.page-head:has(> .page-head__crumbs:not(:empty)) {
    padding-top: 28px;
}

/* Цепочка пустая (NOT_SHOW_NAV_CHAIN) — блок крошек не занимает места */
.page-head__crumbs:empty {
    display: none;
}

.page-head__crumbs:not(:empty) + .page-head__body {
    margin-top: 24px;
}

.page-head__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px 48px;
    align-items: end;
}

.page-head--has-lead .page-head__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
}

.page-head__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    min-width: 0;
}

/*
 * Слово заголовка не рвётся посреди: d1 / d2 не крупнее 17% ширины колонки — в неё влезает слово
 * до ~10 букв display-шрифта («КОЛЛЕКЦИИ», «ОФОРМЛЕНИЕ»; Impact — 5–5,8 em). Срабатывает только в узкой
 * колонке: лид сбоку (1025–1440), узкий экран; на остальных ширинах размер по макету (токен -fluid).
 * Со счётчиком справа — за вычетом его места. Модификаторы (--long, --compact, страницы) задают свой
 * размер и не затрагиваются. Слово длиннее 10 букв — см. .page-head__title--long-word ниже.
 * Без container queries — размер по макету, перенос — overflow-wrap ниже.
 */
@supports (width: 1cqi) {
    .page-head__main {
        container-type: inline-size;
    }

    .page-head__heading {
        --vd-fs-d1: min(var(--vd-fs-d1-fluid), 17cqi);
        --vd-fs-d2: min(var(--vd-fs-d2-fluid), 17cqi);
    }

    .page-head__heading:has(> .page-head__count) {
        --vd-fs-d1: min(var(--vd-fs-d1-fluid), calc((100cqi - 56px) * .17));
        --vd-fs-d2: min(var(--vd-fs-d2-fluid), calc((100cqi - 56px) * .17));
    }
}

.page-head__eyebrow {
    font: 600 var(--vd-fs-caption) / 1.3 var(--vd-font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--vd-text-3);
}

.page-head__heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    max-width: 100%;
}

/* overflow-wrap — последний довод для слова длиннее колонки (на min-content не влияет, в отличие от anywhere) */
.page-head__title {
    min-width: 0;
    letter-spacing: .02em;
    overflow-wrap: break-word;
}

.page-head__title:focus {
    outline: none;
}

/* Длинный заголовок («Политика конфиденциальности») — на ступень меньше */
.page-head__title--long,
.page-head--compact .page-head__title {
    font-size: var(--vd-fs-h1);
    line-height: .92;
}

/*
 * Длинное слово («АМБАССАДОРОВ» рядом с лидом): Layout::pageHeadTitle() ставит класс и число букв
 * самого длинного слова (--vd-title-word, больше 10). Кегль — не больше 170% ширины колонки, делённых
 * на число букв (10 букв — те же 17cqi, что у обычного заголовка; 12 букв — 14,2cqi): слово целиком
 * помещается в строку. В широкой колонке (1920, страница без лида) min() оставляет размер по макету.
 */
@supports (width: 1cqi) {
    .page-head__title--long-word {
        --vd-title-fit: calc(170cqi / var(--vd-title-word, 12));
        --vd-fs-d1: min(var(--vd-fs-d1-fluid), var(--vd-title-fit));
        --vd-fs-d2: min(var(--vd-fs-d2-fluid), var(--vd-title-fit));
    }

    .page-head__heading:has(> .page-head__count) .page-head__title--long-word {
        --vd-title-fit: calc((100cqi - 56px) * 1.7 / var(--vd-title-word, 12));
    }

    .page-head__title--long.page-head__title--long-word,
    .page-head--compact .page-head__title--long-word {
        font-size: min(var(--vd-fs-h1), var(--vd-title-fit));
    }
}

/* Без container queries (старые браузеры): длинное слово рядом с лидом — на ступень меньше */
@supports not (width: 1cqi) {
    .page-head--has-lead .page-head__title--long-word {
        font-size: var(--vd-fs-h1);
        line-height: .92;
    }
}

.page-head__count {
    flex: none;
    font: 14px / 1 var(--vd-font-mono);
    color: var(--vd-text-4);
    white-space: nowrap;
}

.page-head__lead {
    min-width: 0;
    font-size: var(--vd-fs-body);
    line-height: 1.6;
    color: var(--vd-text-2);
}

.page-head__lead > * + * {
    margin-top: .6em;
}

/* Лид под заголовком */
.page-head--stacked .page-head__body {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.page-head--stacked .page-head__lead {
    max-width: 760px;
    font-size: var(--vd-fs-lead);
    line-height: 1.55;
}

/* Серая плашка во всю ширину (экран 24 «Помощь») */
.page-head--surface {
    padding-bottom: clamp(40px, 4.44vw, 64px);
    background: var(--vd-surface);
}

.page-head--flush {
    padding-inline: 0;
}

/* ========== 3. Текстовая страница ========== */
/*
 * <header class="page-head">…</header>                       (include/ui/page-head.php)
 * <div class="content-page [content-page--aside]">
 *   <aside class="content-page__aside"><nav class="content-nav">…</nav></aside>   (необязательно)
 *   <div class="content-page__main content">…HTML из редактора…</div>
 * </div>
 * Колонка текста — 760px (.content в styles.css), с боковым меню — 280px + текст (экран 24).
 */
.content-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px clamp(40px, 5vw, 72px);
    align-items: start;
    padding: clamp(40px, 5vw, 72px) var(--vd-gutter) clamp(72px, 8.33vw, 120px);
}

/* Сразу под заголовком страницы — без второго верхнего отступа */
.page-head:not(.page-head--surface) + .content-page {
    padding-top: 0;
}

.content-page--aside {
    grid-template-columns: clamp(200px, 19.44vw, 280px) minmax(0, 1fr);
}

.content-page__aside {
    position: sticky;
    top: 24px;
    min-width: 0;
}

.content-page__main {
    min-width: 0;
}

/* Боковое меню раздела: «РАЗДЕЛЫ» + пункты, текущий — чёрный */
.content-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.content-nav__label {
    padding: 0 16px 14px;
    font: 11px / 1 var(--vd-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vd-text-3);
}

.content-nav__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-nav__link {
    display: block;
    padding: 14px 16px;
    border-radius: var(--vd-radius-m);
    font: 600 14.5px / 1.2 var(--vd-font-text);
    color: var(--vd-ink);
    transition: background-color var(--vd-transition), color var(--vd-transition);
}

.content-nav__link:hover {
    background: var(--vd-chip);
    color: var(--vd-ink);
}

.content-nav__link.is-active,
.content-nav__link[aria-current="page"] {
    background: var(--vd-ink);
    color: var(--vd-white);
}

/* ========== Узкие экраны ========== */
@media (max-width: 1024px) {
    .page-head--has-lead .page-head__body {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .page-head__lead {
        max-width: 640px;
    }

    .content-page--aside {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Меню раздела — строкой чипов над текстом */
    .content-page__aside {
        position: static;
    }

    .content-nav__label {
        padding-inline: 0;
    }

    .content-nav__list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .content-nav__link {
        padding: 12px 16px;
        border: 1px solid var(--vd-line);
        border-radius: var(--vd-radius-pill);
        font-size: 13px;
    }

    .content-nav__link.is-active,
    .content-nav__link[aria-current="page"] {
        border-color: var(--vd-ink);
    }
}

@media (max-width: 767px) {
    .page-head:has(> .page-head__crumbs:not(:empty)) {
        padding-top: 20px;
    }

    .page-head__crumbs:not(:empty) + .page-head__body {
        margin-top: 18px;
    }

    .page-head__main {
        gap: 16px;
    }
}