/* Zubok & Partners — раскладки внутренних страниц.
   Требует styles/tokens.css и styles/base.css, подключённых раньше.

   Здесь только раскладка шести типов страниц из spec §2.4. Компоненты живут
   в base.css под .zp-*; ни одного .zp-* этот файл не переопределяет и ни одного
   токена не заводит заново.

   Дисциплина та же, что у .v-chapters в home.css, где под корневым классом стоят
   все селекторы без исключения: здесь каждое правило начинается с .p-page.
   Без этого «не течёт наружу» — обещание, а не свойство файла: .p-hub__grid
   сам по себе применился бы к чему угодно с таким классом на любой странице,
   в том числе на главной, если бы она когда-нибудь подключила этот файл.
   Префикса .p-* для этого мало: он делает имя редким, а не областью видимости.

     <body class="p-page" data-page="…" data-root="…">
       <main id="main" tabindex="-1" class="p-doc">   ← p-doc | p-hub | p-practice
                                                        p-person | p-article | p-contact

   Токены не переопределяются нигде. Длительности — только var(--dur-*). */

/* ═══ 1. Общая вертикаль внутренней страницы ═══════════════════════════ */

.p-page main {
  display: block;
  padding-block-end: var(--s-9);
}

/* Хлебные крошки и шапка страницы стоят в одном контейнере, поэтому
   у шапки собственного верхнего отступа нет — его даёт .zp-crumbs. */
.p-page .zp-crumbs + .zp-pagehead { padding-block-start: var(--s-6); }

/* ═══ 2. Документ ══════════════════════════════════════════════════════
   The Firm, International Clients, Representative Experience и четыре
   юридических текста: шапка страницы → проза разделами → полоса CTA. */

.p-page .p-doc__body {
  display: grid;
  gap: var(--s-8);
  padding-block-start: var(--s-8);
}

.p-page .p-doc__section {
  display: grid;
  justify-items: start;
  gap: var(--s-5);
}

/* ═══ 3. Концентратор ══════════════════════════════════════════════════
   Services, Insights, Our Team: шапка → сетка карточек → полоса CTA.
   Колонка не уже 20rem: ниже этого названия практик рвутся на четыре строки. */

.p-page .p-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--gap-card);
  padding-block-start: var(--s-8);
}

.p-page .p-hub__group { padding-block-start: var(--s-8); }

.p-page .p-hub__group > .zp-label + .p-hub__grid { padding-block-start: var(--s-5); }

/* ── Ряд людей не обрывается ───────────────────────────────────────────
   Число колонок сетка берёт у ширины экрана, и на 1440 их выходило три.
   Людей в двух разделах Our Team четверо и пятеро — числа, которые на три
   не делятся: четвёртый юрист вставал один и справа оставалась пустая треть
   экрана, у пятого сотрудника было то же самое.

   Поэтому у сетки людей колонок ровно столько, сколько людей: ряд полон
   по определению. Побочно это даёт верную иерархию — четыре карточки юристов
   крупнее пяти карточек сотрудников, и вес разделов читается размером.

   Порог 1200 не выбран, а посчитан: там пятая колонка ещё даёт карточку в 201 px,
   ниже — меньше двухсот, и портрет с именем и должностью в неё не встают.
   Поэтому ниже раскладка переходит на две колонки — те же, что стояли на планшете.
   Тогда лишней остаётся карточка с нечётным номером — пятая: она встаёт по центру
   ряда шириной ровно в колонку. Ряд из одной карточки по центру читается
   как решение, прижатый влево — как обрыв.

   Правило берёт только сетки людей. Концентраторы Services и Insights набраны
   .zp-tile, и их auto-fill остаётся нетронутым. Ни одного нового токена:
   ширина одинокой карточки считается из процентов и --gap-card. */

@media (min-width: 1200px) {
  .p-page .p-hub__grid:has(> .zp-person:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .p-page .p-hub__grid:has(> .zp-person:nth-child(5):last-child) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .p-page .p-hub__grid:has(> .zp-person) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-page .p-hub__grid:has(> .zp-person:nth-child(odd):last-child) > .zp-person:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: calc((100% - var(--gap-card)) / 2);
  }
}

