/* blocks.css — оформление блоков статьи. Пара к js/blocks.js.

   Лежит отдельным файлом по той же причине, по которой отдельно вынесен сам
   blocks.js: одни и те же блоки рисует и просмотр статьи, и предпросмотр
   в редакторе. Разъедутся стили — разъедется предпросмотр с результатом.

   .article-heading и .article-body остаются в article.css: они были там
   раньше и относятся к колонке текста, а не к блокам как таковым. */

/* ---- Встроенные ссылки [[slug|текст]] ---- */

.wiki-link {
    color: #1a5fb4;
    text-decoration: none;
    border-bottom: 1px solid rgba(26, 95, 180, 0.35);
    transition: border-color 0.2s ease, color 0.2s ease;
}
.wiki-link:hover {
    border-color: #1a5fb4;
}

/* Красная ссылка — на статью, которой ещё нет. Так принято в вики: сразу
   видно, что тут дырка в содержании и её можно закрыть. */
.wiki-link--missing {
    color: #b42318;
    border-bottom-color: rgba(180, 35, 24, 0.35);
    border-bottom-style: dashed;
}
.wiki-link--missing:hover {
    border-color: #b42318;
}

/* ---- Крошки и подпись статьи ---- */

.article-meta {
    text-align: center;
    margin-bottom: 30px;
}

.article-breadcrumbs {
    font-size: 13px;
    color: #999999;
    margin-bottom: 6px;
}
.article-breadcrumbs a {
    color: #666666;
    text-decoration: none;
}
.article-breadcrumbs a:hover {
    color: #1a1a1a;
}

.article-meta-line {
    font-size: 13px;
    color: #999999;
}
.article-meta-line a {
    color: #666666;
    text-decoration: none;
    border-bottom: 1px solid #dddddd;
}
.article-meta-line a:hover {
    color: #1a1a1a;
    border-color: #1a1a1a;
}

.article-edit-link {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 16px;
    border: 1px solid #cacaca;
    border-radius: 10px;
    font-family: "Archivo Black", sans-serif;
    font-size: 12px;
    color: #666666;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.article-edit-link:hover {
    border-color: #1a1a1a;
    color: #1a1a1a;
}
/* Вторая кнопка в той же строке — «История правок». Обе рисуются подряд,
   поэтому разводим их отступом, а не margin у первой. */
.article-history-link {
    margin-left: 8px;
}

/* Лайк статьи. Той же формы и размера, что «Редактировать» и «История
   правок» рядом: три кнопки в одном ряду должны читаться как ряд, а не
   как две кнопки и значок между ними.

   Отдельным классом, а не общим с .article-edit-link: у лайка есть
   состояния (`is-on`, `is-own`), которых у ссылок быть не может, и
   смешивать их значило бы тащить чужие правила. */
.article-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    margin-left: 8px;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid #cacaca;
    border-radius: 10px;
    font-family: "Archivo Black", sans-serif;
    font-size: 12px;
    color: #666666;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.article-like-btn:hover:not(:disabled) {
    border-color: #d05a5a;
    color: #b03636;
}

/* Уже поставлен. Заливку НЕ делаем: рядом стоят две прозрачные кнопки,
   и залитая читалась бы как «нажми меня», а лайк уже стоит. */
.article-like-btn.is-on {
    border-color: #d05a5a;
    color: #b03636;
}

.article-like-count {
    font-family: Inter, sans-serif;
    /* Число меняется при каждом нажатии; без табличных цифр переход
       «9 → 10» дёргал бы соседнюю кнопку. */
    font-variant-numeric: tabular-nums;
}

/* Своя статья: кнопка показывает число и не нажимается. Гасим курсор
   и насыщенность, но не само число — оно должно остаться читаемым. */
.article-like-btn.is-own {
    cursor: default;
    color: #999999;
}

.article-like-btn:disabled:not(.is-own) { opacity: .5; cursor: default; }

/* ---- Блок image ---- */

/* Высота картинки в тексте статьи — ПОТОЛОК, а не размер.
   ---------------------------------------------------------------------------
   Замерено 25 августа: раньше картинка занимала всю ширину колонки (988px),
   и высота получалась какой придётся — от 549px у широкой до 1755px у
   вертикальной. Шесть таких подряд в «Мытищах» давали полотно, по которому
   надо прокручивать, чтобы дочитать абзац.

   410px — это высота той самой широкой картинки минус четверть (549 × 0.75).
   Число выбрано автором по образцу, а не «на глаз»: он показал картинку,
   которая «всё равно многовата», и назвал, насколько.

   Ширина подстраивается сама (`width: auto`), пропорции сохраняются. */
:root {
    --figure-max-h: 410px;
}

.article-figure {
    margin: 24px 0;
}
.article-figure img {
    /* width: auto, а не 100%: ширину диктует высота и пропорции файла.
       Потолок по ширине оставляем — картинка, вылезшая за колонку, самое
       заметное, что может случиться со статьёй, а стоит он дёшево.
       (Раньше здесь было width: 100%, и колонку, распёртую длинным словом,
       картинка раздувала за собой до 12239px — см. article.css.) */
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--figure-max-h);
    display: block;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}

/* Ряд картинок: подряд идущие встают горизонтально.
   ---------------------------------------------------------------------------
   Раскладывает их blocks.js — он же держит потолок в пять штук в ряд.
   Шестая уходит на следующую строку: при общей высоте ширина делится на
   всех, и на десятке от картинки остаётся полоска.

   `align-items: flex-start` — чтобы подписи разной длины не растягивали
   соседние фигуры по высоте. */
