/* ═══════════════════════════════════════════════
   DIRECTION PAGE
   Страница направления как технический документ:
   пронумерованные разделы на волосяной линейке,
   разное оформление в зависимости от типа содержимого.
   Базовые примитивы (.container, .surface-*, .eyebrow,
   .btn, .hub, .reveal) — из дизайн-системы.
═══════════════════════════════════════════════ */

/* --site-header-h / --spec-nav-h — в tokens.css.
   .spec-nav (липкая навигация по разделам) — в components.css,
   переиспользуется страницами направлений и продуктов. */

/* ── Hero ── */
.spec-hero__inner .eyebrow {
    margin-bottom: 14px;
}
.spec-hero__actions {
    margin-top: 36px;
}

/* ═══════════════════════════════════════════════
   БЛОК РАЗДЕЛА
═══════════════════════════════════════════════ */
.spec-block {
    padding: 72px 0;
    /* Шапку (64px) уже учитывает scroll-padding-top у html в base.css —
       здесь добавляем только высоту липкого меню разделов, иначе сложится дважды. */
    scroll-margin-top: var(--spec-nav-h);
}
.spec-block--light {
    background: var(--c-white);
}
.spec-block--muted {
    background: var(--c-bg);
}
.spec-block--dark {
    /* фон и сетка приходят от .surface-dark / .surface-grid */
    padding: 88px 0;
}
.spec-block--dark .spec-block__inner {
    position: relative;
    z-index: 1;
}
/* ── Шапка раздела: номер + заголовок ── */
.spec-block__head {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
    margin-bottom: 44px;
}
.spec-block__index {
    grid-column: 1;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--c-teal-deep);
    padding-top: 6px;
}
.spec-block--dark .spec-block__index {
    color: var(--c-teal-bright);
}
.spec-block__title {
    grid-column: 2;
    font-size: var(--fs-h2);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.12;
    color: var(--c-ink-1);
    max-width: 26ch;
}
.spec-block--dark .spec-block__title {
    color: #fff;
}
/* раздел без номера (вводный текст) — заголовок занимает всю ширину */
.spec-block__head > .spec-block__title:first-child {
    grid-column: 1 / -1;
}

/* Лид раздела — выровнен по колонке заголовка, но живёт отдельным блоком:
   вводные абзацы встречаются и в разделах без заголовка. */
.spec-block__lede {
    margin: -20px 0 40px 88px;
    max-width: 68ch;
}
.spec-block__lede p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--c-mid);
}
.spec-block__lede p + p {
    margin-top: 16px;
}
.spec-block__lede strong {
    color: var(--c-ink-1);
    font-weight: 600;
}
.spec-block--dark .spec-block__lede p {
    color: rgba(255, 255, 255, 0.62);
}
.spec-block--dark .spec-block__lede strong {
    color: #fff;
}
/* если заголовка не было, шапки нет — компенсировать нечего */
.spec-block__inner > .spec-block__lede:first-child {
    margin: 0 0 40px;
}

/* ═══════════════════════════════════════════════
   CARDS — «термин + пояснение»
═══════════════════════════════════════════════ */
/* У сетки нет ни фона, ни рамки — каждая карточка рисует свой контур целиком,
   а соседние склеиваются отрицательными полями в одну волосяную линию.
   Незаполненная ячейка последнего ряда тогда просто отсутствует: там фон
   секции, без плашки и без обрамления. Работает на любом числе колонок. */
.spec-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.spec-card {
    position: relative;
    overflow: hidden;
    background: var(--c-white);
    padding: 32px 30px 34px;
    margin: -1px 0 0 -1px;
    border: 1px solid var(--c-line);
    transition: background 0.3s var(--ease-out);
}
.spec-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--c-teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.34s var(--ease-out);
}
.spec-card:hover {
    background: var(--c-bg);
}
.spec-card:hover::before {
    transform: scaleX(1);
}
.spec-card__term {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--c-ink-1);
    margin-bottom: 12px;
}
.spec-card__text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-mid);
}
.spec-card__text strong {
    color: var(--c-ink-1);
    font-weight: 600;
}

/* тёмный вариант: термины — технологические идентификаторы, ставим их
   моноширинным, как остальные машинные обозначения на сайте */
.spec-block--dark .spec-card {
    background: var(--c-ink-1);
    border-color: rgba(255, 255, 255, 0.12);
}
.spec-block--dark .spec-card:hover {
    background: var(--c-ink-2);
}
.spec-block--dark .spec-card__term {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--c-teal-bright);
}
.spec-block--dark .spec-card__text {
    color: rgba(255, 255, 255, 0.66);
}
.spec-block--dark .spec-card__text strong {
    color: #fff;
}

