/*
 * Страница мероприятий с ИИ-поиском (вариант B А/Б-теста).
 * Макеты: десктоп node 7-1339, мобилка node 7-2662.
 */

.page.changellenge.event {
	max-width: 100vw;
	font-family: "Factor A", sans-serif;
	background-color: #F8F8F8;
	overflow: visible;
	/*
	 * Белая полоса перед футером.
	 *
	 * У футера свой верхний отступ в 46 пикселей, и он лежит снаружи страницы —
	 * в этой полосе просвечивал белый фон документа. Между двумя почти белыми
	 * блоками она заметна меньше, чем на сером каталоге вакансий, но это та же
	 * полоса.
	 *
	 * Растягиваем фон страницы на ту же высоту и на неё же подтягиваем низ:
	 * футер остаётся ровно там, где стоял, а полоса перестаёт быть белой.
	 */
	padding-bottom: 46px;
	margin-bottom: -46px;
}

.events-ai {
	font-family: "Factor A", sans-serif;
	color: #121217;
	/*
	 * Обрезки здесь нет намеренно.
	 *
	 * Раньше на всём блоке стоял overflow-x: clip ради ряда чипов, который
	 * шире экрана. Заодно он срезал свечение под строкой поиска: оно выходит
	 * за край на 15 пикселей, и по бокам получался ровный вертикальный срез.
	 * Запас через overflow-clip-margin положения не спас.
	 *
	 * Обрезку перенесли туда, где перелив и возникает, — на полосу фильтров.
	 */
}

.events-ai__container {
	width: 100%;
	max-width: 1292px;
	padding: 0 16px;
	margin: 0 auto;
}

/* ── Шапка ─────────────────────────────────────────────────────────────── */

/*
 * Шапка и полоса фильтров это одна белая карточка со скруглением на сером фоне
 * страницы: так на макете десктопа и так же на странице вакансий. Скругление
 * задаём здесь сверху, а снизу у полосы фильтров, потому что между ними лежит
 * строка поиска и разорвать их нельзя.
 */
.events-ai__hero {
	background: transparent;
	/* 40px сверху это воздух над белой карточкой, а не внутри неё. */
	padding: 40px 0 0;
}

/*
 * Сама карточка это контейнер: она шириной с контент, а не во всю страницу.
 * Скругление сверху здесь, снизу у полосы фильтров: между ними лежит строка
 * поиска, и разорвать их нельзя.
 */
.events-ai__hero .events-ai__container {
	background: #FFFFFF;
	border-radius: 24px 24px 0 0;
	padding: 40px 40px 0;
}

/* Логотип нужен только там, где нет шапки сайта, то есть на мобильном. */
.events-ai__logo {
	display: none;
}

.events-ai__hero-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}

.events-ai__hero-text {
	max-width: 860px;
}

.events-ai__title {
	font-size: 34px;
	/* Экстражирный, как в макете. Начертание 800 объявлено в stylesheet.css. */
	font-weight: 800;
	line-height: 41px;
	/* Глобальный стиль h1 на сайте включает капс, в макете обычный регистр. */
	text-transform: none;
	margin: 0 0 8px;
}

.events-ai__descr {
	font-size: 16px;
	/*
	 * Обычное начертание, а не светлое: на 300 подзаголовок выглядел бледнее
	 * основного текста страницы и читался как подпись, а не как описание
	 * раздела.
	 */
	font-weight: 400;
	line-height: 21px;
	margin: 0;
}

.events-ai__descr a {
	color: #BD0C1E;
}

/*
 * Свой слой поверх карточек: swiper вешает transform на обёртку чипов, из-за
 * этого блок фильтров получает собственный контекст наложения, и сердечки
 * избранного рисовались поверх раскрытых списков.
 */
.events-ai__filters {
	position: relative;
	z-index: 40;
	/*
	 * clip, а не hidden: обрезает только горизонталь и не превращает блок в
	 * контейнер прокрутки, поэтому раскрытые списки фильтров продолжают
	 * выпадать наружу. Нужно из-за ряда чипов, который шире экрана.
	 */
	overflow-x: clip;
	background: transparent;
	padding: 0;
}

.events-ai__filters .events-ai__container {
	background: #FFFFFF;
	border-radius: 0 0 24px 24px;
	/* Внутри карточки: 24px до фильтров сверху и 32px под ними. */
	padding: 24px 40px 32px;
}

.events-ai__filters .events-filter {
	width: 100%;
}

/*
 * Строка поиска слоем выше полосы фильтров: у `.events-ai__filters` z-index 40.
 *
 * Строка стоит впритык к границе между шапкой и фильтрами, а свечение выходит
 * за неё на 15 пикселей вниз. Полоса фильтров рисует свою непрозрачную белую
 * подложку и лежала выше, поэтому нижняя половина ореола срезалась ровной
 * горизонталью — это и видно как «режется поиск».
 *
 * Поднимаем именно ряд со строкой, а не всю шапку: у шапки внутри лежит ещё и
 * плавающая панель поиска со своим z-index 10000, и собственный слой у шапки
 * запер бы её в новом контексте наложения — панель ушла бы под меню сайта.
 *
 * Выпадающие списки фильтров при этом не страдают: они раскрываются вниз, от
 * строки поиска прочь.
 */
