/* Стили страниц сайта поверх IDS и components/*.css. Стиль — по мотивам bureau.ru
   (ветка bureau, 2026-10-29): широкая колонка, крупный жирный гротеск, один красный акцент,
   цветовые зоны типов работ. Токены — components/tokens.css. */

/* --- Каркас -------------------------------------------------------------------
   Футер прижат к низу: на коротких страницах (пустые разделы, связь) он висел посреди экрана. */
body.ids {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--ids__background);
    color: var(--ids__text);
}

body.ids > main {
    flex: 1 0 auto;
    padding: var(--ids__spacer-l) 0 var(--ids__spacer-xl);
}

/* IDS даёт header/footer общий отступ (page-composition/layout.css) — ширину и поля здесь
   задаёт вложенный .ids__wrapper.L, как у содержимого. */
body.ids > header,
body.ids > footer {
    padding: 0;
}

/* Сплошной текст — свободнее плотности системы (--ids__density: 1.3 задаёт заодно все
   отступы IDS, глобально её не трогаем). */
main p,
main li,
main dd {
    line-height: 1.5;
}

/* Ссылки в тексте — цветом текста с тонким подчёркиванием, как у бюро; наведение — акцентом.
   Синий IDS остаётся только там, где страница не переопределяет. */
.ids main a:not(.btn),
.ids footer a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--site__hairline-strong);
    text-underline-offset: 0.2em;
}

.ids main a:not(.btn):hover,
.ids footer a:hover {
    color: var(--site__accent);
    text-decoration-color: currentColor;
}

/* Цветовая зона на всю страницу (страница типа работ). Перекрашиваются семантические токены
   IDS — поэтому вслед за ними перекрашиваются все компоненты, без правил для каждого. */
[data-zone] {
    --zone: var(--site__zone-default);
}

[data-zone="site"] { --zone: var(--site__zone-site); }
[data-zone="interface"] { --zone: var(--site__zone-interface); }
[data-zone="graphic"] { --zone: var(--site__zone-graphic); }
[data-zone="presentations"] { --zone: var(--site__zone-presentations); }
[data-zone="banner"] { --zone: var(--site__zone-banner); }
[data-zone="icons"] { --zone: var(--site__zone-icons); }

/* Шапка страницы с зоной (страница работы) — на цвете зоны, заодно с цветным блоком кейса под ней:
   одна сплошная плашка от верха окна до задачи. */
body[data-zone] > .site-header {
    background: var(--zone);
}

body[data-zone] > .site-header,
body.is-zone-fill {
    --ids__text: var(--site__on-media);
    --ids__text-caption: rgb(255 255 255 / 92%);
    --ids__link: var(--site__on-media);
    --site__accent: var(--site__on-media);
    --site__heading: var(--site__on-media);
    --site__hairline: rgb(255 255 255 / 25%);
    --site__hairline-strong: rgb(255 255 255 / 55%);
}

body.is-zone-fill {
    --ids__background: var(--zone);
}

/* Зона цвета тега (страница личного проекта): фон — фон тега, текст — его цвета из палитры
   (TagPalette: у светлых тегов текст тёмный, поэтому не белый, как у зон типов). */
[data-zone="tag"] {
    --zone: var(--tag-bg);
}

body[data-zone="tag"] > .site-header,
body[data-zone="tag"] .work__hero {
    --ids__text: var(--tag-text);
    --ids__text-caption: var(--tag-text);
    --ids__link: var(--tag-title);
    --site__accent: var(--tag-title);
    --site__heading: var(--tag-title);
    --site__hairline: color-mix(in srgb, var(--tag-text) 30%, transparent);
    --site__hairline-strong: color-mix(in srgb, var(--tag-text) 60%, transparent);
}

/* Ссылка «к содержимому» — первая в порядке фокуса, видна только в фокусе. */
.skip-link {
    position: absolute;
    left: var(--ids__spacer-s);
    top: var(--ids__spacer-s);
    z-index: 10;
    padding: 0.5em 0.8em;
    border-radius: var(--ids__radius-s);
    background: var(--ids__background);
    transform: translateY(-200%);
}

.skip-link:focus-visible {
    transform: none;
}

