/*
 * Shared mobile slider pagination ("dashes").
 *
 * Below 768px every slider in the theme hides its arrows and progress bar
 * and shows dashes instead. The component attaches itself to any slider
 * that follows the theme's BEM naming (see assets/js/slider-dashes.js),
 * so block stylesheets need no changes.
 *
 * Default colour suits light sections; dark ones override
 * --ev-dash-color in their own stylesheet.
 */

@media (max-width: 767px) {
	[class$="__arrow--prev"],
	[class$="__arrow--next"],
	[class$="__progress"] {
		display: none !important;
	}

	[class$="__footer"].ev-has-dashes {
		display: none !important;
	}
}

.ev-dashes {
	display: none;
}

@media (max-width: 767px) {
	.ev-dashes {
		--ev-dash-color: #870917;

		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 15px;
		/*
		 * No bottom padding on purpose: the section owns the space below
		 * the slider, this component only owns the gap above the dashes.
		 * Having both meant 80px instead of 40 under several sliders.
		 * The one section without its own bottom padding gets it
		 * explicitly in style.css.
		 *
		 * 5px here plus 20px of the button's own top padding make up the
		 * 25px the design calls for.
		 *
		 * The negative bottom margin cancels the button's bottom padding
		 * so the section still starts 40px below the dash itself. That
		 * padding only exists to give the finger some room under the
		 * line — see the button rule below.
		 */
		padding: 5px 0 0;
		margin-bottom: -10px;
	}

	/*
	 * The touch target is built from the button's top padding, and the
	 * dash itself is its last pixel row. Nothing may stick out of the
	 * box: several sliders clip their content with overflow: hidden and
	 * end exactly at this line, so an overhanging dash is cut away and
	 * looks like it blends into the background.
	 *
	 * `overflow-y: visible` is not an option there — paired with
	 * `overflow-x: hidden` the spec turns it into `auto`, adding a
	 * scrollbar.
	 *
	 * Height stays `auto` so the dash defines it. A fixed `height: 1px`
	 * only works under content-box, and some sliders force border-box on
	 * every descendant, which collapses the content box to zero and puts
	 * the dash outside the element again.
	 *
	 * Padding is asymmetric on purpose. Most of the target sits above the
	 * dash, because below it the clipping sliders cut everything off; the
	 * 10px underneath still helps on every other slider, where a finger
	 * naturally lands on or just below the line. An all-above target made
	 * the dashes hard to hit.
	 */
	.ev-dashes__item {
		width: 30px;
		height: auto;
		padding: 20px 0 10px;
		margin: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	/*
	 * The parent theme's reset paints every <button> pink on hover and
	 * focus. Overridden by specificity rather than !important, the same
	 * way the other sliders in the theme do it.
	 */
	.ev-dashes .ev-dashes__item:hover,
	.ev-dashes .ev-dashes__item:focus,
	.ev-dashes .ev-dashes__item:focus-visible,
	.ev-dashes .ev-dashes__item:active {
		background: transparent;
		background-color: transparent;
		border: 0;
		color: inherit;
		outline: none;
	}

	/* At most five dashes at a time; the window is computed in JS. */
	.ev-dashes__item--hidden {
		display: none !important;
	}

	.ev-dashes__item::before {
		content: "";
		display: block;
		width: 100%;
		height: 1px;
		background: var(--ev-dash-color);
		opacity: 0.4;
		transition: opacity 0.25s ease;
	}

	.ev-dashes__item.is-active::before {
		opacity: 1;
	}
}

/*
 * Мобильный скролл-режим слайдера (см. assets/js/slider-dashes.js).
 *
 * Ленту двигает не JS блока, а сам браузер: вьюпорт становится
 * горизонтальным скролл-контейнером со scroll-snap, поэтому инерция и
 * доводка до карточки — системные. `!important` здесь по делу: JS блока
 * пишет transform трека инлайном, а инлайн перебивается только так.
 */
@media (max-width: 767px) {
	/* Клоны бесконечной прокрутки: в скролл-ленте это были бы дубли
	   карточек до и после реального набора. */
	.ev-swipe [data-clone],
	.ev-swipe .is-clone {
		display: none !important;
	}

	.ev-swipe .ev-swipe__scroller {
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		/* Горизонтальный свайп на краю ленты не должен уходить в
		   навигацию «назад» и в горизонтальный скролл страницы. */
		overscroll-behavior-x: contain;
		/* Полосу прокрутки не показываем: пагинация — даши. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.ev-swipe .ev-swipe__scroller::-webkit-scrollbar {
		width: 0;
		height: 0;
		display: none;
	}

	/*
	 * Трек перестаёт быть «двигаемой» лентой: позицию задаёт scrollLeft
	 * контейнера. width: max-content нужен, чтобы карточки считались
	 * содержимым скролла, а не переполнением флекс-контейнера фиксированной
	 * ширины (иначе последняя карточка обрезается на краю прокрутки).
	 */
	.ev-swipe .ev-swipe__track {
		transform: none !important;
		transition: none !important;
		width: -webkit-max-content !important;
		width: max-content !important;
		max-width: none !important;
		min-width: 100%;
	}

	.ev-swipe .ev-swipe__slide {
		scroll-snap-align: start;
		flex-shrink: 0;
	}
}