.article-figures {
    display: flex;
    /* НЕ wrap: с переносом картинки не ужимались бы, а просто уезжали
       на следующую строку — то есть ряда бы и не получилось. Здесь они
       остаются в строке и сжимаются вместе, сохраняя пропорции. */
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
}

/* min-width: 0 у фигуры ОБЯЗАТЕЛЕН, иначе ряд не сожмётся.
   Элемент внутри flex по умолчанию имеет min-width: auto и не может стать
   уже своего содержимого, а содержимое здесь — картинка со своей шириной.
   Тот же капкан, что был у .editor-text-column с длинным словом. */
.article-figure {
    flex: 0 1 auto;
    min-width: 0;
}

/* На узком экране ряд из пяти превращается в пять марок. Там переносим:
   лучше пять строк, чем пять полосок. Порог тот же, что у остальной
   вертикальной раскладки. */
@media (max-width: 700px) {
    .article-figures {
        flex-wrap: wrap;
    }
}

/* Одна в ряду ведёт себя как раньше: по левому краю, без попыток
   ужаться под несуществующих соседей. */
.article-figures--one {
    justify-content: flex-start;
}
.article-figure figcaption {
    /* Тем же шрифтом, что и текст статьи: подпись читается вместе с ним,
       и разнобой здесь заметнее всего. Почему не Gotham — см. .article-body
       в article.css. */
    font-family: "Inter", sans-serif;
    margin-top: 8px;
    font-size: 13px;
    color: #999999;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ---- Блок index: секция-список ---- */

.article-index {
    margin: 36px 0;
}

.article-index-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
}

.article-index-title {
    font-family: "Archivo Black", sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #1a1a1a;
}

.article-index-toggle {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #888888;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.article-index-toggle:hover {
    color: #1a1a1a;
    background-color: #f0f0f0;
}

/* auto-fill + minmax: число карточек в строке подбирает сама сетка.
   Считать его в JS, как в лентах на главной, тут незачем — здесь нет
   горизонтальной прокрутки, и обрезанных карточек не бывает. */
/* Сворачивание сделано через max-height, а не display:none, — иначе его
   нельзя анимировать. 4000px — заведомо больше любой реальной секции. */
.article-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    /* Запас под наведение. Карточка поднимается на 4px и отбрасывает тень
       вниз (сдвиг 10px + размытие 24px), а overflow: hidden ниже нужен для
       сворачивания через max-height — и срезал ровно это: подъём сверху и
       тень снизу. Гасим запас равным отрицательным margin, тем же приёмом,
       что у лент на главной (раздел 11): наружу сетка не вырастает. */
    padding: 8px 10px 38px 10px;
    margin: -8px -10px -38px -10px;
    max-height: 4000px;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
}
.article-index.collapsed .article-index-grid {
    max-height: 0;
    opacity: 0;
    /* Запас убираем вместе с содержимым, иначе свёрнутая секция оставит
       после себя пустую полосу в 46px. */
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.article-index-card {
    display: block;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.article-index-card:hover {
    transform: translateY(-4px);
    border-color: #b0b0b0;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.article-index-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    background-color: #f0f0f0;
}
.article-index-caption {
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: center;
}

.article-index-empty {
    grid-column: 1 / -1;
    padding: 24px;
    text-align: center;
    font-size: 14px;
    color: #999999;
    border: 1px dashed #dddddd;
    border-radius: 12px;
}

@media (max-width: 600px) {
    .article-index-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 14px;
    }
    .article-index-title {
        font-size: 17px;
    }
}

/* ---- Подсветка изменений (этап 8, волна 3) ----
   Один механизм на двоих: это видит модератор в очереди и автор правки
   на странице статьи. Сравнение идёт ПО БЛОКАМ — почему не по словам,
   объяснено в blocks.js. */

.diff-block {
    position: relative;
    margin: 14px 0;
    padding: 12px 14px 12px 16px;
    border-left: 4px solid transparent;
    border-radius: 8px;
}

.diff-block--add     { border-left-color: #1f7a3f; background: #eef7f0; }
.diff-block--changed { border-left-color: #b8860b; background: #fdf6e3; }
.diff-block--del     { border-left-color: #b3261e; background: #fdf1f0; }

/* Удалённое — зачёркнутым и приглушённым: его в новой версии нет,
   и спутать его с оставшимся текстом нельзя. */
.diff-block--del > *:not(.diff-tag) {
    text-decoration: line-through;
    opacity: .65;
}

/* Прежняя версия изменённого блока — тоже зачёркнутой, над новой. */
.diff-was {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #d8c88a;
}

.diff-was > * {
    text-decoration: line-through;
    opacity: .65;
}

.diff-tag {
    display: inline-block;
    margin-bottom: 6px;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .75;
}

.diff-block--add     .diff-tag { color: #1f7a3f; }
.diff-block--changed .diff-tag { color: #8a6d1f; }
.diff-block--del     .diff-tag { color: #b3261e; }

/* Пояснение к цветам. Без него подсветка читается как оформление,
   а не как «вот это изменилось». */
.diff-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid #ddd;
    font-size: 13px;
    color: #6b6b6b;
}

.diff-legend-item { display: flex; align-items: center; gap: 6px; }

.diff-legend-item::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.diff-legend-item--add::before     { background: #1f7a3f; }
.diff-legend-item--changed::before { background: #b8860b; }
.diff-legend-item--del::before     { background: #b3261e; }