/* ═══════════════════════════════════════════════
   CHECKLIST — плотный перечень в две колонки
═══════════════════════════════════════════════ */
.spec-list {
    columns: 2;
    column-gap: 64px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.spec-list__item {
    break-inside: avoid;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--c-line);
}
.spec-list__mark {
    margin-top: 7px;
    width: 6px;
    height: 6px;
    background: var(--c-teal);
}
.spec-list__text {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--c-mid);
}
.spec-list__text strong {
    color: var(--c-ink-1);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════
   SCHEME — стенд со схемой. Главный элемент страницы:
   схемы здесь и есть содержание, им нужна вся ширина.
═══════════════════════════════════════════════ */
.spec-scheme {
    margin: 0;
}
.spec-scheme + .spec-scheme {
    margin-top: 56px;
}
.spec-scheme__stage {
    position: relative;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    padding: clamp(16px, 3vw, 48px);
}
/* индустриальная сетка подложки — та же, что на тёмных поверхностях */
.spec-scheme__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(12, 15, 16, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12, 15, 16, 0.035) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
/* угловые засечки — «чертёжная» рамка */
.spec-scheme__stage::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--c-teal), var(--c-teal)) 0 0 / 14px 1px no-repeat,
        linear-gradient(var(--c-teal), var(--c-teal)) 0 0 / 1px 14px no-repeat,
        linear-gradient(var(--c-teal), var(--c-teal)) 100% 0 / 14px 1px no-repeat,
        linear-gradient(var(--c-teal), var(--c-teal)) 100% 0 / 1px 14px no-repeat,
        linear-gradient(var(--c-teal), var(--c-teal)) 0 100% / 14px 1px no-repeat,
        linear-gradient(var(--c-teal), var(--c-teal)) 0 100% / 1px 14px no-repeat,
        linear-gradient(var(--c-teal), var(--c-teal)) 100% 100% / 14px 1px no-repeat,
        linear-gradient(var(--c-teal), var(--c-teal)) 100% 100% / 1px 14px no-repeat;
    opacity: 0.55;
    pointer-events: none;
}
.spec-scheme__img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}
.spec-scheme__zoom {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-white);
    background: var(--c-ink-1);
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity 0.24s var(--ease-out),
        transform 0.24s var(--ease-out),
        background 0.2s;
}
.spec-scheme__stage:hover .spec-scheme__zoom,
.spec-scheme__zoom:focus-visible {
    opacity: 1;
    transform: translateY(0);
}
.spec-scheme__zoom:hover {
    background: var(--c-teal-deep);
}
.spec-scheme__caption {
    margin-top: 16px;
    padding-left: 20px;
    position: relative;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: var(--c-ghost);
    max-width: 80ch;
}
.spec-scheme__caption::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 12px;
    height: 1px;
    background: var(--c-line-2);
}

/* ═══════════════════════════════════════════════
   PROSE — узкая колонка текста
═══════════════════════════════════════════════ */
.spec-prose {
    max-width: 72ch;
}
.spec-prose--after {
    margin-top: 32px;
}
.spec-prose__lede {
    font-size: 18px;
    line-height: 1.7;
    color: var(--c-ink-1);
    margin-bottom: 24px;
}
.spec-prose p {
    font-size: var(--fs-body);
    line-height: 1.85;
    color: var(--c-mid);
    margin: 0 0 18px;
}
.spec-prose p:last-child {
    margin-bottom: 0;
}
/* хвостовой текст после схемы или списка может содержать свои перечни */
.spec-prose ul,
.spec-prose ol {
    margin: 0 0 18px;
    padding-left: 20px;
}
.spec-prose li {
    font-size: var(--fs-body);
    line-height: 1.8;
    color: var(--c-mid);
    margin-bottom: 8px;
}
.spec-prose strong {
    color: var(--c-ink-1);
    font-weight: 600;
}
.spec-prose a {
    color: var(--c-ink-1);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--c-line-2);
}
.spec-prose a:hover {
    color: var(--c-teal-deep);
    text-decoration-color: var(--c-teal-deep);
}
.spec-block--dark .spec-prose p {
    color: rgba(255, 255, 255, 0.66);
}
.spec-block--dark .spec-prose__lede,
.spec-block--dark .spec-prose strong {
    color: #fff;
}

/* ── Соседние подразделы ── */
/* Подразделов почти всегда меньше, чем колонок в .hub, поэтому переводим
   сетку на тот же принцип, что и карточки выше: контур рисуют сами плитки,
   незанятая ячейка остаётся пустым фоном, а не серой плашкой.
   Правка намеренно ограничена страницей направления — общий .hub не трогаем. */
.spec-siblings .hub {
    grid-auto-rows: minmax(200px, auto);
    gap: 0;
    background: transparent;
    border: none;
}
.spec-siblings .hub-tile {
    margin: -1px 0 0 -1px;
    border: 1px solid var(--c-line);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .spec-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 960px) {
    .spec-block,
    .spec-block--dark {
        padding: 56px 0;
    }
    .spec-block__head {
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 16px;
        margin-bottom: 32px;
    }
    .spec-block__title {
        max-width: none;
    }
    .spec-block__lede {
        margin-left: 60px;
    }
    .spec-list {
        columns: 1;
    }
    .spec-siblings .hub {
        grid-template-columns: repeat(2, 1fr);
    }
    .spec-scheme__zoom {
        opacity: 1;
        transform: none;
        right: 12px;
        bottom: 12px;
    }
}
@media (max-width: 620px) {
    .spec-cards {
        grid-template-columns: 1fr;
    }
    .spec-siblings .hub {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spec-card,
    .spec-card::before,
    .spec-scheme__zoom {
        transition: none;
    }
}