/* --- Шапка --------------------------------------------------------------------
   Как у бюро: имя-логотип слева, сразу за ним разделы обычным текстом, текущий раздел
   подчёркнут толстой линией акцента. В IDS .ids__navbar — плавающий
   виджет (position: fixed) — здесь он в обычном потоке. */
.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ids__gap-s) var(--ids__gap-xl);
    padding-top: var(--ids__spacer-s);
}

.site-brand a {
    display: inline-block;
    color: var(--site__heading);
    font-size: 1.15em;
    font-weight: 800;
    letter-spacing: var(--site__heading-tracking);
    text-decoration: none;
}

.site-brand small {
    display: block;
    color: var(--ids__text-caption);
    font-size: 0.8em;
}

.site-header .ids__navbar {
    position: static;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
}

.site-header .ids__navbar ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em 1.1em;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Пункты меню — к правому краю шапки (решение владельца, 2026-10-30); в раскрытом мобильном
   меню — как были, слева. */
@media (width >= 768px) {
    .site-header .ids__navbar ul {
        justify-content: flex-end;
    }

    /* В блоке только кнопка «Меню», а она здесь скрыта: пустой блок с отступом шапки
       не давал пунктам дойти до края. */
    .site-header .site-header__tools {
        display: none;
    }
}

.ids .site-header .ids__navbar li {
    margin: 0;
    padding: 0;
    background: none;
}

.ids .site-header .ids__navbar li::before {
    content: none;
}

.ids .site-header .ids__navbar a {
    display: inline-block;
    padding: 0 0 0.25em;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--ids__text);
    text-decoration: none;
}

.ids .site-header .ids__navbar a:hover {
    color: var(--site__accent);
}

.ids .site-header .ids__navbar .current a {
    border-bottom-color: var(--site__accent);
}

.site-header__tools {
    display: flex;
    align-items: center;
    gap: var(--ids__gap-s);
    margin-left: auto;
    align-self: center;
}

/* Узкий экран с JS (класс .js на <html> ставится в <head> до отрисовки): шапка — одна строка
   «имя · тема · Меню», меню раскрывается кнопкой на всю ширину. Без JS — раскрыто. */
.site-header .site-menu-toggle {
    display: none;
}

@media (width < 768px) {
    .site-header__inner {
        align-items: center;
    }

    .js .site-header .site-menu-toggle {
        display: inline-flex;
    }

    .js .site-header .site-nav {
        display: none;
        order: 3;
        width: 100%;
    }

    .js .site-header.is-menu-open .site-nav {
        display: block;
    }

    /* Открытое меню — вся шапка серая, бледнее серой кнопки «Меню» (её фон — 8% текста).
       В цветной шапке зоны фон и так свой, там не трогаем. */
    .js body:not([data-zone]) > .site-header.is-menu-open {
        padding-bottom: var(--ids__gap-s);
        background: color-mix(in srgb, var(--ids__text) 4%, transparent);
    }

    .js .site-header.is-menu-open .site-menu-toggle {
        background-color: color-mix(in srgb, var(--ids__text) 8%, transparent);
    }

    .js .site-header .site-nav ul {
        flex-direction: column;
        gap: 0;
    }

    .ids.ids .site-header .site-nav a {
        display: block;
        padding: 0.45em 0;
        border-bottom: 0;
    }

    .ids.ids .site-header .site-nav .current a {
        color: var(--site__accent);
        font-weight: 650;
    }
}

/* --- Футер --------------------------------------------------------------------
   Мелкая служебная строка: копирайт, под ним адрес тем же кеглем. */
.site-footer__inner {
    padding-top: var(--ids__spacer-m);
    padding-bottom: var(--ids__spacer-m);
}

.ids .site-footer__copyright {
    margin: 0;
    color: var(--ids__text-caption);
    font-size: 0.85em;
}

/* --- Заголовок страницы ------------------------------------------------------
   Общий для всех разделов: огромный H1 и короткий лид под ним. Размер — как у бюро
   (≈85px на широком экране), на телефоне меньше, чтобы слово не рвалось. */
.ids .page-title {
    margin: 0 0 0.25em;
    font-size: clamp(2.6rem, 9vw, 4.2em);
}

.ids .page-lead {
    max-width: 34em;
    margin: 0 0 var(--ids__spacer-m);
    font-size: 1.2em;
    font-weight: 500;
    line-height: 1.4;
}

