/*

	WIP: overlay image and caption are TODO
	- seems no customers are yet using the overlay img; could be a 'on sale' or whatever

*/


/*
section.section-slides {
	.slides-header {
		h2.heading {}
		h3.heading {}
		p.slides-introduction {}
	}
	.slides-wrapper {
		.slide-nav-wrapper {}
		.slides {}
	}
}
*/


.section-slides {
	display: flex;
	position: relative;
	flex-flow: column nowrap; /* !nowrap; .slides-header, .slides-wrapper both 100% width */
	width: 100%; /* DNU auto; also, not impossible [customer]-footer.css would want to override */
	align-items: flex-start;
	/*
		!!! .section-slides ABSOLUTELY MUST HAVE overflow-x: clip (DNU hidden);
		BTW: WHETHER USING EITHER transform: scale() or animation: slideBulge ON .slide,
		NOTE THE PADDING ON .slides-wrapper IS THE VERTICAL CONSTRAINT THO THIS IS NOW OVERFLOWABLE
	*/
	overflow-x: clip;
	margin: 4.5rem auto 6rem;
/*	border: 1px dashed deeppink;*/
}

.slides-header {
	display: flex;
	width: 100%;
	flex-flow: column nowrap;
	align-content: center;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 1.5rem;
	/*	border: 2px dashed blue; */
}
.slides-header .heading,
.slides-header p  { display: none; }

.slides-header .heading:first-child {
	display: flex;
	width: 90%;
	justify-content: center;
	font-size: clamp(1.2rem, 1.8vmax, 1.8vmax);
	text-transform: uppercase;
/*	text-align: center; */
	word-spacing: .6ch;
	letter-spacing: .3ch;
}

.slides-header .heading:first-child::before,
.slides-header .heading:first-child::after {
	display: inline-block;
	height: 1px;
	margin-top: clamp(.72em, 1.2vmax, 1.2vmax);
	content: "";
	flex: 1 0;
	background: #ccc;
}

.slides-header .heading:first-child::before { margin-right: 1.5ch; }
.slides-header .heading:first-child::after { margin-left: 1.5ch; }


.slides-wrapper {
	display: flex;
	position: relative;
	flex-flow: row nowrap;
	width: 100%; /* DNU auto */
	/* padding: 1.98rem 0; /* KEEP THIS! re: .slide:hover => transform: scale(); */
	padding: 3rem 0; /* KEEP THIS! re: .slide:hover => animation: slideBulge; */
	flex-flow: row nowrap;
	align-items: center;
/*	border: 2px solid red;*/
}

/*
.slide-nav-wrapper {
	.btn-slide-nav.btn-slide-nav-left {
		.fas.fa-chevron-left.icon-slide-nav-left {}
	}
	.btn-slide-nav.btn-slide-nav-right {
		.fas.fa-chevron-right.icon-slide-nav-right {}
	}
}
*/



.slide-nav-wrapper {
	background: transparent;
	position: absolute;
	left: 0;
	/*	top: calc(50% - 1.5rem);*/
	top: 0;
	right: 0;
	width: 100%;
	height: 0; /* !!! don't cover any portion of the slide (re: the slide *link*) */
	z-index: 9;
	cursor: pointer;
	/*	border: 1px dashed blue;*/
}

.btn-slide-nav {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 48px;
	height: 48px;
	border-radius: 51%;
	background: #fff;
	border: 1px solid #eee;
}

.icon-slide-nav {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: inherit;
	align-items: inherit;
	font-size: 1.8rem;
	color: #333;
}

/*	left: calc(.9rem + 30px + 4.5rem + 300px);*/
/*	left: calc(4.5rem + 300px + (4.5rem - (33px + .9rem)));*/
/*
	re: position:
		- 1.5rem is lateral padding on the <li>; ???
		- 24px is half the width of the button enclosing the icon
		- this centers the chevron icons over the edge of the slide

*/

.btn-slide-nav-left { left: .9rem; }
.btn-slide-nav-right { right: .9rem; }
/*.btn-slide-nav-left { left: calc(1.5rem - 24px); }*/
/*.btn-slide-nav-right { right: calc(1.5rem - 24px); }*/



/* ul.slides */
.slides {
	position: relative;
	/*
		DNU width: auto; !!!
		width: auto; => confirmed via border, correctly overflows viewport,
		but satisfying OCD is not worth messing up the js, e.g.,
		ulSlides.getBoundingClientRect().width, thereby botching the slide width calculations
	*/
	width: 100%; /* !!! constrains to viewport (required!) though the <li> els overflow */
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	transition: var(--transition-09);
	transform: translateX(0);
	z-index: 0;
/*	border: 3px solid red;*/
}