.events-ai__hero .nmp-hero__search-row {
	z-index: 41;
}

/* ── Счётчик и сортировка ──────────────────────────────────────────────── */

.events-ai__body {
	/* Вместе с нижним отступом полосы фильтров (24px) получается 64px до
	 * счётчика и сортировки, как в макете. */
	padding-top: 40px;
	padding-bottom: 24px;
}

.events-ai__toolbar {
	position: relative;
	z-index: 25;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Высота и отступ снизу как у тулбара страницы вакансий. */
	min-height: 48px;
	gap: 16px;
	margin-bottom: 20px;
}

.events-ai__count {
	/* Счётчик это подпись к ленте, а не её заголовок: серый, а не чёрный. */
	color: #626262;
	font-size: 16px;
	font-weight: 400;
	line-height: 21px;
	white-space: nowrap;
}

/* ── Сетка ─────────────────────────────────────────────────────────────── */

.events-ai__list-wrap {
	position: relative;
	/*
	 * Точка отсчёта для высоты карточки: она считается от ширины ленты, см.
	 * `.event-card` в шаблоне карточки. Проценты в grid-auto-rows меряются от
	 * высоты сетки, а нам нужна ширина, поэтому единицы контейнера.
	 */
	container-type: inline-size;
}

.events-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/*
	 * Высота строки равна стороне квадратной картинки: в карточке она занимает
	 * ровно половину ширины, поэтому при колонке в 620px строка это 310px.
	 * Промо занимает две строки и получается почти квадратным, как в макете.
	 */
	/*
	 * Строки считаются по содержимому: высоту задаёт сама карточка. Иначе
	 * разделитель между выдачей и лентой занимал целую строку в 310px и
	 * оставлял огромную дыру.
	 */
	grid-auto-rows: auto;
	grid-auto-flow: row dense;
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Разделитель между выдачей сервиса и обычной лентой */
.events-ai__divider {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #9D9D9D;
	font-size: 16px;
	font-weight: 400;
	line-height: 21px;
	text-align: center;
	padding: 16px 0;
}

.events-ai__divider::before,
.events-ai__divider::after {
	content: "";
	flex: 1 1 0;
	min-width: 24px;
	height: 1px;
	background: #9D9D9D;
}

.events-ai__divider span {
	/* Текст обязан ужиматься: на узком экране он вылезал за край страницы. */
	flex: 0 1 auto;
	max-width: min(640px, 100%);
}

.events-empty {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 40px 0;
}

.events-empty__image {
	width: 200px;
	height: auto;
}

.events-empty__text {
	color: #9D9D9D;
	font-size: 16px;
	line-height: 21px;
	text-align: center;
}

.new-events__load-more {
	display: block;
	height: 1px;
}

@media (max-width: 992px) {
	.events-ai__hero {
		padding: 0;
	}

	/* На узком экране белой карточки нет: шапка идёт во всю ширину. */
	.events-ai__hero .events-ai__container,
	.events-ai__filters .events-ai__container {
		background: transparent;
		border-radius: 0;
		padding: 0 16px;
	}

	.events-ai__logo {
		display: inline-block;
		margin: 32px 0;
	}

	.events-ai__logo svg {
		width: 148px;
		height: auto;
	}

	/* Фильтры остаются наверху всю прокрутку. Отступы как на бою. */
	.events-ai__filters {
		position: sticky;
		top: 0;
		z-index: 30;
		/* Липкая полоса обязана быть непрозрачной, иначе под ней видно
		 * карточки. На узком экране карточки нет, поэтому цвет страницы. */
		background: #F8F8F8;
		border-radius: 0;
		/* Сверху 16px: столько же от строки поиска до фильтров в макете. */
		padding: 16px 0;
		box-shadow: 0 4px 12px rgba(18, 18, 23, 0.06);
	}

	.events-ai__hero-head {
		margin-bottom: 16px;
	}

	.events-ai__title {
		/* 18px по мобильному макету, начертание и регистр те же, что на широком. */
		font-size: 18px;
		line-height: 22px;
	}

	.events-ai__descr {
		font-size: 14px;
		line-height: 18px;
	}

	.events-ai__body {
		padding-bottom: 96px;
	}

	.events-ai__toolbar {
		min-height: 40px;
		margin-bottom: 12px;
	}

	.events-ai__count {
		font-size: 14px;
	}

	.events-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
		gap: 16px;
	}

	.events-ai__body {
		/* Вместе с нижним отступом фильтров (16px) получается 40px. */
		padding-top: 24px;
	}

	.events-ai__divider {
		font-size: 14px;
		line-height: 18px;
		padding: 8px 0;
	}

	.events-ai__divider::before,
	.events-ai__divider::after {
		display: none;
	}
}

@media (max-width: 576px) {
	/* На узком экране шаг сетки на бою 8px. */
	.events-grid {
		gap: 8px;
	}
}