/* ═══ 4. Практика ══════════════════════════════════════════════════════
   Восемь страниц services/*: шапка → лид → подтемы → врезка → связанные
   практики → CTA. Подтемы Banking разложены по пяти именованным группам,
   поэтому группа — самостоятельный блок, а не заголовок внутри списка. */

.p-page .p-practice__body {
  display: grid;
  gap: var(--s-8);
  padding-block-start: var(--s-8);
}

.p-page .p-practice__group {
  display: grid;
  gap: var(--s-4);
}

/* Врезка-оговорка — один компонент, один образец (канон interfaces.md).
   На документе она лежит в .p-doc__section с justify-items: start и садится
   по своему тексту: замерено 560 px на пяти страницах. На практике её обёртка —
   .p-practice__group, у которой по умолчанию растяжка, и та же врезка выходила
   на 1320 px при абзаце в 493. Ширину коробки задаёт текст, а не колонка. */
.p-page .p-practice__group > .zp-note { justify-self: start; }

.p-page .p-practice__related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--gap-card);
}

/* ═══ 5. Человек ═══════════════════════════════════════════════════════
   Четыре профиля our-team/*: портрет слева, текст справа. Пять на семь
   долей — та же пропорция, что у героя главной. */

.p-page .p-person__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--s-7) var(--gutter);
  padding-block-start: var(--s-8);
}

.p-page .p-person__text {
  display: grid;
  justify-items: start;
  gap: var(--s-5);
}

/* Пропорцию портрета задаёт раскладка, а не исходник снимка. Снимок Габриэля
   почти квадратный (2560 × 2558), у трёх остальных кадр 3 : 4, и четыре
   страницы одного типа показывали портрет разной формы: замерено 540 × 540
   против 540 × 719. Правило `.zp-person .zp-photo` из base.css сюда не достаёт —
   на профиле .zp-photo прямой ребёнок .p-person__layout, а не карточки
   человека. Пропорция та же, 4 / 5; нового токена не заводим. */
.p-page .p-person__layout > .zp-photo { aspect-ratio: 4 / 5; }

@media (max-width: 1023px) {
  .p-page .p-person__layout { grid-template-columns: minmax(0, 1fr); }
  /* Портрет во всю ширину колонки на планшете читается как обложка,
     а не как карточка: ограничиваем его шириной текста. */
  .p-page .p-person__layout > .zp-photo { max-inline-size: 24rem; }
}

/* ═══ 6. Статья ════════════════════════════════════════════════════════
   Десять страниц insights/*: категория → заголовок → тело → связанная
   практика → CTA. Мера строки — на .zp-article из base.css. */

.p-page .p-article__body { padding-block-start: var(--s-8); }

.p-page .p-article__foot {
  max-width: var(--measure);
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-6);
  border-block-start: var(--border) solid var(--hairline-dark);
}

/* ═══ 7. Контакт ═══════════════════════════════════════════════════════
   Факты и карта слева, форма справа. Форма шире фактов: одиннадцать полей
   ТЗ 9 в узкой колонке встают в один столбец и уводят кнопку за экран. */

.p-page .p-contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--s-8) var(--gutter);
  padding-block-start: var(--s-8);
}

/* Ряды формы. Со снятием вариантных классов главной (.v-form, .v-field--wide,
   .v-field--pair живут в home.css, который эта страница не подключает) ушла
   не только ширина полей, а сама раскладка рядов: одиннадцать полей вставали
   одиннадцатью рядами по 756 px, вдвое шире меры 493. Контакты — единственная
   страница, где что-то заполняют, и её форма обязана вставать как форма главной.

   Ряды считает .zp-fields — группа полей внутри формы, для этого и заведённая
   в base.css §10: три дорожки поля (подпись / ввод / подстрочник) берутся
   у неё через subgrid, и кромки контролов в ряду совпадают при подписях разной
   длины. Колонок две, а не четыре, как на главной: колонка формы здесь 756 px
   против 1284 px на главной, и на четырёх колонках подпись «Estimated
   transaction or dispute value» рвалась бы на четыре строки. */