/* Лид-фильтр (/work, /projects): категории ссылками внутри фразы лида, число — подписью. */
.lead-filter small {
    color: var(--ids__text-caption);
    font-size: 0.8em;
}

/* Строка ссылок-действий под текстом (404). */
.ids .page-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ids__gap-l);
    font-weight: 600;
}

.page-section {
    margin-top: var(--ids__spacer-xl);
}

.ids .page-section > h2 {
    font-size: 1.9em;
}

.ids .page-section__more {
    margin: var(--ids__spacer-m) 0 0;
    font-weight: 600;
}

/* --- Главная ----------------------------------------------------------------
   Первый экран — утверждение огромным кеглем, как афиша. Ширина строки ограничена, чтобы
   фраза ложилась в 2–3 строки. */
.ids .home-hero h1 {
    max-width: 11ch;
    margin: 0 0 0.3em;
    font-size: clamp(2.8rem, 11vw, 5.4em);
}

.home-hero h1 em {
    color: var(--site__accent);
    font-style: normal;
}

.ids .home-hero__lead {
    max-width: 30em;
    font-size: 1.3em;
    font-weight: 500;
    line-height: 1.4;
}

/* Лид и кнопка письма — одной строкой, кнопка прижата к правому краю; на телефоне — под лидом
   слева (решение владельца, 2026-10-30). */
.home-hero__row {
    display: grid;
    grid-template-columns: minmax(0, 30em) auto;
    justify-content: space-between;
    /* Кнопка стоит на одной базовой линии с последней строкой лида. */
    align-items: last baseline;
    gap: var(--ids__gap-l) var(--ids__spacer-l);
}

@media (width < 640px) {
    .home-hero__row {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }
}

.ids .home-hero__row .home-hero__lead {
    margin: 0;
}

.ids .home-hero__actions {
    margin: 0;
}

/* --- Длинный текст антиквой ----------------------------------------------------
   Как у бюро: заголовки и интерфейс гротеском, то, что читают подряд, — антиквой. */
.ids .prose {
    font-family: var(--site__font-serif);
    font-size: 1.1em;
}

/* Ширину строки ограничивает текст, а не блок: скриншоты в кейсе — на всю колонку. */
.ids .prose :is(p, ul, ol, h2, h3, blockquote) {
    max-width: 36em;
}

.ids .prose p,
.ids .prose li {
    line-height: 1.6;
}

.ids .prose h2,
.ids .prose h3 {
    margin-top: 1.4em;
}

/* --- Информация (src/Web/About/content.php: /about и главная) ------------------
   Фото слева, рядом лид и текст; ниже две колонки «О работе» (со статистикой) и «Интересы». */
.about__intro {
    display: grid;
    /* rem здесь флюидный и на планшете дорастает почти до 30px: 14rem без процентного потолка
       съедали всю ширину, и лид вылезал за экран. */
    grid-template-columns: minmax(0, min(14rem, 32%)) minmax(0, 1fr);
    gap: var(--ids__spacer-l);
    align-items: start;
}

.ids .about__lead {
    font-size: 1.4em;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.ids .about__photo {
    margin: 0;
}

.ids .about__photo img {
    width: 100%;
    height: auto;
    border-radius: var(--ids__radius-m);
}

.about__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--ids__spacer-l);
    margin-top: var(--ids__spacer-l);
}

/* Заголовки колонок — кеглем текста, только жирные, вплотную к тексту (решение владельца, 2026-10-30). */
.ids .about__section h2 {
    margin: 0 0 0.3em;
    font-family: var(--site__font-sans);
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0;
    line-height: inherit;
}

/* Статистика внутри «О работе»: фраза, типы строкой, клиенты строкой — с числом работ. */
.about__stats {
    margin-top: var(--ids__gap-l);
}

.ids .about__stats .taxonomy-nav.inline {
    margin: 0 0 var(--ids__gap-s);
}

/* Фраза про годы и типы — одним абзацем: типы продолжают фразу без переноса строки
   («…создано 31 проект: Сайты 24, Интерфейсы 3»), клиенты — следующим абзацем. */
.about__stats-line {
    margin-bottom: var(--ids__gap-s);
}

