/* ==========================================================================
   DMGroup — catalogue pages (archive, taxonomy, single position)
   Specs from «Каталог» [32:2] and «Карточка» [10:16].
   ========================================================================== */

/* --- catalogue body ----------------------------------------------------- */

.catalog-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 40px 48px;
  max-width: var(--page-max);
  margin-inline: auto;
}
.catalog-body__title {
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--c-text-alt);
}
.catalog-body__lead {
  font-size: 14px;
  line-height: 20px;
  color: var(--c-label);
}

/* --- one category inside the catalogue ---------------------------------- */

.cat-section { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.cat-section__head { display: flex; flex-direction: column; gap: 2px; }
.cat-section__title {
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--c-text-alt);
}
.cat-section__count { font-size: 14px; line-height: 20px; color: var(--c-label); }

.cat-group { display: flex; flex-direction: column; gap: 14px; }
.cat-group__title {
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--c-accent);
}

/* --- card grid: 1360 = 4 x 328 + 3 x 16 --------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

/* --- breadcrumbs -------------------------------------------------------- */

.breadcrumbs {
  font-size: 14px;
  line-height: 20px;
  color: var(--c-label);
}
.breadcrumbs a:hover { color: var(--c-text); }
.breadcrumbs span[aria-hidden] { color: var(--c-dim); padding-inline: 6px; }

/* --- single position ---------------------------------------------------- */

.position-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 48px 48px;
  max-width: var(--page-max);
  margin-inline: auto;
}
.position-layout { display: flex; gap: 48px; align-items: flex-start; }

.position-shot {
  flex: 0 0 480px;
  width: 480px;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 16px;
  background: var(--c-well);
  border-radius: var(--r);
  overflow: hidden;
}
.position-shot img { width: 100%; height: 100%; object-fit: contain; }
.position-shot--empty::after {
  content: "";
  width: 64px; height: 1px; background: var(--c-rule-2);
}

.position-facts { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.position-cat {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--c-accent);
}
.position-title {
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--c-text-alt);
}
.position-price { display: flex; align-items: baseline; gap: 8px; }
.position-price__value {
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--c-text-alt);
}
.position-price__unit { font-size: 16px; line-height: 24px; color: var(--c-label); }

.position-meta { display: flex; gap: 32px; }
.position-meta__item { display: flex; flex-direction: column; gap: 8px; }
.position-meta__label {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--c-label);
}
.position-meta__value { font-size: 16px; line-height: 24px; color: var(--c-text-alt); }

.position-actions { display: flex; align-items: center; gap: 12px; }
.position-actions .btn { padding-block: 12px; }
.position-actions .link { font-size: 14px; line-height: 20px; font-weight: 400; }

.position-copy { display: flex; flex-direction: column; gap: 12px; }
.position-copy__lead { font-size: 16px; line-height: 24px; color: var(--c-text-alt); }
.position-copy__text { font-size: 14px; line-height: 20px; color: var(--c-label); }
.position-copy__note {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--c-label);
}

/* --- pagination --------------------------------------------------------- */

.catalog-pagination { display: flex; gap: 12px; padding-top: 8px; }
.catalog-pagination .page-numbers {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-rule);
  border-radius: var(--r);
  font-size: 14px;
  color: var(--c-muted);
}
.catalog-pagination .page-numbers.current { border-color: var(--c-accent); color: var(--c-accent); }
.catalog-pagination .page-numbers:hover { border-color: var(--c-muted); color: var(--c-text); }

.catalog-empty { font-size: 14px; line-height: 20px; color: var(--c-label); }

/* --- responsive --------------------------------------------------------- */

@media (max-width: 1200px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .catalog-body { padding: 20px 16px 32px; gap: 20px; }
  .catalog-body__title, .cat-section__title { font-size: 28px; line-height: 34px; letter-spacing: -0.3px; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  .position-body { padding: 20px 16px 32px; }
  .position-layout { flex-direction: column; gap: 24px; }
  .position-shot { flex: 0 0 auto; width: 100%; height: 300px; }
  .position-title { font-size: 24px; line-height: 30px; letter-spacing: -0.3px; }
}

@media (max-width: 560px) {
  .card-grid { grid-template-columns: minmax(0, 1fr); }
}