/*
 * Page-layout styles for bsm-main layouts.
 *
 * Three variants:
 *   .bsm-main--wide    : full-width (home, /test-wide/, service maps)
 *   .bsm-main--section : grid 280px sidebar + 1fr content
 *   .bsm-main--detail  : grid 280px sidebar + 1fr content + sticky subnav
 *
 * Page templates use the matching <main> wrapper class; inside they
 * use .bsm-section-layout / .bsm-detail-layout for the grid container.
 *
 * Source: ../files/10_Projects/bsm_company/05_Brand/wp-page-templates.md
 *         sections 4.2-4.4
 *
 * Контейнерная система (v2):
 *   Все layout-контейнеры — .bsm-page-content, .bsm-section-layout,
 *   .bsm-detail-layout — имеют единый max-width: var(--container-max)
 *   и центрированы. Это обеспечивает одинаковые границы контента
 *   на всех типах страниц.
 *
 *   Любой блок внутри .bsm-page-content имеет min-width: 0 — чтобы
 *   grid-колонки не вылезали за пределы родителя (img с большим
 *   natural-width может растянуть grid без этого правила).
 *
 *   Full-width блоки (align="full") вылезают за контейнер через
 *   margin: 0 calc(50% - 50vw).
 */

.bsm-main {
	padding-bottom: 64px;
}

.bsm-main--wide {
	padding: 0 32px 32px;
}

/* Унификация left-padding между layouts: section/detail страницы имеют
 * тот же отступ 32px от окна, что и wide. До этого у .bsm-main--detail
 * не было horizontal padding, и весь первый контент (breadcrumbs, hero,
 * subnav, sidebar, page-content) начинался визуально ближе к левому краю
 * окна — расхождение с wide-страницами (Олег 21.09.2026). Теперь все
 * layouts стартуют от одного left-edge. */
.bsm-main--section,
.bsm-main--detail {
	padding-left: 32px;
	padding-right: 32px;
	padding-bottom: 64px;
}

/* ---- Единый контейнер для всех типов страниц ---- */

.bsm-main--wide > .bsm-page > .bsm-page-content,
.bsm-main--section > .bsm-section-layout,
.bsm-main--detail > .bsm-detail-layout {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	box-sizing: border-box;
}

/* Любой блок внутри контента не должен растягивать родителя */
.bsm-page-content > *,
.bsm-section-layout > *,
.bsm-detail-layout > * {
	min-width: 0;
}

/* ---- Block spacing: типовое расстояние между блоками ----
 *
 * Любой следующий блок внутри .bsm-page-content получает margin-top.
 * Это покрывает:
 *   - bsm-* блоки (cards, feature-list, page-hero, cta, и т.д.)
 *   - стандартные WP-блоки (paragraph, heading, image, list, table, ...)
 *   - любые будущие блоки
 *
 * Источник: files/10_Projects/bsm_company/05_Brand/design/04-library.html
 *   .content-block h2 margin-top: 56px (~ var(--space-12) + чуть-чуть)
 *   и явная «воздушность» между секциями в 04-library.
 *
 * Первый блок — без верхнего отступа (иначе лишний пробел перед первым).
 *
 * Override: любой блок может переопределить margin-top в Inspector
 * (supports.spacing.margin уже включён в каждом bsm-блоке).
 */
.bsm-page-content > * + * {
	margin-top: var(--space-12);   /* 48px */
}

.bsm-page-content > *:first-child {
	margin-top: 0;
}