.ids .about__stats-line :is(.taxonomy-nav.inline, .taxonomy-nav.inline ul, li) {
    display: inline;
    margin: 0;
}

.ids .about__stats-line .taxonomy-nav.inline li:not(:last-child)::after {
    margin-right: 0.3em;
}

/* В статистике пункты перечисляются через запятую, как в тексте. */
.ids .about__stats .taxonomy-nav.inline ul {
    gap: 0.2em 0.4em;
}

.ids .about__stats .taxonomy-nav li:not(:last-child)::after {
    content: ",";
}

/* Широкий экран — сетка из восьми полуколонок, как у бюро: блок с фото сдвинут
   на половину колонки от края, фото — на колонку, лид и текст — на две. «О работе» и «Интересы»
   ниже — в обычной вёрстке, как остальные секции (решение владельца, 2026-10-30). */
@media (width >= 1024px) {
    .ids .about {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        column-gap: var(--ids__spacer-l);
    }

    .ids .about > * {
        grid-column: 1 / -1;
    }

    .ids .about > .about__intro {
        grid-column: 2 / -1;
    }

    .ids .about .about__intro {
        grid-template-columns: subgrid;
    }

    .ids .about .about__photo {
        grid-column: span 2;
    }

    .ids .about .about__text {
        grid-column: span 4;
    }

    .ids .about .about__lead {
        font-size: 1.7em;
        line-height: 1.25;
        letter-spacing: var(--site__heading-tracking);
    }
}

@media (width < 640px) {
    .about__intro {
        grid-template-columns: 1fr;
        gap: var(--ids__gap-l);
    }

    .ids .about__photo {
        width: 9rem;
    }
}

/* --- Обратная связь ------------------------------------------------------------
   Форма на ширину текста, рядом — прямой адрес (на узком экране — под формой). */
.contact {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr);
    gap: var(--ids__spacer-xl);
    align-items: start;
}

.ids .contact__aside {
    padding-top: 0.4em;
}

.ids .contact__aside h2 {
    margin-top: 0;
    font-size: 1.3em;
}

@media (width < 768px) {
    .contact {
        grid-template-columns: 1fr;
        gap: var(--ids__spacer-l);
    }
}

/* --- Пустые разделы и 404 ----------------------------------------------------
   Цитата-заглушка — крупной антиквой, как эпиграф. */
.ids .empty-quote {
    max-width: 28em;
    margin: var(--ids__spacer-l) 0 0;
    padding: 0;
    border: 0;
    font-family: var(--site__font-serif);
    font-size: 1.5em;
    line-height: 1.4;
}

/* Приглушённый вид — тизер без своей страницы (src/Web/Portfolio/list.php). Готового токена
   приглушённости в IDS нет, поэтому своя переменная. */
:root {
    --muted-opacity: 0.6;
}

.is-muted {
    opacity: var(--muted-opacity);
}

/* Навигация по типам/клиентам (App\Web\Shared\Widget\TypesNavWidget, ClientsNavWidget).
   `.inline` — рубрики под заголовком страницы, как у бюро: колонками мелких подчёркнутых
   ссылок, текущая — жирно. Без модификатора — вертикальный список («Информация»). */
.taxonomy-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ids .taxonomy-nav ul > li {
    margin: 0;
    padding: 0;
}

.taxonomy-nav ul > li::before {
    content: none;
}

.taxonomy-nav__label {
    color: var(--ids__text-caption);
}

/* Фильтр по типу под заголовком страницы — строкой, пункты друг за другом с отступом, базовым
   кеглем и без подписи «По типу:» (решение владельца, 2026-10-30). */
.taxonomy-nav.inline {
    margin: var(--ids__spacer-m) 0 0;
}

.taxonomy-nav.inline ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1.6em;
}

/* Счётчик работ у пункта — подписью, а не текстом наравне с названием. */
.taxonomy-nav small {
    color: var(--ids__text-caption);
}

.taxonomy-nav strong {
    font-weight: 750;
}

/* Пояснение к реестру тизеров — подпись, а не текст наравне с описанием раздела. */
.teaser-note {
    color: var(--ids__text-caption);
}

/* Каркас страницы UI-кита (src/Web/Admin/Kit) — только раскладка самой страницы-витрины.
   Стили демонстрируемых компонентов живут в components/*.css: кит обязан показывать
   то, что реально подключено на сайте, а не собственные особые правила. */

