/* ============================================================
   Главная страница и страница новостей.
   Язык — docs/DESIGN_SYSTEM.md. Токены и общие рецепты (карточки §9.5,
   сетка §9.6, кнопки §9.12) берутся из design-system.css; новых цветов,
   теней и скруглений здесь нет.

   Раскладка — одобренный макет wp-content-club/mockups/home/v8.html.
   Плитки — готовые части темы (parts/video-list-item, parts/course-card,
   parts/article-list-item, parts/seminar-card), своих карточек у главной нет.

   Перестройка по ширине (решение владельца 2026-10-10). Четыре состояния,
   от широкого к узкому; ширины карточек внутри состояния текут вместе
   с экраном:

     4 колонки  — заголовок блока отдельной колонкой + две карточки в ряд
                  + колонка новостей справа;
     3 колонки  — заголовок уходит внутрь колонки с карточками
                  (две карточки + новости);
     2 колонки  — колонка новостей уезжает наверх (две карточки);
     1 колонка  — телефон: одна карточка в ряд.
   ============================================================ */

/* --- Каркас страницы --- */
.home-wrap {
	padding-top: 32px;
	padding-bottom: var(--spacing-section);
}

/* Заголовок страницы — только для скринридера: на макете его нет,
   но h1 на странице быть обязан. */
.home-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.home-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 290px;
	gap: 48px;
	align-items: start;
}

/* --- Секция: заголовок отдельной колонкой слева (4 колонки) ---
   Пока хватает ширины, заголовок занимает свою колонку; когда страница
   сужается, он уходит внутрь колонки с карточками (шаг ниже).
   Отступы вокруг черты между блоками одинаковые: 48px сверху (margin-top)
   и 48px снизу (padding-top). */
.home-rail {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: 32px;
	padding-top: 48px;
	border-top: 1px solid var(--color-border);
}

.home-rail + .home-rail {
	margin-top: 48px;
}

/* У первой секции ни линии, ни отступа сверху: страница начинается
   с содержимого, верх карточек — на одной линии с шапкой колонки новостей. */
.home-main > .home-rail:first-child {
	border-top: 0;
	padding-top: 0;
}

/* Курсы — первая секция: на 5px больше воздуха сверху. Двойной класс —
   чтобы перевесить правило «у первой секции нет отступа сверху». */
.home-main > .home-rail.home-rail--courses {
	padding-top: 5px;
}

.home-rail__title {
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-size: 38px;
	font-weight: 700;
	line-height: 1.05;
}

.home-rail__all {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 17px;
	font-weight: 300;
}

.home-rail__all a {
	color: var(--color-foreground-muted);
	text-decoration: none;
}

.home-rail__all a:hover {
	color: var(--color-primary);
}

/* --- Плитки ---
   Один зазор (32px) во всех четырёх секциях: у каталога курсов свой зазор
   48px, из-за него ширина карточек расходилась. Карточки курса и семинара
   растянуты на всю ячейку — у всех элементов одна ширина. */
.home-rail__body .video-list,
.home-rail__body .article-list,
.home-rail__body .satway-seminars-grid,
.home-rail__body .swclb-course-grid {
	max-width: none;
	margin: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}

.home-rail__body .swclb-course-card,
.home-rail__body .swclb-seminar-card {
	max-width: none;
}

/* --- Колонка новостей проекта ---
   Прилипает под шапкой: отступ = высота шапки + просвет (32px, как между
   секциями). С админ-панелью WordPress шапка опускается на 32px — без этого
   надпись уезжает под неё. */
.home-news {
	position: sticky;
	top: calc(var(--site-header-height) + 32px);
}

body.admin-bar .home-news {
	top: calc(var(--site-header-height) + 32px + 32px);
}

/* Шапка колонки: надпись слева, «+» редактора справа (по наведению).
   Линия и отступ живут на шапке, а не на надписи. */
.home-news__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-border);
}

