/*
	
	COURUSEL
	TODO:
		- в зависимости от ширины окна и количества слайдов можно убирать/показывать стрелки прокрутки без JS
*/

.scroller { 
	margin: 2vh 0;
	position: relative;
	height: 100%;
	max-height: 500px;
	transition: height .5s;
}
.scroll_helper {
	height: 100%;
}
	
.slider {
	white-space: nowrap;
    text-align: center;
    overflow: hidden;
    overflow-x: auto;
    height: 100%;
    font-size: 0;
	padding: 2px;		/* +4px for focused outline width (+1px на округление) */
	
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;			
    transform: translateY(-50%);
	
    scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;   	/* Hide scrollbar for Firefox и новых версий других браузеров*/
	-ms-overflow-style: none;	/* Hide scrollbar for IE and Edge */
}
.slider::-webkit-scrollbar {	/* Hide scrollbar for Chrome, Safari and Opera */
	display: none;
}
.slider.js {
	scroll-snap-type: none;
	scroll-behavior: unset;
}
.slider.dragged, .slider.dragged * {
	cursor: grab !important;
} 
.slide {
    scroll-snap-align: end;
    display: inline-block;
    margin-right: 20px;
    font-size: 1rem;
    height: 100%;
	width: 100%;
	position: relative;
}
.slide:last-of-type {
	margin-right: 0;
	scroll-snap-align: start;
}
@media (min-width: 480px) {
 .slide {
    width: calc(50% - 10px);
 }
}
@media (min-width: 900px) {
 .slide {
    width: calc(33.333% - 13.33px);
 }
}
@media (min-width: 1180px) {
 .slide {
    width: calc(25% - 15px);
 }
}

.scroller .pane {
	height: 100%;
	max-height: 496px;
	width: 100%;

    position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	
    overflow: hidden;
	text-align: left;
	white-space: normal;

	padding: 10px 10px 15px;
	border: 1px solid #afb6d5;
	border-radius: 12px;
	background: #fff;
}


.slide > a.go, .scroller > img {
    position: absolute;
    top: 50%;
    transform: translateY(-80%);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    padding: 10px;
    left: 10px;
}
.slide > a.go {
    -webkit-tap-highlight-color: transparent;
    outline: 0;
	
    border-radius: 0 100% 100% 0;
    width: 62px;
    left: -2px;
}	
.slide > a.go.next, .scroller > img:last-of-type {
	right: 10px;
	left: auto;
}
.slide > a.go.next {
    border-radius: 100% 0 0 100%;
    right: -2px;
}	
.slide > a:not([href]) {
	cursor: not-allowed;
	display: none !important;
}
.njs .slide > a:not([href]) {
	display: block;
}	
.scroller > img {
    pointer-events: none;
    background: rgb(0 65 125 / 20%);
}

.slide > a:active > .pane {
	border-color: #185abc;
	outline: 2px solid #185abc;
}
@media (min-height: 600px) {
 .slide > a:focus > .pane {
	border: 1px solid #185abc;
	outline: 1px solid #185abc;
 }
}
@media (min-height: 750px) {

	.njs .slider:active {
		height: 100vh;
		height: round(100dvh, 2px);	/* Rounding to avoid blurring the borders */
	}
	.njs .slider:not(:active) {
		animation: expand .5s step-end forwards;
	}
	@keyframes expand {
/*		from { height: 100vh; height: round(100dvh, 2px); }		*/
		to { height: 100%; }
	}

	.scroller { 
		margin: 30px 0;
	}
/*
	.scroller { 
		margin: 30px 0;
		height: 500px;
	}
	.scroller .pane {
		height: 496px;
	}*/
}

@media (prefers-reduced-motion: no-preference) {
 @supports (animation-timeline: scroll()) {
 
	.scroller {
		view-timeline: --scroller-tl; 
		--show-arrows: false;
		animation: show_arrows steps(1) forwards;
		animation-timeline: --scroller-tl;	/*view(100% 0%);*/
		animation-range: entry 75% exit-crossing 5%;
	}
	@keyframes show_arrows {
		from {
			--show-arrows: true;
		}
		to {
			--show-arrows: false;
		}
	}	
	.scroller > img {
		opacity: 0;
		translate: -80px;
		transition: all .2s ease-out;
	}		
	.scroller > img:last-of-type {
		translate: 80px;
	}	
	@container style(--show-arrows: true) {
		.scroller > img, .scroller > img:last-of-type {
			opacity: 1;
			translate: 0;
		}
	}
	
 }	
}