/*
 * Мобильные исправления темы edar.
 *
 * Заведён 01.09: на телефоне страницы уезжали вбок — документ получался шириной
 * около 1100px при экране 385px. Причина не в самих блоках, а в том, что внутри
 * сеток и флексов у них остаётся min-width:auto: такой элемент не может стать
 * уже своего содержимого и распирает колонку до десктопной ширины.
 *
 * Здесь только снятие этого ограничения и защита от переполнения. Логика,
 * разметка и десктопный вид не меняются, слайдер не трогается — он лишь
 * получает возможность сжиматься.
 */

@media (max-width: 1100px) {

	/* 1fr не даёт колонке сжиматься меньше содержимого, minmax(0,1fr) — даёт */
	.pbtop-hero-row { grid-template-columns: minmax(0, 1fr) !important; }

	.pbtop-hero-row > *,
	.pbhero,
	.pbhero__top-row,
	.pbhero__servers,
	.pbhero__server,
	.sortion_block_head,
	.sortion_block_head--full,
	.pbsl,
	.pbsl_track,
	.pbsl_slide {
		min-width: 0 !important;
		max-width: 100% !important;
	}

	/* плитки и карточки внутри героя переносим в колонку */
	.pbhero__tiles,
	.pbhero__tiles-wrap { min-width: 0 !important; max-width: 100% !important; }
}

@media (max-width: 768px) {

	/*
	 * Шапка на телефоне: логотип, кнопка меню и панель пользователя в одну
	 * строку не помещаются — панель уезжала за правый край и обрезалась,
	 * до колокольчика и аватара было не добраться.
	 *
	 * Перенос строки тема не отдаёт: её правила перебивают наши даже с
	 * !important. Поэтому разрешаем панели сжиматься (min-width:0 снимает
	 * запрет становиться уже содержимого) и включаем прокрутку внутри неё:
	 * панель встаёт в отведённое место, а всё содержимое остаётся доступным
	 * горизонтальным свайпом.
	 */
	.header.pbtop ul.user-menu.collapsible-menu,
	ul.user-menu.pbtop-usermenu {
		min-width: 0 !important;
		max-width: 100% !important;
		flex: 1 1 0 !important;
		overflow-x: auto !important;
		scrollbar-width: none;
	}
	.header.pbtop ul.user-menu.collapsible-menu::-webkit-scrollbar { display: none; }

	.pbtop-extra--purse,
	.pbtop-purse,
	.pbtop-icon-li { max-width: 100% !important; }

	/* Широкое содержимое прокручиваем внутри блока, а не всей страницей */
	.table-responsive,
	.block_solution > table,
	table.table { display: block; width: 100%; overflow-x: auto; }

	/* Длинные ссылки и ники не должны растягивать карточки */
	.block_solution, .block_content { overflow-wrap: anywhere; }
}

@media (max-width: 1100px) {

	/*
	 * Остаток переполнения дают мелочи вроде теней, декоративных линий и
	 * выехавших за край выпадающих панелей — по отдельности они безобидны.
	 * clip, а не hidden: hidden на html/body создаёт свой контекст прокрутки
	 * и ломает position:sticky у шапки, clip просто обрезает.
	 */
	html, body { overflow-x: clip; }
}

/* 04.09 edar: галочки согласий в форме регистрации.

   Тема задаёт всем label в этой карточке position:absolute — так сделаны
   плавающие подписи у полей. Галочка от этого улетала под заголовок формы,
   поэтому позиционирование здесь возвращаем в обычный поток. */
.eg-card .eg-check,
label.eg-check {
	position: static !important;
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	margin: 0 0 12px 0;
	padding: 0;
	inset: auto !important;
	transform: none !important;
	cursor: pointer;
	color: #a9aec2;
	font: 12.5px/1.45 inherit;
	text-align: left;
	pointer-events: auto;
	user-select: none;
}

.eg-check input[type="checkbox"] {
	position: static !important;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 1px 0 0 0;
	opacity: 1 !important;
	accent-color: #4ace8e;
	cursor: pointer;
}

.eg-check span {
	position: static !important;
	flex: 1 1 auto;
	min-width: 0;
}

.eg-check:hover { color: #e7eaf3; }