/**
 * #.# Client Success Stories Module
 *
 * Styles for template-part/modules/client_success_stories_module.php
**/

/* ── Header row ──────────────────────────────────────────── */

.client-success-header {
	padding: 60px 0;
}



/* ── Slider section ──────────────────────────────────────── */

.client-success-slider-section {
	padding-bottom: 60px;
}

/* Extend slider to right edge of viewport */
.container.no-right-padding {
	padding-right: 0;
	overflow: hidden;
}

/* ── Custom slider track ─────────────────────────────────── */

.case-stories-slider {
	overflow: hidden;
}

/* Track is a relative container — slides stack inside it absolutely */
.case-stories-track {
	position: relative;
	aspect-ratio: 16 / 7;
	/* Never exceed viewport height (minus fixed header) 
	max-height: calc(100vh - 200px);*/
	height: calc(100vh - 200px);
  max-height: 60svh;
}

/* ── Slide items ─────────────────────────────────────────── */

/* All slides stacked — JS controls left, width, z-index only.
   No opacity needed: dark-slide overlay handles all visual transitions. */
.case-slider-item {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	/* width and left set by JS */
}

.case-slider-item.is-active {
	z-index: 2;
}

.case-slider-item.is-next {
	z-index: 1;
}

/* Full-slide link overlay */
.case-slider-link {
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* ── Dark slide overlay (non-active) ────────────────────── */

.dark-slide {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(13, 42, 40, 0.2);
	backdrop-filter: blur(18px);
	transform: translateX(0);
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slide the overlay away on the active item */
.case-slider-item.is-active .dark-slide {
	transform: translateX(100%);
}

/* ── Slide content ───────────────────────────────────────── */

.case-slider-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 40px;
	background-color: rgba(24, 52, 49, 0.3);
}

.case-title {
	font-family: var(--header);
	font-size: 36px;
	line-height: 39px;
	color: var(--white);
	margin: 0 0 10px;
	opacity: 1;
	transform: translateX(20px);
	transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
	position: absolute;
  top: 50px;

	letter-spacing:-2%;
}

.case-excerpt {
	font-family: var(--header);
	font-size: 22px;
	line-height: 23px;
	color: var(--white);
	margin: 0;
	opacity: 0;
	transform: translateX(20px);
	transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s;

	letter-spacing:-2%;
}

/* Slide content in on active item */
.case-slider-item.is-active .case-title,
.case-slider-item.is-active .case-excerpt {
	opacity: 1;
	transform: translateX(0);
}

/* Disabled arrow state */
.css-arrow.is-disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}


.show-on-hover {background-image:url(../../../img/2026-link-arrow.svg);width:61px;height:61px;
background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;position:absolute;top:40px;right:40px;opacity:0;transition: opacity 0.2s ease 0.2s}
.case-slider-item.is-active:hover .show-on-hover {opacity:1}



/* ── Below-slider arrows (mobile only) ──────────────────── */

.css-arrows-below {
	display: none;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1536px) {

}

@media (max-width: 1366px) {

}

@media (max-width: 1280px) {

}

@media (max-width: 992px) {
	.css-section-header {
		font-size: 32px;
	}

	/* At mobile the aspect ratio gives a good height naturally;
	   tighten it slightly for narrow screens */
	.case-stories-track {
		aspect-ratio: 4 / 3;
	}

	/* Hide header arrows, show below-slider arrows */
	.client-success-header .custom-slick-arrows {
		display: none;
	}

	.css-arrows-below {
		display: flex;
		gap: 8px;
		padding: 20px 0 0;
	}

	.client-success-slider-section .container.no-right-padding {padding-right:40px}
}

@media (max-width: 768px) {

	.client-success-slider-section {
		padding-bottom: 10px;
	}

	.client-success-header {
		padding: 40px 0 20px;
	}

	.case-slider-item {
		margin-right: 10px;
	}

	.case-slider-content {
		/*bottom: 24px;
		left: 24px;
		right: 24px;*/
	}

	.case-title {
		font-size: 42px;
        line-height: 41px;
        width: calc(100% - 80px);
	}

	.case-stories-track { height: 40svh; max-height: 60svh; }


}

@media (max-width: 600px) {

}