/*
 * layout.css — контейнеры, сетки, двухколоночная раскладка.
 *
 * Брейкпоинты фиксированные и одинаковые везде (CLAUDE.md §11):
 *   телефон   — до 599px
 *   планшет   — 600px … 1023px
 *   компьютер — от 1024px
 *
 * В @media стоят литералы: CSS не подставляет переменные внутрь
 * медиазапросов. Значения обязаны совпадать с --nn-bp-* из tokens.css.
 */

/* ---------------------------------------------------------------
 * Контейнер
 * --------------------------------------------------------------- */

.nn-container {
	width: 100%;
	max-width: var(--nn-container-max);
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--nn-container-pad);
	padding-left: var(--nn-container-pad);
}

/*
 * Боковой отступ контейнера растёт на широком экране — как на
 * действующем сайте (20px → 45px). Там переключение стоит на 768px,
 * здесь — на проектном брейкпоинте 600px (CLAUDE.md §11): расхождение
 * осознанное, зафиксировано в docs/handoff-report.md.
 */
@media (min-width: 600px) {

	:root {
		--nn-container-pad: var(--nn-container-pad-wide);
	}
}

.nn-container--narrow {
	max-width: 760px;
}

/* ---------------------------------------------------------------
 * Раскладка страницы
 *
 * Одна колонка на телефоне и планшете, две — на компьютере.
 * Правая колонка есть на всех страницах, кроме главной, и держит
 * место даже пустой: за выбор отвечает nn_child_has_sidebar(),
 * здесь только сетка.
 * --------------------------------------------------------------- */

.nn-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nn-grid-gap);
	padding-top: var(--nn-space-6);
	padding-bottom: var(--nn-space-8);
}

@media (min-width: 1024px) {

	.nn-layout--with-sidebar {
		grid-template-columns: minmax(0, 1fr) var(--nn-sidebar-width);
	}
}

/*
 * На мобильном правая колонка уходит под контент, порядок блоков
 * внутри неё сохраняется — требование приёмки шага 6.
 */
.nn-layout__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--nn-space-5);
}

/*
 * Пустая колонка.
 *
 * Колонка выводится, даже когда слоты молчат: заказчику нужно видеть
 * полосу справа до того, как в ней появятся блоки. Вместо содержимого
 * печатается заглушка.
 *
 * На телефоне и планшете пустую колонку прячем целиком: там она встала
 * бы под содержимым пустой рамкой посреди страницы. Когда слоты начнут
 * что-то выводить, класс --empty исчезнет вместе с заглушкой,
 * и колонка вернётся на узкие экраны сама.
 */
.nn-layout__sidebar--empty {
	display: none;
}

.nn-sidebar-placeholder {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: var(--nn-space-5);
	border: 1px dashed var(--nn-color-border);
	border-radius: var(--nn-radius-md);
	color: var(--nn-color-text-muted);
	font-size: var(--nn-fs-sm);
	text-align: center;
}

@media (min-width: 1024px) {

	.nn-layout__sidebar--empty {
		display: flex;
	}
}

.nn-layout__main {
	min-width: 0;
}

/* ---------------------------------------------------------------
 * Сетка карточек
 *
 * auto-fill с minmax вместо перечисления колонок по брейкпоинтам:
 * сетка сама подстраивается, и её не нужно править при смене
 * ширины контейнера.
 * --------------------------------------------------------------- */

.nn-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nn-grid-gap);
}

@media (min-width: 600px) {

	.nn-grid {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	}
}

/*
 * Один столбец на любой ширине — под широкую карточку списка материалов.
 * Промежуток здесь свой: у действующего сайта между большими карточками
 * 48px, а не 24px, как в сетке.
 */
.nn-grid--single {
	grid-template-columns: 1fr;
	gap: var(--nn-space-7);
}

.nn-grid--wide {
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {

	.nn-grid--wide {
		grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	}

	/* Перебивает правило .nn-grid выше: столбец остаётся один. */
	.nn-grid--single {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------
 * Вертикальный ритм секций
 * --------------------------------------------------------------- */

.nn-section {
	margin-bottom: var(--nn-space-7);
}

.nn-section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nn-space-3);
	margin-bottom: var(--nn-space-5);
}

.nn-section__title {
	margin: 0;
}

/* ---------------------------------------------------------------
 * Утилиты раскладки
 * --------------------------------------------------------------- */

.nn-stack {
	display: flex;
	flex-direction: column;
	gap: var(--nn-space-4);
}

.nn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nn-space-3);
}

/* Прячет элемент, оставляя его в потоке для программ чтения с экрана,
   когда он не нужен визуально на узком экране. */
@media (max-width: 599px) {

	.nn-hide-phone {
		display: none;
	}
}

@media (min-width: 1024px) {

	.nn-hide-desktop {
		display: none;
	}
}