/*
 * Контейнеры контента на ВНУТРЕННИХ страницах БЕЗ авторизации (nologin_main.tpl,
 * body.nologin). Лендинги (new-imain.tpl, main_promo*.tpl) сюда не попадают —
 * у них свой body-класс/шаблон.
 *
 * Цель: визуально совпадать с auth-зоной — те же 1400px и тот же отклик на
 * изменение ширины окна. Стили живут отдельно от auth-layout.css намеренно:
 * семантически это другая зона (легаси DLE-шапка/подвал, не Vue).
 *
 * Модель: одно-слойная.
 *   <header>/<footer> — на 100% ширины viewport (фон тянется по краям, как
 *      раньше). Их геометрию НЕ трогаем.
 *   .container внутри header/footer — «полезная» полоса с капом 1400 и
 *      гаттерами 50px по бокам (width-формула + margin auto).
 *   .main-content-wrapper — та же роль для тела (формула на нём).
 *      Легаси-стили из new_styles.css (max-width 1568, padding 80/80,
 *      min-width 1160) тут перебиваются — иначе двойной гаттер давал
 *      контент уже 1400.
 *   .main-content — остаётся как есть (внутри wrapper, full width, белая
 *      карточка из new_styles.css).
 *
 * Width-формула: `min(1400px, calc(100% - 100px))` даёт ровно тот же визуальный
 * результат, что двухслойная модель auth (outer 50px-padding + inner cap 1400):
 *   ≥1500: контент = 1400 (упирается в кап)
 *   1500-769: контент = 100% - 100px (гаттеры по 50px)
 *   ≤768: контент = 100% (edge-to-edge — отдельный медиа-блок ниже)
 *
 * Селекторы `body.nologin .header > .container` имеют специфичность 0,3,0 и
 * стабильно перебивают `.container { max-width: 1430; padding: 0 15px }` из
 * promo4/style.css (0,1,0).
 *
 * scrollbar-gutter: stable — резерв под скроллбар, чтобы при его появлении
 * layout не «прыгал» и не ломал математику 1400.
 */

html {
	scrollbar-gutter: stable;
}

body.nologin .header > .container,
body.nologin .footer .container,
body.nologin .main-content-wrapper {
	width: min(1400px, calc(100% - 100px));
	max-width: 1400px;
	min-width: 0;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	body.nologin .header > .container,
	body.nologin .footer .container,
	body.nologin .main-content-wrapper {
		width: 100%;
	}
}