/* ==========================================================================
   Общее для внутренних страниц: хлебные крошки, шапка раздела, пагинация,
   таблицы, фильтр-пилюли.

   Макет: крошки на y=222 (16 Medium серым), заголовок раздела на y=273
   (48 Medium), описание под ним (24 Regular).
   ========================================================================== */

/* Шапка кончается на 190 (`Header top section` 153 + 37), крошки в макете
   стоят на 222 — значит отступ страницы ровно 32. Раньше здесь было 16:
   недостающие 17 отдавала себе шапка своим нижним падингом. */
.page-head {
  padding-block: var(--space-32) var(--space-48);
}

.breadcrumbs {
  margin-bottom: var(--space-32);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-16);
  color: var(--color-text-muted);
}

.breadcrumbs__item { display: flex; align-items: center; gap: var(--space-8); }
.breadcrumbs__item a { transition: color var(--dur-fast) var(--ease-out); }
.breadcrumbs__item a:hover { color: var(--color-brand); }
/* Текущая крошка в макете синяя на всех экранах (проверено пипеткой по
   рендерам корзины, «О компании» и карточки объекта: #4867BF), а дефисы
   между звеньями — того же серого, что и ссылки, #757575. */
.breadcrumbs__item [aria-current] { color: var(--color-brand); }
.breadcrumbs__sep { color: inherit; }

.page-title {
  font-size: var(--fs-48);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-48);
}

/* В макете заголовок кончается на 58, лид начинается на 74 — отбивка 16,
   а не 24 (ноды 1:2498 «Партнёрам», 1:2668 «Доставка», 1:1803 «О компании»). */
.page-lead {
  /* Ширина лида у каждого экрана своя (1240 на «Партнёрам», 758 на «Доставке»
     и «Сертификатах»), поэтому она переменная: страничный файл переопределяет
     `--page-lead-width`, а не борется за специфичность с этим правилом. */
  max-width: var(--page-lead-width, 1240px);
  margin-top: var(--space-16);
  font-size: var(--fs-24);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-24);
}

.page-head--center {
  text-align: center;
}

/* `Centered Title Wrapper` в макете всюду 1240 (ноды 1:2498 «Партнёрам»,
   1:2668 «Доставка», 1:2789 «Сертификаты») и центрирован. Ужимают текст до
   758 только «Доставка» и «Сертификаты» — это их локальные переопределения,
   базовая ширина остаётся 1240.

   Крошки при этом НЕ центрируются: на всех трёх рендерах они стоят у левого
   края контейнера, x=40. */
.page-head--center .page-lead { margin-inline: auto; }
.page-head--center .page-title { max-width: 1240px; margin-inline: auto; }

/* --- Пагинация -------------------------------------------------------------
   Макет 1:2848 (сертификаты) и 1:1927 (объекты) — одна и та же ноды-группа:
   `< 1 2 3 4 ... 12 >`, всё синим 24 Medium. Активная страница не залита,
   а обведена рамкой 1 px в квадрате 37×37 с радиусом 4. Между стрелками и
   числами 16, между числами 8; от сетки — 50. */

.ag-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-top: 50px;
}

.ag-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand);
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-24);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.ag-pagination a.page-numbers:hover { opacity: .7; }

.ag-pagination .page-numbers.current {
  width: 37px;
  height: 37px;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-sm);
}

/* Общий gap равен 8, а до стрелок в макете 16 — недостающие 8 добираем
   собственным отступом стрелок. */
.ag-pagination .prev { margin-right: var(--space-8); }
.ag-pagination .next { margin-left: var(--space-8); }

.ag-pagination .prev svg,
.ag-pagination .next svg { display: block; width: 12px; height: 14px; }

/* --- Таблица ---------------------------------------------------------------
   Макет: шапка серым 20 Regular, строки разделены линией. */

.ag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
}

.ag-table th {
  padding: var(--space-16) var(--space-24);
  text-align: left;
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

.ag-table td {
  padding: var(--space-24);
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: top;
}

.ag-table tr:last-child td { border-bottom: 0; }

.ag-table__panel {
  padding: var(--space-32);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
  overflow-x: auto;
}

/* --- Секция внутренней страницы ------------------------------------------- */

/* Ритм внутренних страниц тот же, что на главной: 190 между секциями,
   то есть по 95 сверху и снизу. С 64 получалось 128 — это ритм экранов
   входа и кабинета (--section-gap-sm), а не контентных страниц. */
.page-section { padding-block: calc(var(--section-gap) / 2); }
.page-section--tight { padding-block: var(--space-32); }

.page-section__title {
  margin-bottom: var(--space-48);
  font-size: var(--fs-48);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-48);
}

/* --- Карточка-плитка ------------------------------------------------------- */

.info-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.info-card__title {
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-32);
}

.info-card__text {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text-muted);
}

.info-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  padding: 17px;
  border-radius: var(--radius-pill);
  background: var(--color-blue-50);
  color: var(--color-brand);
}

.info-card__icon svg { width: 48px; height: 48px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

@media (max-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .page-title { font-size: var(--fs-32); }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* --- Телефон ----------------------------------------------------------------
   Мобильного макета нет: шкала ужимается на шаг-два, отступы шапки
   страницы — вдвое. Паддинги секций считаются от --section-gap и ужаты
   токеном в variables.css. */
@media (max-width: 700px) {
  .page-head { padding-block: var(--space-24); }
  .page-title { font-size: var(--fs-28); letter-spacing: var(--ls-28); }
  .page-lead { font-size: var(--fs-18); }

  .page-section__title { font-size: var(--fs-32); letter-spacing: var(--ls-32); }

  .info-card__title { font-size: var(--fs-24); letter-spacing: var(--ls-24); }
  .info-card__icon { width: 56px; height: 56px; padding: var(--space-12); }
  .info-card__icon svg { width: 32px; height: 32px; }

  .ag-pagination .page-numbers { font-size: var(--fs-18); }
}