/* ==========================================================================
   Сертификаты — макет 1:2774 (1920×2802).

   Замеры из Figma (координаты внутри фрейма экрана):
     1:2789 Centered Title Wrapper  340 / 273 / 1240×176, gap 16
     1:2792 Certificates Grid        40 / 497 / 1840×1204, 4 колонки, gap 32
     1:2794 Certificate Card              436×586, padding 24, radius 24
     1:2795 Certificate Preview           388×388 (квадрат), radius 8
     1:2848 Pagination container   848 / 1751 / 225×37
   ========================================================================== */

.certs {
  /*
   * Отступ сверху нулевой: зазор 48 px между описанием (низ 449) и сеткой
   * (верх 497) уже даёт padding-bottom самой .page-head.
   * Снизу до тёмной панели подвала в макете 190 px (--section-gap),
   * из которых 64 px — собственный padding-top .site-footer.
   */
  padding-block: 0 calc(var(--section-gap) - var(--space-64));
}

/* --- Шапка экрана ----------------------------------------------------------
   Общий .page-lead рассчитан на широкое описание во всю колонку. Здесь по
   макету он серый (text_grey), шириной 758 px и отбит от заголовка на 16,
   а не на 24. Правка общая по компоненту не годится — другие страницы
   используют тот же класс со своими размерами, поэтому область действия
   ограничена архивом сертификатов. */

.post-type-archive-ag_certificate .page-lead {
  max-width: 758px;
  margin-top: var(--space-16);
  color: var(--color-text-muted);
}

/* --- Сетка карточек --------------------------------------------------------
   1840 = 4×436 + 3×32. */

.certs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-32);
}

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

.cert-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  /* 8 px — единственный радиус такой величины на экране (нода 1:2795),
     в токенах темы его нет: между --radius-sm (4) и --radius-md (12). */
  border-radius: 8px;
  background: var(--color-bg);
  overflow: hidden;
}

.cert-card__preview img { width: 100%; height: 100%; object-fit: cover; }

.cert-card__placeholder {
  display: flex;
  width: 96px;
  height: 96px;
  color: var(--color-border);
}

.cert-card__placeholder svg { width: 100%; height: 100%; }

/* Info 1:2796 — заголовок и подпись, зазор 8. */
.cert-card__body { display: flex; flex-direction: column; gap: var(--space-8); flex: 1 1 auto; }

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

.cert-card__issuer {
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text-muted);
}

/* --- Ниже 1920 px ----------------------------------------------------------
   Мобильных и планшетных кадров в макете нет — раскладка ниже принята
   вёрсткой, см. «Дыры макета» в _figma/00-INDEX.md. */

@media (max-width: 1400px) { .certs__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .certs__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-24); } }
@media (max-width: 600px)  {
  .certs__grid { grid-template-columns: 1fr; }
  .certs .ag-pagination { flex-wrap: wrap; }
}

/* --- Телефон: размеры, не попавшие в блоки выше ---------------------------- */
@media (max-width: 600px) {
  .cert-card__title { font-size: var(--fs-18); }
  .cert-card__placeholder { width: 64px; height: 64px; }
}