/* Раздел документов (/docs): главная-справка, рубрики, статьи. */

.docs {
  --docs-text: 760px;
  --docs-toc: 240px;
  --docs-gap: 56px;
  --docs-muted: rgba(10, 12, 0, 0.62);
  --docs-line: rgba(10, 12, 0, 0.12);
  --docs-surface: #f5f5f0;
  /* шапка темы позиционирована поверх страницы (высота до ~180px) — отступаем от неё */
  padding: 220px 0 100px;
}

.docs [hidden] {
  display: none !important;
}

/* ---------- Главная ---------- */

.docs-hub {
  padding-top: 0;
}

.docs-hub__hero {
  padding: 230px 0 56px;
  margin-bottom: 48px;
  background: var(--docs-surface);
  text-align: center;
}

.docs-hub__title {
  font-size: clamp(30px, 5vw, 52px);
  margin-bottom: 12px;
}

.docs-hub__lead {
  max-width: 640px;
  margin: 0 auto 28px;
  color: var(--docs-muted);
}

.docs-search {
  max-width: 640px;
  margin: 0 auto;
}

.docs-search__input {
  width: 100%;
  height: 56px;
  padding: 0 24px;
  border: 1px solid var(--docs-line);
  border-radius: 999px;
  background: #fff;
  font-size: 17px;
  color: var(--title-color);
}

.docs-search__input:focus {
  outline: 2px solid var(--title-color);
  outline-offset: 2px;
}

.docs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}

.docs-card {
  padding: 28px;
  border: 1px solid var(--docs-line);
  border-radius: 16px;
  background: #fff;
}

.docs-card__title {
  font-size: 22px;
  margin-bottom: 14px;
}

.docs-card__title a,
.docs-legal__title {
  color: var(--title-color);
}

.docs-card__list,
.docs-legal__list,
.docs-search-results__list,
.docs-related ul,
.docs-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-card__item,
.docs-card__group {
  padding: 6px 0;
  line-height: 1.4;
}

.docs-card__group {
  margin-top: 6px;
  font-weight: 600;
}

.docs-card__item--nested {
  padding-left: 16px;
}

.docs-card__item a,
.docs-legal__item a,
.docs-related a {
  color: var(--body-color);
}

.docs-card__item a:hover,
.docs-legal__item a:hover,
.docs-related a:hover,
.docs-card__group a:hover {
  text-decoration: underline;
}

.docs-card__group a {
  color: var(--title-color);
}

.docs-legal {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--docs-line);
}

.docs-legal__title {
  font-size: 18px;
  margin-bottom: 12px;
}

.docs-legal__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
}

.docs-legal__item {
  font-size: 15px;
}

.docs-search-results {
  max-width: var(--docs-text);
  margin: 0 auto;
}

.docs-search-results__item {
  padding: 18px 0;
  border-bottom: 1px solid var(--docs-line);
}

.docs-search-results__item a {
  font-size: 18px;
  font-weight: 600;
  color: var(--title-color);
}

.docs-search-results__section {
  display: block;
  font-size: 13px;
  color: var(--docs-muted);
}

.docs-search-results__item p,
.docs-search-results__empty {
  margin: 6px 0 0;
  color: var(--docs-muted);
}

/* ---------- Крошки и заголовок ---------- */

.docs-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 14px;
}

.docs-breadcrumbs li + li::before {
  content: '›';
  margin: 0 8px;
  color: var(--docs-muted);
}

.docs-breadcrumbs a {
  color: var(--docs-muted);
}

.docs-breadcrumbs a:hover {
  color: var(--title-color);
  text-decoration: underline;
}

.docs-title {
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.2;
  margin-bottom: 24px;
  overflow-wrap: anywhere;
}

.docs-lead {
  color: var(--docs-muted);
}

.docs-narrow {
  max-width: var(--docs-text);
}

/* ---------- Сетка статьи ---------- */

.docs-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--docs-text));
  grid-template-areas:
    'head'
    'toc'
    'content'
    'related';
}

.docs-layout__head { grid-area: head; }
.docs-layout__content { grid-area: content; min-width: 0; }
.docs-layout__related { grid-area: related; }
.docs-toc { grid-area: toc; }

