/* ==========================================================================
   Реализованные объекты — список. Макет: нода 1:1882 (1920×2682).

   Сама карточка и сетка лежат в front-projects.css (их делит с главной),
   здесь — шапка страницы, фильтр отраслей и пагинация.

   Вертикальный ритм макета, от чего считаются отступы ниже:
     222 крошки (19) → 273 заголовок (58) → 347 описание (68) →
     455 фильтр (48) → 535 сетка (1118) → 1703 пагинация (37) → 1930 подвал.
   ========================================================================== */

/* --- Шапка списка, ноды 1:1921 и 1:1918 -----------------------------------
   Заголовок и описание по центру в колонке 850 px (x=535 при ширине 1920),
   а крошки — по левому краю на x=40. Поэтому page-head--center, но с
   возвращённым выравниванием крошек. */

/* Сверху 32, как у всех внутренних страниц: шапка кончается на 190, крошки
   в макете на 222. Снизу до фильтра 40 (низ описания 415 → фильтр 455). */
.projects-head .page-head {
  padding-block: var(--space-32) 40px;
}

.projects-head .breadcrumbs__list { justify-content: flex-start; }

.projects-head .page-title,
.projects-head .page-lead {
  max-width: 850px;
  margin-inline: auto;
}

/* В макете между заголовком (низ 331) и описанием (верх 347) 16 px,
   а не 24, как на остальных внутренних страницах. */
.projects-head .page-lead { margin-top: var(--space-16); }

/* --- Фильтр отраслей, нода 1:1897 -----------------------------------------
   704×48 по центру: 4 кнопки с шагом 12. Активная залита синим без обводки,
   остальные белые с серой обводкой. Обводка нарисована inset-тенью, а не
   border: в макете у синей и белой кнопки одна высота 48, border добавил бы
   белым лишние 2 px. */

.project-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12);
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-24);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-border-soft);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-20);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-card) var(--ease-out),
              color var(--dur-card) var(--ease-out),
              box-shadow var(--dur-card) var(--ease-out);
}

.filter-pill:hover { box-shadow: inset 0 0 0 1px var(--color-brand); }

.filter-pill.is-active {
  background: var(--color-brand);
  box-shadow: none;
  color: var(--color-text-invert);
}

/* --- Сетка, нода 1:1906 ----------------------------------------------------
   Между фильтром (низ 503) и сеткой 32 px. */

.projects-archive__grid { margin-top: var(--space-32); }

/* От пагинации до тёмной панели подвала в макете 190 px (--section-gap):
   половину даёт сама страница, половину — padding-top подвала. */
.projects-archive {
  padding-bottom: calc(var(--section-gap) / 2);
}

/* --- Ниже 1920 px ----------------------------------------------------------
   Мобильной версии в макете нет, значения ниже — решение вёрстки. */

@media (max-width: 900px) {
  .projects-head .page-head { padding-block: var(--space-24) var(--space-32); }
  .filter-pill { font-size: var(--fs-16); padding: var(--space-8) var(--space-16); }
  .ag-pagination .page-numbers { font-size: var(--fs-20); }
}

@media (max-width: 640px) {
  .project-filter { justify-content: flex-start; }
}