/* =============================================================================================================
   Единые ширины контента (06.11.2026, согласовано по образцу ds/widths.html)
   Во всю ширину — первые экраны, главы-ролики, лента фото, бегущая строка, фоны разделов.
   --w-page 1320 — разделы главных и каталогов, шапка, подвал: боковой отступ --px сам вырастает до этой колонки,
                   поэтому фоны остаются во весь экран, а содержимое — не шире 1320 (раньше тянулось на любой экран).
   --w-media 1040 — фото и видео внутри текста: блоки фото историй, фильмы, таблицы и фото гидов, фото статей.
   --w-text 720  — текст для чтения: рассказ, гиды, статьи, тексты вилл, обычные страницы.
   Подключается последним (inc/setup.php). Откат — убрать подключение.
   ============================================================================================================= */

:root {
  --w-page: 1320px;
  --w-media: 1040px;
  --w-text: 720px;
  --px-min: clamp(20px, 4vw, 64px);
  --px: max(var(--px-min), calc((100vw - var(--w-page)) / 2));
  /* блок шире своей текстовой колонки (фото, фильм, таблица) — 1040 или экран минус поля */
  --w-media-fit: min(var(--w-media), calc(100vw - 2 * var(--px-min)));
}

/* ---------- текст 720 */
.prose { max-width: var(--w-text); }
.post-body { max-width: var(--w-text); }
.cs-story { max-width: var(--w-text); }
.cs-flow .cs-prose { max-width: var(--w-text); }
.g-in { max-width: var(--w-text); }
.vprose { max-width: var(--w-text); }
.sec > .prose:only-child, .post-sec .prose { margin-inline: auto; }

/* ---------- фото и видео 1040 */
.cs-old { max-width: var(--w-media); }
.cs-team--end { max-width: var(--w-media); }
.wv--h:only-child { max-width: var(--w-media); }
.vcalc-in { max-width: var(--w-media); }

/* фильм (YouTube или наш) — не во весь экран, а в рамке 1040 по центру */
.yt--wide { width: 100%; max-width: var(--w-media); margin-inline: auto; }
/* внутри текстовой колонки — выходит из неё ровно до 1040 */
.g-in .yt--wide, .cs-story .yt--wide,
.g-in .cs-pics,
.g-prose .vtable-wrap,
.post-body figure, .post-body p:has(> .post-pic) {
  width: var(--w-media-fit); max-width: none;
  margin-inline: calc((100% - var(--w-media-fit)) / 2);
}
@media (max-width: 720px) {
  .g-in .cs-pics, .g-prose .vtable-wrap, .post-body figure, .post-body p:has(> .post-pic) { width: auto; margin-inline: 0; }
}

/* 09.11.2026 (проверка сайта): у текстовых колонок-сеток (.prose, гиды, рассказ) колонка — по ширине самой колонки,
   иначе фото шире текста (--w-media-fit) растягивало сетку: абзацы статей на ПК были 1061 px вместо 720, на 1024 — за край. */
.prose, .g-in, .cs-story, .cs-flow .cs-prose, .vprose { grid-template-columns: minmax(0, 1fr); }
/* фото внутри пункта списка или цитаты — по ширине текста, без выхода до 1040 (статья о платьях: список распирало за край на 1024) */
.prose ul, .prose ol { grid-template-columns: minmax(0, 1fr); }
.post-body li figure, .post-body li p:has(> .post-pic), .post-body blockquote figure { width: auto; max-width: 100%; margin-inline: 0; }