/* Вёрстка для планшетов и раскладушек (iPad, iPhone Duo): 768-1023 px.
   Тема до 1023 px показывает телефонную вёрстку; здесь возвращаем то, что помещается на таком экране.
   Префикс html body: страницы держат свои стили в <style> ниже по коду, и при равной специфичности они бы победили. */
@media (min-width: 768px) and (max-width: 1023px) {

	/* Шапка: «Продажа / Аренда» рядом с логотипом и номер телефона текстом, как на компьютере */
	html body .header__nav {
		display: block;
		position: static;
		width: auto;
		height: auto;
		margin: 0 auto 0 20px;
		padding: 0;
		background: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	html body .header__nav ul {
		display: flex;
		gap: 22px;
		width: auto;
		margin: 0;
		padding: 0;
	}

	html body .header__nav ul li {
		width: auto;
		margin: 0;
	}

	html body .header__nav ul li a {
		font-size: 15px;
		text-align: left;
		white-space: nowrap;
	}

	html body .header__phone {
		margin-left: 0;
	}

	html body .header__phone a:first-child {
		align-items: center;
		gap: 8px;
		font-size: 15px !important;
		font-weight: 500;
		color: #222;
		white-space: nowrap;
	}

	html body .header__phone a:first-child img {
		width: 28px;
		margin: 0;
	}

	/* Кнопки по ширине текста, а не на всю строку */
	html body .tiser__title a.link.max {
		flex: 0 0 auto;
		width: auto;
		padding: 0 40px;
	}

	html body .welcome .cr-quiz-open {
		width: auto;
		padding-left: 40px;
		padding-right: 40px;
	}

	/* Главная: первый экран */
	html body .tiser__title h1 {
		font-size: 46px;
		line-height: 1.1;
	}

	html body .cr-search-box {
		padding-top: 56px;
	}

	html body .cr-search-box__quick-links {
		flex-wrap: nowrap;
		gap: 6px;
	}

	html body .cr-search-box__quick-link {
		padding: 10px 14px;
		white-space: nowrap;
	}

	/* «Почему с нами выгодно»: три колонки не помещались и обрезались справа */
	html body .benefits-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 40px;
	}

	/* Каталог: фильтр в два ряда по три поля, чтобы цена «От / До» и кнопка результата не сжимались */
	html body .ocf-content.category__filter > .ocf-filter {
		flex: 1 1 calc(33.333% - 11px);
		max-width: calc(33.333% - 7px);
	}

	/* Каталог, вид списком: фото слева, описание справа, как на компьютере */
	html body .category__prod.is-list .prodm.view-list-item {
		display: flex;
		align-items: flex-start;
		gap: 24px;
		width: 100%;
	}

	html body .category__prod.is-list .prodm__left {
		flex: 0 0 300px;
		width: 300px;
	}

	html body .category__prod.is-list .prodm__base {
		flex: 1 1 auto;
		min-width: 0;
		padding-top: 0;
	}

	/* Карточка объекта: цена и кнопка заявки в одну строку */
	html body .product__price {
		align-items: center;
		column-gap: 32px;
	}

	html body .product__price > #myModalTrigger.link {
		flex: 0 0 auto;
		width: auto;
		height: 52px;
		margin: 0;
		padding: 0 36px;
	}

	/* Карточка объекта: блок «бесплатная помощь с оформлением» в 2 колонки; в 4 он раздвигал страницу шире экрана */
	html body .product__base > .parent {
		min-width: 0;
		max-width: 100%;
	}

	html body .parent .benefits-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 32px;
	}

	/* Отзывы: на всю ширину, а не в половину страницы */
	html body #testimonial .testimonial-item {
		width: 100%;
	}

	/* Подвал: четыре колонки ссылок, контакты под ними */
	html body .footer__nav {
		flex-wrap: wrap;
	}

	html body .footer__nav-item {
		flex: 0 0 25%;
		width: 25%;
	}

	html body .footer__nav-item:last-child {
		flex: 0 0 100%;
		width: 100%;
	}

	/* Контакты: адрес строкой, под ним почта, два телефона и часы работы в четыре колонки */
	html body .footer__nav-item:last-child ul {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 4px 0;
	}

	html body .footer__nav-item:last-child ul li:first-child {
		grid-column: 1 / -1;
		margin-bottom: 12px;
	}
}

/* Узкая компьютерная вёрстка 1024-1279 (iPad Pro 13 вертикально = 1032, iPad в горизонтали):
   компьютерная сетка тут тесная, поэтому поджимаем шапку и карточку объекта */