.slide {
	display: flex;
	min-width: 100%;
	height: unset !important; /* prob redundant; precluding any cached js */
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	padding: 0 1.5rem; /* this might get pulled in favor of [customer].css (which must precede slider-v2.css) */
	/*
		REQUIRED PER CUSTOMER:
		- *if* customer has .slide-copy content, customize according to content,
		such that vertical space required for .slide-copy content is used for both .slide padding-bottom and .slide-copy-wrapper *height*
		- UPDATE: actually no; as long as slider-v2.js doesn't generate a height value for the .slide,
		... and given slide copy is concise and limited, DNU position: absolute on .slide-copy-wrapper, ergo .slide-copy-wrapper won't require height
	*/
	background: transparent;
	opacity: .9;
/*	transition: var(--transition-03);*/
	z-index: 0;
	transform: scale(1);
	transform-origin: center;
	animation: slideUnBulge .3s ease-in-out forwards;
	/*border: 3px solid red;*/
}

/*
	xn+y:
	(x * 0) ... n: start at zero, then positive integers
	... + y => every yth el;
	i.e., xn+y => every xth child, with an offset of y
	e.g., every 6th, starting at 1st:
*/
/*
.slide:nth-child(6n+1) { background: red; }
.slide:nth-child(6n+2) { background: blue; }
.slide:nth-child(6n+3) { background: lime; }
.slide:nth-child(6n+4) { background: tomato; }
.slide:nth-child(6n+5) { background: rebeccapurple; }
.slide:nth-child(6n+6) { background: pink; }
*/

	.slide:hover {
/*		transition: var(--transition-03);*/
		opacity: 1;
		z-index: 3;
/*		transform: scale(1.17);*/
		animation: slideBulge .9s ease-in-out forwards;
	}

.slides.transformable .slide { opacity: .81; }

.slides.transformable .slide:hover { opacity: 1; }

/* unBulge otherwise the unhover is abrupt */
@keyframes slideUnBulge {
	0% { transform: scale(1.20); }
	100% { transform: scale(1); }
}

@keyframes slideBulge {
	0% { transform: scale(1); }
	45% { transform: scale(1.29); }
	100% { transform: scale(1.20); }
}

/*
	slide: animation: slideUnBulge .9s ease-in-out forwards; ???
	slide:hover: animation: slideBulge .9s ease-in-out forwards; ???
*/

/*
	HEADS-UP: not all slider instances are the same structure,
	- e.g., Aspex Brands (Home page):
	li {
		a {
			img {}
		}
		.slide-copy-wrapper {
			.slide-copy {}
		}
	}

	- e.g., Aspex 'Milestones' (About partial):
	li {
		.slide-copy-wrapper {
			.slide-copy {}
		}
	}

	- ERGO .slide a and .slide img likely to mostly match
*/

.slide a {
	display: flex;
	width: 100%;
	position: relative;
	justify-content: center;
	/*	max-width: 300px;*/
/*	border: 3px solid red;*/
}

.slide img {
	width: 100%; /* DNU max-width */
	margin: 0;
}

.slide .slide-image-overlay {
/*	display: none;*/
	position: absolute;
	bottom: 0;
	max-width: 81%;
/*	border: 1px solid lime;*/
}


.slide .slide-copy-wrapper {
	flex: 1 1;
	flex: 0 1;
/*	display: flex; ... !!! DNU display: [anything] here; most customers will require display: none; in [customer].css */
/*	padding: 0 1.5ch;*/
	padding: 1.5ch;
	text-align: center;
	font-size: .9rem;
	line-height: 1.8;
	/**/
/*	border: 2px solid gold;*/
}
.slide .slide-copy {
/*	border: 1px solid red;*/
}
.slide .slide-copy a { color: gold; }



@media screen and (min-width: 666px) {

	/*	.slides-wrapper { padding: 0 0 3rem 0; }*/

	/* top: 1/2 the height of the padding on .slides-wrapper + .slide-nav-wrapper */
	.slide-nav-wrapper {
/*		top: calc(50% - 3rem);*/
		top: calc(50% - 24px);
	}

	.slide {}

	.slide-copy-wrapper {
		/* DNU position: absolute; (see note above @ .slide) */
		bottom: 1.35rem;
		bottom: 0;
		width: 100%;
		height: auto;
		flex: 1 1;
		padding: 1.5rem;
		font-size: 1.11rem;
		line-height: 1.2;
		background: #000;
/*		border: 2px dashed blue;*/
	}
	.slide-copy-wrapper p {
		color: #fff;
	}

} /* MQ */