.p-page .p-contact__layout .zp-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Описание дела — во всю ширину: это единственное поле, которому есть что
   делать с шириной, и на половине колонки textarea теряет смысл. Класса
   на нём нет намеренно — ширина следует из того, что внутри textarea,
   а не из пометки, которую можно забыть проставить. */
.p-page .p-contact__layout .zp-fields > .zp-field:has(textarea) {
  grid-column: 1 / -1;
}

@media (max-width: 1023px) {
  .p-page .p-contact__layout { grid-template-columns: minmax(0, 1fr); }
}

/* Тот же порог, что у формы главной: ниже 768 пара полей в ряду перестаёт
   помещаться подписями, и ряд складывается в столбец. */
@media (max-width: 767px) {
  .p-page .p-contact__layout .zp-fields { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ 7. Графический слой ══════════════════════════════════════════════
   Разграфка разделов — единственное, что осталось в page.css от графического
   слоя: сам кадр и всё вокруг него живут в base.css §14, потому что шапка
   страницы одна на все типы, а разделы — свойство типа.

   Здесь раньше стояли адреса гильошных плит по [data-page]. Плиты отменены
   (см. base.css §14); страницы несут фотографию, и адрес снимка стоит
   в разметке, как у всякой картинки. */

/* ── Разграфка разделов ────────────────────────────────────────────────
   Дизайн-система 2.5 первым приёмом называет разграфку: строение даётся
   волосяными линиями на общей подложке, без заливок и ящиков. На внутренних
   странницах разделы стояли на одном воздухе — на документе из девяти
   разделов правая половина экрана уходила в пустоту на тысячу пикселей
   прокрутки, и линия здесь не украшение, а единственное, что эту половину
   занимает.

   Линия идёт на весь контейнер, а не по мере строки: мера держит текст,
   разграфка держит страницу. Слева на линии — латунная марка в 48 px:
   она и отмечает начало раздела, и не даёт линии читаться границей таблицы.

   Промежуток считается вместе с зазором сетки: 64 зазора + 64 отступа =
   128, нижняя граница полосы 128–160, назначенной системой (2.4) на стык
   секций десктопа. */

/* Только прямые дети тела страницы. Вложенные разделы — десять подтем
   «What we handle» на international-clients — линии не получают: раздел стоит
   на justify-items: start и сжимается по содержимому, поэтому у каждой вложенной
   линия вышла бы своей длины, и десять рваных отрезков читались бы браком печати.
   Вложенные разделены воздухом, как и были; линия во всю ширину остаётся
   признаком раздела верхнего уровня, и иерархия от этого только видна. */
.p-page:has(.zp-pagehead > .zp-photo) .p-doc__body > .p-doc__section + .p-doc__section,
.p-page:has(.zp-pagehead > .zp-photo) .p-practice__body > .p-practice__group + .p-practice__group {
  position: relative;
  padding-block-start: var(--s-8);
  border-block-start: var(--border) solid var(--hairline-dark);
}

.p-page:has(.zp-pagehead > .zp-photo) .p-doc__body > .p-doc__section + .p-doc__section::before,
.p-page:has(.zp-pagehead > .zp-photo) .p-practice__body > .p-practice__group + .p-practice__group::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--border) * -1);
  inset-inline-start: 0;
  inline-size: var(--s-7);
  block-size: var(--border);
  background-color: var(--brass-500);
}

/* У статьи разделов нет — есть подзаголовки внутри одного .zp-article.
   Разграфка идёт по ним и по мере строки: тело статьи и есть колонка чтения,
   тянуть линию на весь контейнер здесь не за чем. Первый подзаголовок линии
   не получает — над ним уже стоит разделитель шапки. */
.p-page:has(.zp-pagehead > .zp-photo) .zp-article > h2 {
  position: relative;
  padding-block-start: var(--s-6);
  border-block-start: var(--border) solid var(--hairline-dark);
}

.p-page:has(.zp-pagehead > .zp-photo) .zp-article > h2:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.p-page:has(.zp-pagehead > .zp-photo) .zp-article > h2:not(:first-child)::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--border) * -1);
  inset-inline-start: 0;
  inline-size: var(--s-7);
  block-size: var(--border);
  background-color: var(--brass-500);
}