/*
 * [zoomagazin] Блок «Триггеры покупок» — горизонтальный свайп вместо сетки.
 *
 * ЗАЧЕМ. Шесть карточек в вёрстке темы это `col-xs-6 col-sm-6`, то есть по две
 * в ряд — три ряда. Замерено на живой главной при ширине 500px: блок занимает
 * **592 px** высоты при карточке 174 px. Полтора экрана телефона под шесть
 * иконок, между слайдером и товарами. На планшете то же самое.
 *
 * Настройкой это не решается: у модуля в админке есть только количество
 * колонок (`banner_column`), и оно влияет лишь на `col-lg-*`, то есть на
 * десктоп от 1200px. Ниже — всегда две в ряд.
 *
 * КАК. Тот же самый ряд превращается в скроллер: у контейнера уже стоит
 * `display:flex`, остаётся снять перенос и включить прокрутку по X. Ширина
 * карточки подобрана так, чтобы следующая выглядывала краем — без этого
 * в экран попадают ровно две штуки и выглядит как обычная сетка, никто не
 * догадается листать.
 *
 * ПОЧЕМУ НЕ SWIPER. Тема его умеет, но нативный скролл даёт инерцию и
 * «резинку» бесплатно, работает при выключенном JS и при ленивой загрузке
 * модуля (`lazyload_module`), и его нечему сломать при обновлении темы.
 *
 * ГРАНИЦА 991px, а не 767: на планшете карточки тоже по две в ряд, там те же
 * три ряда. С 992px начинается `col-md-4` (три в ряд), с 1200px — `col-lg-2`,
 * то есть все шесть в один ряд, и скроллер уже не нужен.
 *
 * Отрицательные поля у `.row` оставлены намеренно: скроллер уходит под края
 * контейнера, карточки подрезаются краем экрана — это и подсказывает, что
 * ряд продолжается.
 */

@media (max-width: 991px) {
	.banner-blocks-container {
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 10px;
		/* Полосу прокрутки прячем: на тач-устройствах она и так наэкранная,
		   а на узком десктопе съедала бы высоту карточки. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.banner-blocks-container::-webkit-scrollbar {
		display: none;
	}

	.banner-blocks-container > div {
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

/*
 * Ширина карточки задаётся дробным числом «сколько влезает в экран»: полторы,
 * две с половиной, три с половиной. Дробь тут не украшение — она гарантирует,
 * что следующая карточка всегда торчит краем.
 *
 * Фиксированные пиксели этого не дают: 260px при ширине 800 укладываются ровно
 * в три штуки встык, и ряд выглядит обычной сеткой, которую никто не листает.
 */

@media (max-width: 575px) {
	.banner-blocks-container > div {
		flex-basis: 66.666%;
		width: 66.666%;
		max-width: 66.666%;
	}
}

@media (min-width: 576px) and (max-width: 767px) {
	.banner-blocks-container > div {
		flex-basis: 40%;
		width: 40%;
		max-width: 40%;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.banner-blocks-container > div {
		flex-basis: 28.571%;
		width: 28.571%;
		max-width: 28.571%;
	}
}


/* Ссылка поверх карточки-триггера (мод zoomagazin_banner_blocks_popup).
 *
 * ЗАЧЕМ. Тема кликает карточку через onclick на <div>: с клавиатуры туда не
 * попасть, фокуса нет, для поисковика ссылки не существует. Настоящий <a>
 * добавлен внутрь и растянут на всю карточку — тег карточки при этом не
 * тронут (почему именно так — в шапке мода).
 *
 * Ссылка пустая: название напечатано в самой карточке, у ссылки оно в
 * aria-label. Поэтому фону и тексту тут делать нечего, ей нужна только
 * площадь и видимый фокус.
 */
.banner-blocks-container .banner-item {
	position: relative;
}

.zm-bb-link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	border-radius: inherit;
	-webkit-tap-highlight-color: transparent;
}

/* Обводка внутрь: снаружи её срезал бы overflow горизонтального скроллера. */
.zm-bb-link:focus-visible {
	outline: 2px solid var(--up-color-link, #FA6F36);
	outline-offset: -3px;
}