/**
 * Layout-примитивы: контейнер, секции, грид. Вся композиция строится
 * через CSS Grid/Flexbox — без абсолютного позиционирования и без
 * отрицательных отступов.
 */

.ls-container {
	width: min(100% - (var(--ls-container-pad) * 2), var(--ls-container));
	margin-inline: auto;
}

.ls-section {
	padding-block: var(--ls-section-pad);
}

.ls-section--warm {
	background: var(--ls-color-paper-warm);
}

.ls-grid {
	display: grid;
	gap: var(--ls-gap);
}

.ls-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ls-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ls-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
	.ls-grid--3, .ls-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.ls-grid--2, .ls-grid--3, .ls-grid--4 { grid-template-columns: 1fr; }
}

.ls-flex {
	display: flex;
	gap: var(--ls-gap);
}

.ls-flex--between {
	justify-content: space-between;
	align-items: center;
}

.ls-flex--wrap { flex-wrap: wrap; }
.ls-flex--column { flex-direction: column; }

/* Аккуратная асимметрия секций: смещение колонки вниз через align-self
   и положительный отступ — без negative margin и magic z-index. */
.ls-offset-down {
	align-self: start;
	margin-block-start: clamp(0px, 4vw, var(--ls-space-2xl));
}

.ls-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}