/* Две колонки: контент слева, оглавление справа. Оглавление вторым элементом в разметке
   (см. template.php) и просто оказывается справа при обычном flex-row без .order. */
.kit__layout {
    display: flex;
    align-items: flex-start;
    gap: var(--ids__gap-l);
}

.kit__content {
    flex: 1 1 auto;
    min-width: 0;
}

/* position: sticky держит оглавление на экране при прокрутке длинного кита; ближайший
   скроллящийся предок — сама страница (ни .ids__wrapper, ни main/body не режут overflow),
   поэтому липкость работает без доп. разметки. max-height + overflow-y — на случай, если
   разделов станет больше, чем помещается по высоте вьюпорта. */
.kit__toc {
    position: sticky;
    top: var(--ids__spacer-m);
    flex: 0 0 14em;
    max-height: calc(100vh - var(--ids__spacer-l));
    overflow-y: auto;
}

/* > ul, не ul: правило только для самого верхнего списка разделов — вложенный
   .kit__toc__submenu (kit.js) держит собственную раскладку ниже, без нахлёста правил. */
.kit__toc > ul {
    display: flex;
    flex-direction: column;
    gap: var(--ids__gap-s);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* IDS вешает "⋅ " перед каждым <li> через ::before (components/ids.css) — уместно для
   перечисления, но не для навигации; то же самое уже снято у .taxonomy-nav. Descendant-
   селектор (не только > ul) специально ловит и вложенный .kit__toc__submenu. */
.kit__toc ul > li::before {
    content: none;
}

/* Подменю с заголовками h3 текущего раздела (kit.js, IntersectionObserver) — в разметке
   присутствует у каждого пункта с h3 внутри секции, но видно только у .current. */
.kit__toc__submenu {
    display: none;
    flex-direction: column;
    gap: var(--ids__gap-s);
    margin: var(--ids__gap-s) 0 0 var(--ids__gap-s);
    padding-left: var(--ids__gap-s);
    border-left: 1px solid color-mix(in srgb, var(--ids__text) 12%, transparent);
    list-style: none;
}

.kit__toc__submenu a {
    color: var(--ids__text-caption);
    font-size: 0.9em;
}

.kit__toc li.current > a {
    color: var(--ids__text);
    font-weight: 600;
}

.kit__toc li.current > .kit__toc__submenu {
    display: flex;
}

/* На мобильном сайдбару негде быть: .ids__wrapper и так сжимается до 100% с отступами
   (page-composition/layout.css), колонка в 14em рядом с контентом там нечитаема. Оглавление
   возвращается в обычный поток над разделами и в исходный горизонтальный список — ровно то
   расположение, что было до сайдбара, подменю на такой ширине настолько же не помещается,
   поэтому скрыто целиком, а не просто следует за .current. */
@media (width < 768px) {
    .kit__layout {
        flex-direction: column;
    }

    .kit__toc {
        position: static;
        max-height: none;
        flex: 1 1 auto;
        width: 100%;
        overflow-y: visible;
        order: -1;
    }

    .kit__toc > ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--ids__gap-m);
        margin: var(--ids__spacer-m) 0;
    }

    .kit__toc__submenu {
        display: none !important;
    }
}

.kit__section {
    margin-top: var(--ids__spacer-xl);
    padding-top: var(--ids__spacer-m);
    border-top: 1px solid color-mix(in srgb, var(--ids__text) 12%, transparent);
}

.kit__section-note {
    max-width: 60ch;
    color: var(--ids__text-caption);
}

/* Подпись к примеру внутри кита: что именно показано и когда это применять.
   Кит без подписей превращается в набор картинок, по которому нельзя выбрать. */
.kit__label {
    display: block;
    margin: var(--ids__spacer-m) 0 var(--ids__gap-s);
    color: var(--ids__text-caption);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Демо-площадка: отделяет пример от объяснений вокруг него. */
.kit__demo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ids__gap-m);
    padding: var(--ids__spacer-m);
    border: 1px solid color-mix(in srgb, var(--ids__text) 12%, transparent);
    border-radius: var(--ids__radius-m);
}

.kit__demo.stack {
    flex-direction: column;
    align-items: stretch;
}