@media (min-width: 1024px) and (max-width: 1279px) {

	/* Шапка в одну строку: телефон и «Войти» уходили на вторую */
	html body header .header__logo {
		width: 140px;
	}

	html body header .header__logo img {
		width: 100%;
		height: auto;
	}

	html body header .header__nav {
		margin-left: 20px;
	}

	html body header .header__currency .currency-select {
		margin-right: 12px;
	}

	html body header .header__currency .currency-select::before {
		right: -6px;
	}

	html body header .header__phone {
		gap: 14px;
	}

	html body header .header__phone a:first-child {
		font-size: 15px;
	}

	/* «Войти» остаётся значком */
	html body header .header__phone a.cabinet-header {
		gap: 0;
		font-size: 0 !important;
	}

	/* Карточка объекта: две PDF-кнопки в ряд, кнопки «Поделиться» под ними */
	/* Одинаковый отступ 24 px: фото, PDF-кнопки, «Поделиться» */
	html body .product__img-down_botton {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		margin-top: 24px;
	}

	html body .product__img-down_botton .share-block {
		margin-top: 0;
	}

	html body .product__img-down {
		flex-wrap: nowrap;
		gap: 12px;
		width: 100%;
	}

	html body .product__img-down > a {
		flex: 1 1 0;
		min-width: 0;
		margin: 0;
	}

	/* Кнопка заявки: рядом с ценой, если помещается, иначе под ней ровно по левому краю */
	html body .product__price {
		align-items: center;
		column-gap: 16px;
		row-gap: 16px;
	}

	html body .product__price > #myModalTrigger.link {
		margin-left: 0;
		padding: 0 26px;
	}

	/* Характеристики: длинные подписи («Близость к инфраструктуре») не слипаются со значением */
	html body .product__feature ul li > span:first-child {
		flex: 0 0 58%;
		width: 58%;
		padding-right: 12px;
	}

	html body .product__feature ul li > span:last-child {
		flex: 1 1 auto;
		width: auto;
	}

	/* Подвал: пять колонок шли вплотную («Медицинское обслуживание» упиралось в «Email:») */
	html body .footer__nav > .footer__nav-item {
		box-sizing: border-box;
		padding-right: 20px;
	}

	/* Главная, «Популярная недвижимость»: 4 в ряд, как на компьютере (в 3 последний ряд был неполный) */
	html body .category__cat .cat {
		width: 25%;
	}

	/* Главная, «Почему с нами выгодно»: в 3 колонки текст шёл узким столбиком */
	html body .recommend > .benefits-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 40px;
	}

	/* Слайдеры объектов на главной: цена всегда строкой, кнопка под ней, чтобы карточки были одинаковыми */
	html body .swiper-slide .prod__but {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: baseline;
		row-gap: 14px;
	}

	html body .swiper-slide .prod__but > a.link {
		grid-column: 1 / -1;
		justify-self: start;
		margin: 0;
	}


	/* Каталог: ряд карточек шире контента на 40 px (тема), справа фото выходили за край контента и доходили почти до края экрана.
	   +30 px: слева 20 под отступ от меню, справа 10 под внутренний отступ карточки, фото ровно по краю контента */
	html body .category__prod {
		width: calc(100% + 30px);
	}

	/* Каталог, вид списком: место под кнопками, чтобы описание на них не наезжало */
	html body .category__prod .prodm.view-list-item .prodm__base {
		padding-bottom: 76px;
	}
}

/* 1024-1199: каталог (рядом боковое меню, на контент остаётся ~780 px) */
@media (min-width: 1024px) and (max-width: 1199px) {
	/* Каталог: фильтр в два ряда по три поля, как на планшете: в шесть колонок цена «От / До» и кнопка результата сжимались */
	html body .ocf-content.category__filter > .ocf-filter {
		flex: 1 1 calc(33.333% - 11px);
		max-width: calc(33.333% - 7px);
	}

	/* Каталог плиткой: две карточки в ряд; в три рядом с боковым меню цена и кнопка не помещались */
	html body .category__prod.is-grid .prod {
		width: 50% !important;
	}
}

/* На английском пункты меню длиннее («Property for sale», «Rental Property»): до 1199 телефон тоже значком */
@media (min-width: 1024px) and (max-width: 1199px) {
	html[lang="en"] body header .header__phone a:first-child {
		gap: 0;
		font-size: 0 !important;
	}
}

/* Сенсорные экраны от 1024 (iPad): «Связаться с компанией» в карточке плиткой на компьютере появляется при наведении мыши,
   а место под неё занято всегда; на планшете наведения нет, поэтому кнопку показываем сразу */
@media (min-width: 1024px) and (hover: none) {
	html body .view-grid-item .prod__but .open-oneclick {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/* Иконки соцсетей справа от заголовка объекта не должны наезжать на текст */
@media (min-width: 1024px) and (max-width: 1439px) {
	html body .product__name {
		padding-right: 76px;
	}
}