/* /skills/ — каталог скиллов и страницы скиллов.
 * decisions
 * - Отдельный файл, чтобы не пересекаться с правками styles.css в других ветках. Подключается после styles.css и
 *   берёт его токены (--fg, --muted, --rule), колонку 680px, .hero, .hero-sub, .meta-line, .steps, .bare-list, .note.
 * - Каталог — строки с тонкими разделителями, как .partner-deliverables: название слева, текст справа. Без карточек и цвета.
 * - Теги и код — моноширинным, как подсказка в шапке сайта.
 * - Видео на странице скилла с 1024px шире колонки (до 960px), ниже — по ширине колонки.
 * - Страницы раздела только на русском: без автоперехода на /en/ (страниц /en/skills/ нет), EN ведёт на /en/.
 */

.skills-page {
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Каталог ------------------------------------------------------------- */

.skills-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.skills-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}

.skills-row:last-child {
  border-bottom: 1px solid var(--rule);
}

.skills-name {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.skills-name a {
  text-decoration: none;
}

.skills-body p {
  margin: 0 0 8px;
}

.skills-body p:last-child {
  margin-bottom: 0;
}

.skills-meta {
  color: var(--muted);
  font-size: 15px;
}

.skills-body .skills-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* Страница скилла ----------------------------------------------------- */

.skills-page .skill-back {
  margin: 0 0 24px;
  font-size: 15px;
  color: var(--muted);
}

.skills-page .skill-back a {
  text-decoration: none;
}

.skill-video {
  margin: 0;
}

.skill-video video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--rule);
}

.skill-video figcaption {
  margin: 12px 0 0;
}

@media (min-width: 1024px) {
  .skill-video {
    width: 960px;
    margin-left: -140px;
  }

  .skill-video figcaption {
    max-width: 680px;
    margin-left: 140px;
  }
}

.skills-page code {
  font-family: var(--mono);
  font-size: 0.85em;
}

.skill-code {
  margin: 0 0 1.2em;
  padding: 16px 0 16px 16px;
  border-left: 2px solid var(--rule);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}

.skill-code code {
  font-size: inherit;
  white-space: pre;
}

.skill-dl {
  margin: 0;
}

.skill-dl > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}

.skill-dl > div:last-child {
  border-bottom: 1px solid var(--rule);
}

.skill-dl dt {
  font-weight: 500;
}

.skill-dl dd {
  margin: 0;
}

.skills-page .steps li p strong {
  font-weight: 500;
}

@media (max-width: 640px) {
  .skills-row,
  .skill-dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .skill-code {
    font-size: 13px;
  }
}