@charset "UTF-8";
/* =====================================================
   cpage-catalog.css — сетка каталога подчинённых страниц
   Путь: /css2/cpage-catalog.css    Версия: 1.1
   v1.1 (03.08.2026): издательская подача. Сетка на явных колонках
          3/2/1 вместо auto-fill — лид-карточка --lead (первая, самая
          свежая) растягивается на 2 колонки, заголовок крупнее.
          Мета-строка «дата · N мин чтения»: точка-разделитель —
          ::before у __read по соседству с __date (в шаблоне веток нет).
          Типографика: заголовок 800 с лёгким отрицательным трекингом,
          анонс 14px/1.55; отступы карточек увеличены. Разметка —
          стр_прочая.html v1.42, данные — ДанныеПоПрочейСтранице_в_XML
          v1.34.
   v1.0 (03.08.2026): карточки страниц раздела (/blog/ и подобные).
          Подключается по флагу _есть_каталог_страниц только на
          страницах-каталогах. Всё на глобальных токенах all_base —
          тёмная тема автоматом. Селектор карточки усилен до
          .cpage-catalog a.cpage-catalog__card (приём H421: глобальное
          .site a из other-base.css не перебивает ссылку-компонент,
          без !important). */

.cpage-catalog { margin: 26px 0 8px; }

/* ── Сетка: 3 / 2 / 1 колонки; лид занимает две ── */
.cpage-catalog__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cpage-catalog__cell { min-width: 0; }
.cpage-catalog__cell--lead { grid-column: span 2; }

/* ── Карточка ── */
.cpage-catalog a.cpage-catalog__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 22px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cpage-catalog a.cpage-catalog__card:hover {
  border-color: var(--border2);
  box-shadow: var(--scrolled);
  transform: translateY(-2px);
}

/* Карточка вложенного раздела — выделена поверхностью */
.cpage-catalog a.cpage-catalog__card--section { background: var(--surface2); }

/* ── Мета-строка: дата · время чтения · бейдж ── */
.cpage-catalog__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 18px;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--text3);
}
.cpage-catalog__date { font-weight: 600; letter-spacing: .1px; }
.cpage-catalog__read { white-space: nowrap; }
/* Точка-разделитель только когда перед временем чтения стоит дата */
.cpage-catalog__date + .cpage-catalog__read::before {
  content: "·";
  margin-right: 7px;
}
.cpage-catalog__badge {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface3);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* ── Типографика карточки ── */
.cpage-catalog__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.2px;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cpage-catalog__desc {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cpage-catalog__more {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.cpage-catalog__arrow { display: inline-block; transition: transform .15s; }
.cpage-catalog a.cpage-catalog__card:hover .cpage-catalog__arrow { transform: translateX(3px); }

/* ── Лид-карточка: крупнее заголовок и анонс ── */
.cpage-catalog a.cpage-catalog__card--lead { padding: 24px 26px 20px; }
.cpage-catalog__cell--lead .cpage-catalog__title {
  font-size: 22px;
  line-height: 1.22;
  letter-spacing: -.3px;
}
.cpage-catalog__cell--lead .cpage-catalog__desc {
  font-size: 15px;
  -webkit-line-clamp: 3;
}

/* ── Адаптив ── */
@media (max-width: 1100px) {
  .cpage-catalog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cpage-catalog__grid { grid-template-columns: 1fr; gap: 14px; }
  .cpage-catalog__cell--lead { grid-column: auto; }
  .cpage-catalog__cell--lead .cpage-catalog__title { font-size: 18px; }
  .cpage-catalog__cell--lead .cpage-catalog__desc { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cpage-catalog a.cpage-catalog__card, .cpage-catalog__arrow { transition: none !important; }
}