.home-news__label {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 400;
	/* Без верхнего просвета строки: верх надписи встаёт на один уровень
	   с верхом первой карточки. */
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.home-news__plate {
	display: block;
	margin-top: 20px;
	padding: 16px 24px;
	border: 1px solid var(--color-border);
	background: var(--color-background-muted);
	font-family: var(--font-heading);
	font-size: 21px;
	font-weight: 400;
	color: var(--color-foreground);
	text-align: center;
	text-decoration: none;
}

.home-news__plate:hover {
	border-color: var(--color-accent);
}

/* --- Новость: дата, заголовок, вводка ---
   Один рецепт на колонку главной (parts/news-item.php) и на страницу /news/. */
.news-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Широкий вариант — две колонки, страница новостей. */
.news-list--wide {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 48px;
	align-content: start;
}

.news-item {
	padding: 16px 0;
	border-bottom: 1px solid var(--color-border-light);
}

.news-item__date {
	margin: 0 0 6px;
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 300;
	color: var(--color-foreground-muted);
}

.news-item__name {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.3;
}

.news-item__name a {
	color: inherit;
	text-decoration: none;
}

.news-item__name a:hover {
	color: var(--color-primary);
}

.news-item__lead {
	margin: 10px 0 0;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-foreground-muted);
}

/* --- Страница новостей --- */
.news-pager {
	margin-top: 40px;
}

.news-pager .page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-heading);
	font-size: 19px;
	font-weight: 300;
}

.news-pager a,
.news-pager span.page-numbers {
	color: var(--color-foreground-muted);
	text-decoration: none;
}

.news-pager a:hover,
.news-pager .page-numbers.current {
	color: var(--color-primary);
}

.news-empty {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 21px;
	color: var(--color-foreground-muted);
}

/* --- Шаг 1 (уже 1240px): заголовок уходит внутрь колонки с карточками —
   3 колонки. Строка «название + Все …» с волосяной линией под ней; линия
   сверху секции и её отступ больше не нужны — иначе над заголовком две черты. --- */
@media (max-width: 1239px) {
	.home-rail {
		display: block;
		padding-top: 0;
		border-top: 0;
	}

	.home-rail__side {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 24px;
		margin-bottom: 16px;
		padding-bottom: 16px;
		border-bottom: 1px solid var(--color-border);
	}

	.home-rail__title {
		margin: 0;
		line-height: 1;
	}
}

/* --- Шаг 2 (уже 1000px): колонка новостей уезжает наверх — 2 колонки --- */
@media (max-width: 999px) {
	.home-grid {
		display: flex;
		flex-direction: column;
		gap: 48px;
		align-items: stretch;
	}

	/* Секции становятся детьми общей колонки и получают порядок:
	   новости первым блоком, дальше видео, курсы, статьи, семинары. */
	.home-main {
		display: contents;
	}

	.home-news {
		position: static;
		order: 1;
	}

	.home-main > .home-rail:first-child {
		order: 2;
	}

	.home-main > .home-rail {
		order: 3;
		margin-top: 0;
	}

	/* Две ячейки, ряд не шире 872px (2 × 420 + зазор) и по центру:
	   без потолка карточки растянуло бы на 600px и больше. */
	.home-rail__body .video-list,
	.home-rail__body .article-list,
	.home-rail__body .satway-seminars-grid,
	.home-rail__body .swclb-course-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 872px;
		margin-left: auto;
		margin-right: auto;
	}

}

/* --- Шаг 3 (телефон, уже 640px): одна карточка в ряд --- */
@media (max-width: 639px) {
	.home-rail__side {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.home-rail__body .video-list,
	.home-rail__body .article-list,
	.home-rail__body .satway-seminars-grid,
	.home-rail__body .swclb-course-grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 440px;
	}

	/* Карточек в блоке по-прежнему две — они встают друг под друга. */
	.news-list--wide {
		grid-template-columns: minmax(0, 1fr);
	}
}