/*
 * Страница материала: колонка чтения и четыре режима фотографии.
 *
 * ⚠ ПЕРЕПИСАН 14.08.2026. До этого дня страница не носила ни `.v-article`, ни
 * `.v-prose`: текст шёл во всю ширину контейнера и строка выходила 1585 точек
 * при экране 1900. Это нечитаемо — глаз теряет начало следующей строки, — и
 * касалось всех читателей портала, а не только автора в редакторе. Нашлось
 * при разборе пустоты в редакторе (журнал 3.82), разбор — решение
 * `2026-08-14_Страница_материала_по_системе.md`.
 *
 * Правило прежнее: разметка и `data-vg` не меняются, добавляются классы и
 * стили. Величины — токены системы.
 */

/* ─── Каркас без правой полосы ───────────────────────────────────────────────
   Мест `ARTICLE_*` в `ad_slot` не заведено, держать в полосе нечего. Пустая
   полоса в 300 точек отобрала бы четверть ширины ради ничего — так уже вышло
   на странице мероприятия 11.08.2026. Колонка чтения тогда центрируется одна. */
.vg-article--norail {
  grid-template-columns: minmax(0, var(--measure-article));
  /* ⚠ И `justify-items` тоже наш. На узком экране система ставит
     `justify-items:center` — она рассчитывает, что рядом стоит правая полоса,
     и центрирует обе колонки по очереди. У нас колонка одна, и центрирование
     сжимало её по содержимому: 124 точки вместо 358 на телефоне. Поймано
     замером в стенде: на живой странице длинные абзацы сами добирали до края,
     и увидеть это было нельзя. */
  justify-items: stretch;
}

/* Заголовок, дата и лид — по той же мере, что и текст. Обычный блок, не
   элемент грида, поэтому автополя здесь работают как ожидается. */
.vg-material__head { max-width: var(--measure-article); margin-inline: auto; }

/* ─── Полотно чтения ─────────────────────────────────────────────────────────
   `.v-prose` системы ограничивает столбец мерой чтения — и тогда «на всю
   ширину» у фотографии совпадает с «в колонку»: разницы между режимами не
   видно. Это дефект самой системы, в её шаблоне лонгрида `Figure` с
   `mode="full"` и `mode="column"` рисуются одинаково.

   ⚠ ПОЧЕМУ НЕ ГРИД С ДОРОЖКАМИ. Первая редакция раскрывала столбец гридом с
   именованными линиями (`full-bleed` через крайние дорожки) — приём известный
   и красивый. Он ломает обтекание: `float` у элемента грида не действует, и
   снимки «слева»/«справа» переставали обтекаться совсем. Поймано замером,
   а не глазами: разметка и классы при этом правильные.

   Поэтому столбец остаётся обычным блоком меры чтения — обтекание работает, —
   а «на всю ширину» выходит за него отрицательными полями.

   ⚠ ШИРИНУ КОЛОНКЕ ЗАДАЁТ ДОРОЖКА ГРИДА, а не `margin-inline:auto` у самой
   колонки. Первая редакция центрировала её автополями — и колонка сжималась
   по содержимому: у элемента грида автополя отменяют растягивание. На живой
   странице этого не было видно, потому что абзацы длинные и сами добирали до
   меры; на коротком тексте колонка вышла 138 точек вместо 684. Поймано
   замером в стенде, а не глазами. Центрирование делает сама сетка
   (`justify-content:center` в CSS системы). */

/* Насколько широким бывает «на всю ширину».

   Величина не с потолка: это ширина каркаса лонгрида целиком — колонка чтения
   плюс зазор плюс правая полоса. Появятся рекламные места `ARTICLE_*` — снимок
   не вылезет за полосу, потому что мера та же самая.

   Второе слагаемое ограничения — окно за вычетом полей страницы: на узких
   экранах каркас шире окна, и без этого снимок уехал бы за край. */
.v-article {
  --vg-full: min(
    calc(var(--measure-article) + var(--s-48) + 300px),
    calc(100vw - 2 * var(--grid-margin, 32px))
  );
}

/* ─── Четыре режима фотографии ───────────────────────────────────────────────
   `full` — за колонку текста, во всю ширину каркаса;
   `column` — по колонке текста;
   `left` / `right` — обтекание, снимок уходит вбок и текст течёт рядом.

   `50%` в отступе — половина КОЛОНКИ (отступ считается от ширины родителя),
   поэтому формула центрирует широкий снимок относительно текста без знания
   ширины страницы. */
.v-prose > .v-figure--full,
.v-prose > [data-vg-block="gallery"][data-vg-layout="full"] {
  width: var(--vg-full);
  max-width: none;
  margin-inline: calc(50% - var(--vg-full) / 2);
}

.v-prose > .v-figure--column { max-width: var(--measure-article); }

/* Обтекание. Ширина долей меры, а не в точках: на планшете мера сжимается
   вместе с полосой, и снимок сжимается с ней. */
.v-prose > .v-figure--left,
.v-prose > .v-figure--right { width: 48%; margin-block: var(--s-8) var(--s-20); }
.v-prose > .v-figure--left { float: left; margin-right: var(--s-32); }
.v-prose > .v-figure--right { float: right; margin-left: var(--s-32); }

/* Блок, который не обтекают, начинается ПОД снимком, а не внутри него. */
.v-prose > .v-figure--full,
.v-prose > .v-figure--column,
.v-prose > [data-vg-block="gallery"],
.v-prose > [data-vg-block="divider"],
.v-prose > [data-vg-block="quote"],
.v-prose > [data-vg-block="card"],
.v-prose > [data-vg-block="event"],
.v-prose > h2,
.v-prose > h3 { clear: both; }

/* Подпись под снимком. */
[data-vg="block-photo-caption"] {
  display: block;
  margin-top: var(--s-10);
  font:var(--t-caption-w) var(--t-caption-size)/var(--t-caption-lh) var(--font-text);letter-spacing:var(--t-caption-ls);
  color: var(--text-muted);
}

/* Галерея внутри статьи: ряд равных кадров, число колонок — от ширины места. */
.v-prose > [data-vg-block="gallery"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-12);
  margin-block: var(--s-32);
}
.v-prose > [data-vg-block="gallery"] img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
}

/* Врезка заведения и мероприятия: подпись типа над названием. */
.v-inset__label { display: block; }
.v-inset [data-vg="block-link"],
.v-inset [data-vg="mentioned-link"] { font-weight: 600; }
.v-inset [data-vg="block-link-note"],
.v-inset [data-vg="mentioned-note"] { display: block; margin-top: 2px; font-size: 14px; }

/* Плашка «В этой статье»: врезки в ряд, а не колонкой. */
.v-inthis [data-vg-list="mentioned"] { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.v-inthis > h2 { margin: 0 0 var(--s-16); }

/* ─── Узкий экран ────────────────────────────────────────────────────────────
   Колонка схлопывается (это делает сама система на 1023px), а обтекание
   теряет смысл: в колонке шириной с телефон снимок сбоку оставляет тексту
   несколько слов в строке. Порог 767px — тот же, что у системы для
   `.v-figure--left/right`, чтобы правила не спорили. */
@media (max-width: 767px) {
  .v-prose > .v-figure--left,
  .v-prose > .v-figure--right {
    float: none;
    width: 100%;
    margin-inline: 0;
  }
  .v-prose > [data-vg-block="gallery"] {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

.vg-table-scroll { overflow-x: auto; max-width: 100%; margin-block: var(--s-16); }
.vg-table-scroll .v-table td, .vg-table-scroll .v-table th { min-width: 7em; }