.bsm-main--section > .bsm-section-layout,
.bsm-main--detail > .bsm-detail-layout {
	/* Horizontal padding убран — sidebar/subnav/breadcrumb-bar и page-hero
	 * inner центрируются одинаково (max-width: var(--container-max), margin:
	 * 0 auto). Если у detail-layout оставить padding 32 sides, sidebar
	 * сдвигается вправо на 32 относительно page-hero inner (Олег 21.09.2026).
	 * Top padding 16 остаётся — даёт воздух между breadcrumbs и grid. */
	padding: 16px 0 0;
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

/* Если в layout нет <aside class="bsm-sidebar"> (явный override через
 * метабокс «Боковое меню — Не показывать»), grid схлопывается в одну колонку.
 * Поддержка :has() — Chrome 105+, Firefox 121+, Safari 15.4+. */
.bsm-main--section > .bsm-section-layout:not(:has(> .bsm-sidebar)),
.bsm-main--detail > .bsm-detail-layout:not(:has(> .bsm-sidebar)) {
	grid-template-columns: 1fr;
}

/* Sidebar column — НЕ стики: в макете (01-detail.html) sidebar скроллится
 * вместе с контентом. Стики только subnav под topnav — чтобы не было
 * конфликта позиций. */
.bsm-main--section > .bsm-section-layout > .bsm-sidebar,
.bsm-main--detail > .bsm-detail-layout > .bsm-sidebar {
	align-self: start;
	margin-top: 12px;
}

/* Content column */
.bsm-main--section > .bsm-section-layout > .bsm-page,
.bsm-main--detail > .bsm-detail-layout > .bsm-page {
	min-width: 0;
	padding-top: 12px;
}

/* ---- Page-hero slot ----
 *
 * На всех layouts используется ОДНА стратегия:
 *
 *   - slot = 100% parent content area (X - padding родителя). НЕ full-bleed,
 *     поэтому hero-inner с max-width: 1200px centered даёт ту же координату,
 *     что у .bsm-page-content (.bsm-page-content тоже centered в той же
 *     content area). На wide нет sidebar → inner просто centered в slot,
 *     совпадает с page-content. На section/detail inner использует свой
 *     grid (280 sidebar + 1fr content) → текст попадает в 1fr-column,
 *     ровно туда же, где .bsm-page-content в .bsm-detail-layout.
 *
 *   - slot bg = var(--surface) + ::before trick расширяет bg на full-width
 *     окна (flat-design белая полоса от края до края на wide/section).
 *     ::before использует 100vw, который безопасен благодаря
 *     `html { overflow-x: clip }` в base.css (фикс horizontal scroll).
 *
 * position: relative обеспечивают stacking context для ::before и ::after
 * элементов hero (accent-top / accent-left). */
.bsm-main--wide > .bsm-page-hero-slot,
.bsm-main--section > .bsm-page-hero-slot,
.bsm-main--detail > .bsm-page-hero-slot {
	width: 100%;
	background-color: var(--surface);
	position: relative;
	margin-bottom: 0;
}

/* Flat-design bg до краёв окна: ::before с width 100vw, расширенный
 * left: calc(50% - 50vw). Это работает на всех layouts:
 *   - wide: slot в parent padding 32, ::before покрывает от 0 до X.
 *   - detail: parent без h-padding, slot = X, ::before всё равно покрывает
 *     от 0 до X (margin-left расчёт даёт 0).
 *
 * z-index: -1 — ::behind slot content, невидим для click событий. */
.bsm-main--wide > .bsm-page-hero-slot::before,
.bsm-main--section > .bsm-page-hero-slot::before,
.bsm-main--detail > .bsm-page-hero-slot::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	background-color: var(--surface);
	z-index: -1;
}

/* На section/detail hero-inner — никаких дополнительных padding/margin
 * не нужно: уже унифицировано через `<main>` padding-left: 32 (см. выше),
 * плюс max-width: container-max + margin auto центрирует inner. Это даёт
 * left-edge hero inner = left-edge .bsm-page-content на wide. На детальной
 * hero text-left и wide page-content-left оба на одной линии (X=1300: 50).
 *
 * НЕ shift-им hero content в 1fr-col через свой grid (.bsm-main--detail
 * .bsm-page-hero-slot > .bsm-page-hero__inner { display: grid; grid-template-columns:
 * 280px 1fr }) — это сдвигало hero от ЛЕВОГО края вниз на 280+32=312px от layout-grid-left,
 * визуально воспринималось как "смещение вправо" от sidebar'а (Олег 21.09.2026).
 *
 * На wide это правило НЕ применяется — там inner default from
 * blocks/page-hero/style.css (max-width 1200, margin auto), что совпадает
 * с .bsm-page-content на wide.
 *
 * Селектор с 4-уровневой вложенностью — явно бьёт specificity любых
 * override в blocks/page-hero/style.css (0,1,0). На .bsm-hero__inner
 * только ДОБАВЛЯЕТ max-width/margin, но НЕ убирает
 * .bsm-hero--fullwidth .bsm-hero__inner = display: grid из
 * blocks/hero/style.css — он со специфичностью 0,2,0, наш override 0,4,0,
 * для разных свойств (max-width vs display), и применяются оба. Это значит
 * .bsm-hero (variant fullwidth) на детальной сохраняет свой text+art grid. */
.bsm-main--section > .bsm-page-hero-slot > .bsm-page-hero > .bsm-page-hero__inner,
.bsm-main--detail > .bsm-page-hero-slot > .bsm-page-hero > .bsm-page-hero__inner,
.bsm-main--section > .bsm-page-hero-slot > .bsm-hero > .bsm-hero__inner,
.bsm-main--detail > .bsm-page-hero-slot > .bsm-hero > .bsm-hero__inner {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* ---- Responsive: stack sidebar above content ---- */

@media (max-width: 900px) {
	.bsm-main {
		padding-top: 24px;
		padding-bottom: 48px;
	}

	.bsm-main--wide,
	.bsm-main--section,
	.bsm-main--detail {
		padding-left: 16px;
		padding-right: 16px;
	}

	.bsm-main--section > .bsm-section-layout,
	.bsm-main--detail > .bsm-detail-layout {
		grid-template-columns: 1fr;
		gap: 16px;
		/* Horizontal padding убран — унификация с десктопом: <main>
		 * даёт padding 16, inner без своего, left-edge контента
		 * совпадает с wide и с full-width bars (topnav, breadcrumbs,
		 * subnav — все стартуют от 16). До этого padding 0 16 давал
		 * +16px сдвиг контента относительно wide (Олег 21.09.2026). */
	}

	.bsm-main--section > .bsm-section-layout > .bsm-sidebar,
	.bsm-main--detail > .bsm-detail-layout > .bsm-sidebar {
		position: static;
		top: auto;
	}
}