@media (min-width: 992px) {
  .docs-layout--toc {
    grid-template-columns: minmax(0, var(--docs-text)) var(--docs-toc);
    column-gap: var(--docs-gap);
    grid-template-areas:
      'head .'
      'content toc'
      'related .';
  }

  .docs-layout--toc .docs-toc {
    align-self: start;
    position: sticky;
    top: 200px; /* ниже липкой шапки темы с кнопкой */
    max-height: calc(100vh - 220px);
    overflow-y: auto;
  }

  /* раскрыт без JS в браузерах с ::details-content */
  .docs-toc__details::details-content {
    content-visibility: visible;
    display: block;
  }

  .docs-toc__title {
    pointer-events: none;
    list-style: none;
  }

  .docs-toc__title::-webkit-details-marker {
    display: none;
  }

  .docs-toc__details {
    border: 0;
    padding: 0;
    border-left: 2px solid var(--docs-line);
  }
}

/* ---------- Оглавление ---------- */

.docs-toc {
  margin-bottom: 24px;
  font-size: 14px;
}

.docs-toc__details {
  border: 1px solid var(--docs-line);
  border-radius: 12px;
  padding: 12px 16px;
}

.docs-toc__title {
  cursor: pointer;
  font-weight: 600;
  color: var(--title-color);
}

.docs-toc__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.docs-toc__item a {
  display: block;
  padding: 5px 0 5px 14px;
  line-height: 1.35;
  color: var(--docs-muted);
}

.docs-toc__item--h3 a {
  padding-left: 28px;
}

.docs-toc__item a:hover {
  color: var(--title-color);
}

/* ---------- Текст статьи ---------- */

.docs-content {
  font-size: 17px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.docs-content > :first-child {
  margin-top: 0;
}

.docs-content h2,
.docs-content h3,
.docs-content h4,
.docs-content h5,
.docs-content h6 {
  margin: 40px 0 12px;
  line-height: 1.3;
  scroll-margin-top: 200px;
}

.docs-content h2 { font-size: 26px; }
.docs-content h3 { font-size: 21px; }
.docs-content h4,
.docs-content h5,
.docs-content h6 { font-size: 18px; }

.docs-content p,
.docs-content ul,
.docs-content ol,
.docs-content blockquote,
.docs-content table {
  margin: 0 0 16px;
}

.docs-content ul,
.docs-content ol {
  padding-left: 24px;
}

.docs-content ul { list-style: disc; }
.docs-content ol { list-style: decimal; }

.docs-content li {
  margin-bottom: 6px;
}

.docs-content a {
  text-decoration: underline;
}

.docs-content hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--docs-line);
}

.docs-content blockquote {
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--docs-surface);
}

.docs-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.docs-content th,
.docs-content td {
  padding: 8px 12px;
  border: 1px solid var(--docs-line);
  vertical-align: top;
}

/* Таблица со скриншотами (сравнения «до/после»): во всю колонку, колонки поровну */
.docs-content table:has(img) {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.docs-content thead:not(:has(th:not(:empty))) {
  display: none; /* пустая шапка таблицы из Obsidian (| | |) */
}

.docs-content td a.docs-zoom {
  display: block;
  margin: 0;
}

.docs-content td img {
  max-height: 60vh;
  margin: 0 auto;
}

/* Картинки: превью в пределах колонки и 70% высоты экрана, клик — оригинал */
.docs-content a.docs-zoom {
  display: inline-block;
  max-width: 100%;
  margin: 8px 0;
  cursor: zoom-in;
  text-decoration: none;
}

.docs-content img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--docs-line);
  border-radius: 8px;
}

.docs-content .docs-gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

.docs-content .docs-gallery br {
  display: none;
}

.docs-content .docs-gallery a.docs-zoom {
  margin: 0;
}

@media (min-width: 576px) {
  .docs-content .docs-gallery a.docs-zoom {
    max-width: calc(50% - 8px);
  }
}

/* ---------- Рубрика и связанные статьи ---------- */

.docs-children__item {
  padding: 18px 0;
  border-bottom: 1px solid var(--docs-line);
}

.docs-children__item a {
  font-weight: 600;
  font-size: 18px;
  color: var(--title-color);
}

.docs-children__item p {
  margin: 6px 0 0;
  color: var(--docs-muted);
}

.docs-related {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--docs-line);
}

.docs-related__title {
  font-size: 18px;
  margin-bottom: 12px;
}

.docs-related li {
  padding: 5px 0;
}

@media (max-width: 767px) {
  .docs {
    padding: 130px 0 64px;
  }

  .docs-hub {
    padding-top: 0;
  }

  .docs-hub__hero {
    padding: 140px 0 40px;
  }

  .docs-content {
    font-size: 16px;
  }
}