/* Каталог «Техкарты по предметам и классам» (экран catalog макета) и посадочные
   страницы предмета, класса и пары предмет×класс. Карточки, чипы, пилюли и
   строки — из cabinet.css; здесь только раскладка строк каталога и списков. */

/* Заголовок карточки: h2 и подпись под ним (в макете margin 4px 0 0).
   Класса у h2 может не быть — тест SEO-страницы ждёт голый <h2>…</h2>. */
/* Строка предмета: название слева, пилюли классов справа */
.tk-subject-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.tk-subject-row__grades {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tk-subject-row__note {
  text-align: right;
  text-wrap: pretty;
}

/* Строка с подписью вместо пилюль: название в одну строку, переносится подпись */
.tk-subject-row--note > .tk-strong {
  white-space: nowrap;
}

/* Вступление посадочной страницы: лид, кнопки, подпись */
.tk-intro {
  display: grid;
  gap: 16px;
  justify-items: start;
}

/* Темы уроков: название + кнопка «создать по этой теме» */
.tk-topics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.tk-topic {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font: 400 15px/1.5 var(--font-body);
  color: var(--ink);
}

.tk-topic__title {
  flex: 1 1 260px;
  min-width: 0;
  text-wrap: pretty;
}

/* Список учебников */
.tk-umk {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.tk-umk li {
  padding: 10px 0;
  border-top: 1px solid var(--hairline-soft);
  font: 400 14px/1.5 var(--font-body);
}

/* Пример документа: остальные этапы — в <details>, кнопка-summary исчезает,
   когда таблица раскрыта */
.tk-details summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
}

.tk-details summary::-webkit-details-marker {
  display: none;
}

.tk-details[open] summary {
  display: none;
}

/* Компактный призыв в конце каталога: текст слева, кнопка справа */
.tk-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.tk-cta-row p {
  margin: 0;
  max-width: 760px;
  text-wrap: pretty;
}

.tk-cta-row .tk-btn {
  flex-shrink: 0;
}

/* Подпись мелким под кнопками */
.tk-intro .tk-caption {
  margin-top: -4px;
}

@media (max-width: 1023px) {
  .tk-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .tk-subject-row {
    flex-wrap: wrap;
  }

  .tk-subject-row__grades {
    justify-content: flex-start;
  }

  .tk-subject-row__note {
    text-align: left;
  }
}