/* ==========================================================================
   Layout — контейнеры, сетка страницы, брейкпоинты
   Брейкпоинты по ТЗ: 1440 / 1200 / 992 / 768 / 576 / 375
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-6);
}

@media (max-width: 576px) {
	.container { padding-inline: var(--space-4); }
}

main { display: block; }

/* ---- Каркас страницы категории: sidebar + main ---- */
.page-wrap {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-8) var(--space-6) var(--space-16);
	display: grid;
	grid-template-columns: var(--aside-width) minmax(0, 1fr);
	gap: var(--space-10);
	align-items: start;
}

@media (max-width: 992px) {
	.page-wrap {
		grid-template-columns: 1fr;
	}
	.page-wrap > .page-aside { display: none; }
}

@media (max-width: 576px) {
	.page-wrap { padding: var(--space-6) var(--space-4) var(--space-12); }
}

/* ---- Каркас страницы статьи: TOC + content + extra ----
   .article-shell — прямой grid-контейнер для ВСЕХ пяти блоков статьи
   (breadcrumbs, header, toc, entry-content, extra) без промежуточных
   обёрток — это позволяет TOC и extra-колонке растягиваться на всю
   высоту (включая заголовок), а на мобильных — просто менять порядок
   через flex + order, не трогая DOM. */
.article-wrap {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-8) var(--space-6) var(--space-20);
}

.article-shell {
	display: grid;
	grid-template-columns: var(--toc-width) minmax(0, 1fr) var(--aside-width);
	grid-template-rows: auto auto 1fr;
	column-gap: var(--space-10);
	row-gap: 0;
	/* stretch, а не start: .toc/.article-extra занимают grid-row: 1/4 (всю
	   высоту статьи), и только со stretch их собственный блок растягивается
	   на эту высоту — иначе они сжимаются под свой контент и sticky
	   "заканчивается" через пару сотен пикселей, не следуя за скроллом
	   до конца длинной статьи. */
	align-items: stretch;
}

.article-shell > .kama_breadcrumbs { grid-column: 2; grid-row: 1; }
.article-shell > .article-header { grid-column: 2; grid-row: 2; }
.article-shell > .toc { grid-column: 1; grid-row: 1 / 4; }
.article-shell > .entry-content { grid-column: 2; grid-row: 3; }
.article-shell > .article-extra { grid-column: 3; grid-row: 1 / 4; }

@media (max-width: 1200px) {
	.article-shell { grid-template-columns: var(--toc-width) minmax(0, 1fr); }
	.article-shell > .article-extra { display: none; }
}

@media (max-width: 992px) {
	.article-shell {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	.article-shell > .kama_breadcrumbs { order: 1; }
	.article-shell > .article-header { order: 2; }
	.article-shell > .toc { order: 3; }
	.article-shell > .entry-content { order: 4; }
}

@media (max-width: 576px) {
	.article-wrap { padding: var(--space-5) var(--space-4) var(--space-12); }
}

.article-header,
.entry-content {
	max-width: var(--content-max);
}

/* Не допускаем горизонтального overflow страницы от широкого контента (код/таблицы) */
.article-shell, .article-shell * { min-width: 0; }

img, table, pre { max-width: 100%; }