/* slider */
/* ======== */

/* styling */
/* ------- */

.slider-wrapper{
	--slider-elwidth: 20rem;
	--slider-imgwidth: calc(var(--slider-elwidth) - 2*var(--slider-elpadding));
	--slider-imgheight: calc(var(--slider-imgwidth)*3/4);
	--slider-buttonwidth: 2rem;
	--slider-height: 20rem;
	--slider-padding: 0.5rem;
	--slider-elpadding: 1rem;
	
	background-color: var(--background-color);
	border-radius: var(--interactives-border-width);
	border: solid var(--interactives-border-width) var(--border-color);
	margin: var(--typography-spacing) 0;
}
/*Ipad Portrait*/
@media only screen and (max-width: 768px){
	.slider-wrapper{
		--slider-elwidth: calc((100vw - 4em - var(--slider-buttonwidth)*2)/2);
		--slider-imgwidth: calc((100vw - 4em - var(--slider-buttonwidth)*2)/2 - 2*var(--slider-elpadding));
	}
}
/*Phone Portrait*/
@media only screen and (max-width: 450px){
	.slider-wrapper{
		--slider-elwidth: calc((100vw - 4em - var(--slider-buttonwidth)*2)/1);
		--slider-imgwidth: calc((100vw - 4em - var(--slider-buttonwidth)*2)/1 - 2*var(--slider-elpadding));
	}
}
.slider-wrapper .slider{
	height: var(--slider-height);
	padding-top: var(--slider-padding);
	padding-bottom: var(--slider-padding);
}

.slider-wrapper .slider a {
	/*color: white;*/
	/*text-decoration: none;*/
}
.slider-wrapper .slider a:link, a:visited{
	text-decoration: none;
}
.slider > ul > li > a > figure{
	padding: var(--slider-elpadding);
}
.slider-wrapper .slider a figcaption {
	padding-top: var(--slider-elpadding);
	margin: 0 auto;
	
}
.slider-wrapper .slider a img, .slider-wrapper .slider a video{

}
.slider-wrapper>ul>li>button{
	border-radius: 0;
	font-size: 1em;
	padding: 0;
	fill: var(--background-color);
}

.slider-wrapper button.slider-forward{
	border-left: solid var(--interactives-border-width) var(--text-color);
}
.slider-wrapper button.slider-back{
	border-right: solid var(--interactives-border-width) var(--text-color);
}

.slider-wrapper>ul>li>button.off{
	background-color: rgba(0,0,0,0);
	cursor: unset;
}
.slider-wrapper>ul>li>button.off:hover{
	box-shadow: none;
}

.slider-wrapper>ul>li>button:hover{
	box-shadow: 2px 2px 3px var(--focus-color);
}

/* functionality */
/* ------------- */

.slider-wrapper{
	position: relative;
	padding: 0 var(--slider-buttonwidth);
	box-sizing: content-box;
	height: calc(var(--slider-height) + 2*var(--slider-padding));
}

.slider-wrapper>ul{
	margin: 0;
	padding: 0;
}

.slider-wrapper>ul>li{
	display: block;
	box-sizing: border-box;
	height: calc(var(--slider-height) + 2*var(--slider-padding));
	width: var(--slider-buttonwidth);
	position: absolute;
	margin: 0;
	/*padding-top: calc(var(--slider-padding)*2) ;
	padding-bottom: var(--slider-padding);*/
	/*top: calc(-1*var(--interactives-border-width));*/
}

.slider-wrapper>ul>li:first-child{
	left: calc(-1*var(--interactives-border-width));
}
.slider-wrapper>ul>li:last-child{
	left: calc(100% - var(--slider-buttonwidth) + var(--interactives-border-width));
}

.slider-wrapper>ul>li>button{
	/*background: none;*/
	/*width: var(--slider-buttonwidth);*/
	/*height: calc(var(--slider-height) + 2em);*/
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.slider-wrapper>ul>li>button>img{
	width: var(--slider-buttonwidth);
	max-width: 100%;
	box-sizing: border-box;
}
.slider-wrapper .slider{
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	/*scroll-snap-points-x: repeat(var(--slider-elwidth));*/
}
@media (prefers-reduced-motion: reduce) {
  .slider-wrapper .slider {
    scroll-behavior: auto;
  }
}

.slider-wrapper .slider>ul{
	display: flex;
	margin: 0;
	padding: 0;
	height: 100%;
}
.slider-wrapper .slider>ul>li{
	display: inline-block;
}

.slider > ul > li > a > figure{
	margin: 0;
}

.slider > ul > li > a > figure.vertical{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.slider-wrapper .slider>ul>li>a {
    height: 100%;
    width: var(--slider-elwidth);
    display: inline-block;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: hidden;
	white-space: normal;
	scroll-snap-align: start;
}
.slider-wrapper .slider a img,
.slider-wrapper .slider a video{
	width: var(--slider-imgwidth);
	max-width: unset;
	height: var(--slider-imgheight);
	object-fit: cover; 
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.slider > ul > li > a > figure.vertical>img,
.slider > ul > li > a > figure.vertical>video{
	width: calc((var(--slider-imgwidth) - var(--slider-elpadding))/2);
	height: 100%;
}

.slider-wrapper .slider > ul > li > a > figure.vertical>figcaption{
	padding-left: var(--slider-elpadding);
	margin: auto auto;
}

.slider-wrapper .slider a .contain{
	object-fit: contain;
}