/*
 * Стили, специфичные для страниц статей (не дублируют forum-styles.css).
 * Контент статьи использует класс forum-content + forum-styles.css, как посты форума.
 */

/* ==== Типографика (как changelog, не prose-sm форума) ==== */
#article-body {
    font-size: 1rem;
    line-height: 1.6;
}

#article-body h1 {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

#article-body h2 {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
    font-weight: 700;
    margin-top: 1.75rem;
    margin-bottom: 0.875rem;
}

#article-body h3 {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
    font-weight: 700;
    margin-top: 1.25rem;
    margin-bottom: 0.625rem;
}

#article-body h4 {
    font-size: 1rem !important;
    line-height: 1.35 !important;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

#article-body p:not(.is-empty) {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

#article-body p:empty,
#article-body p:has(> br:only-child),
#article-body p.is-empty {
    line-height: 2px;
    min-height: 2px;
    margin: 0;
    padding: 0;
}

#article-body ul > li,
#article-body ol > li {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

#article-body ul,
#article-body ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#article-body ul > li > p,
#article-body ol > li > p {
    margin: 0;
}

#article-body > :first-child {
    margin-top: 0 !important;
}

/* Статья — на всю ширину колонки (не 95ch как пост форума) */
#article-body.forum-content {
    max-width: none !important;
    overflow: visible !important;
}

/* Все таблицы — на 100% ширины контента */
#article-body .overflow-x-auto,
#article-body div[class*="overflow-x-auto"] {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

#article-body table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* GitBook «card»-таблицы с пустым <thead> */
#article-body thead:not(:has(th:not(:empty))) {
    display: none;
}

/* Иконки в ячейках таблиц (импортированные статьи) */
#article-body td img,
#article-body th img {
    display: inline-block !important;
    vertical-align: middle !important;
    max-height: 1.75rem !important;
    width: auto !important;
    margin: 0 0.15rem !important;
    border-radius: 0 !important;
    float: none !important;
}

/* Якоря заголовков для оглавления */
#article-body h1,
#article-body h2,
#article-body h3 {
    scroll-margin-top: 5.5rem;
}

/* ==== Обложка на странице статьи ==== */
.article-cover-show {
    display: flex;
    justify-content: center;
}

.article-cover-show__image {
    max-width: 48rem;
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
}

/* ==== Оглавление ==== */
.article-toc--sidebar .article-toc__list {
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    padding-right: 0.25rem;
    scrollbar-width: thin;
}

.article-toc__group + .article-toc__group {
    margin-top: 0.5rem;
}

.article-toc__group--level-1 > .article-toc__parent .article-toc__link,
.article-toc__group--level-2 > .article-toc__parent .article-toc__link {
    font-weight: 500;
}

.article-toc__children {
    margin-top: 0.125rem;
    margin-left: 0;
    padding-left: 0.75rem;
    border-left: 1px solid #e5e7eb;
}

.dark .article-toc__children {
    border-left-color: #374151;
}

.article-toc__children .article-toc__group + .article-toc__group {
    margin-top: 0.125rem;
}

.article-toc__children .article-toc__children {
    margin-left: 0;
    padding-left: 0.625rem;
}

.article-toc__link {
    appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
}

.article-toc__link.is-active {
    color: #7c3aed;
    font-weight: 600;
}

.dark .article-toc__link.is-active {
    color: #a78bfa;
}

/* ==== Карточки в списке статей ==== */
.article-list-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    overflow: hidden;
}

.article-list-card__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-list-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}