/* ==========================================================================
   Before / After Slider (interactive comparison)
   ========================================================================== */

.sec-before-after {
	padding: 50px 0 0;
	background: linear-gradient(180deg, var(--clr-white) 0%, var(--clr-white) 60%, var(--clr-black) 60%, var(--clr-black) 100%);
	background: linear-gradient(180deg, #FFFFFF 10%, #55AAE0 50%);
	position: relative;
	z-index: 1;
}

.sec-before-after__inner {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 240px;
}

section.sec-before-after:before {
	content: '';
	position: absolute;
	background: #fff;
	height: 50%;
	width: 100%;
	bottom: 0;
	z-index: -1;
}

.sec-before-after__heading {
	font-size: var(--fs-h2);
	line-height:1.12;
	color: var(--clr-black);
	text-align: center;
	margin: 0 0 50px;
}

.sec-before-after__footer { text-align: center; padding: 50px 0 120px; }

/* Comparison slider ------------------------------------------------- */
.sec-before-after__compare {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 24px 40px rgba(0, 0, 0, 0.18);
	background: var(--clr-white);
	user-select: none;
	touch-action: none;
	--ba-pos: 50%;
}

.sec-before-after__slides {
	position: relative;
}

.sec-before-after__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s ease;
	max-height: 708px;
    overflow: hidden;
    height: 708px;
}

.sec-before-after__slide.is-active {
	position: relative; /* lets the active slide define the wrapper height */
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.sec-before-after__layer {
	position: relative;
}

.sec-before-after__layer img {
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	user-select: none;
	object-fit: cover;
}

/* The "after" layer sets the natural height of the comparison area. */
.sec-before-after__layer--after {
	position: relative;
	z-index: 1;
	height: 100%;
}

/* The "before" layer is overlaid and clipped to the divider position. */
.sec-before-after__layer--before {
	position: absolute;
	inset: 0;
	z-index: 2;
	clip-path: polygon(0 0, var(--ba-pos) 0, var(--ba-pos) 100%, 0 100%);
	-webkit-clip-path: polygon(0 0, var(--ba-pos) 0, var(--ba-pos) 100%, 0 100%);
}

.sec-before-after__label {
	position: absolute;
	bottom: 6%;
	font-family: var(--font-heading, serif);
	font-size: clamp(40px, 7vw, 110px);
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.28);
	pointer-events: none;
	text-transform: uppercase;
	line-height: 1;
}

.sec-before-after__label--before { left: 6%; }
.sec-before-after__label--after  { right: 6%; }

/* Vertical divider line ------------------------------------------------ */
.sec-before-after__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--ba-pos);
	z-index: 3;
	width: 2px;
	margin-left: -1px;
	background: #ffffff;
	pointer-events: none;
}

.sec-before-after__handle-line {
	display: block;
	width: 100%;
	height: 100%;
}

/* Hidden range input — captures pointer/touch/keyboard input -------- */
.sec-before-after__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: ew-resize;
	z-index: 4;
	opacity: 0;
}

.sec-before-after__range:focus-visible {
	opacity: 0.001; /* keep transparent but enable focus ring on handle */
}

.sec-before-after__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 60px;
	height: 100%;
	cursor: ew-resize;
}

.sec-before-after__range::-moz-range-thumb {
	width: 60px;
	height: 100%;
	border: 0;
	background: transparent;
	cursor: ew-resize;
}

/* Edge arrow buttons --------------------------------------------------- */
.sec-before-after__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 55px;
	height: 55px;
	background-color: #078FD6;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32px 12px;
	border: 1px solid transparent;
	border-radius: 5px;
	box-shadow: none;
	padding: 0;
	z-index: 5;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sec-before-after__arrow--prev {
	left: 30px;
	background-image: url('../../icons/before-after-prev.svg');
}

.sec-before-after__arrow--next {
	right: 30px;
	background-image: url('../../icons/before-after-next.svg');
}

.sec-before-after__arrow:hover,
.sec-before-after__arrow:focus {
	background-color: rgba(255, 255, 255, 0.2);
	border-color: #ffffff;
	outline: none;
}
section.sec-before-after.inner-page-bottom-space {
    padding: 50px 0 120px;
}


@media (max-width: 1440px) {
.sec-before-after__slide {
    max-height: 620px;
    height: 620px;
}
}
@media (max-width: 1366px) {
.sec-before-after__slide {
    max-height: 540px;
    height: 540px;
}
}
@media (max-width: 1200px) {
.sec-before-after__slide {
    max-height: 450px;
    height: 450px;
}
}
@media (max-width: 1279px) {
	.sec-before-after__inner { padding: 0 60px; }
}
@media (max-width: 1024px) {
.sec-before-after__footer {
    padding: 30px 0 100px;
}
section.sec-before-after.inner-page-bottom-space {
    padding: 30px 0 80px;
}
.sec-before-after__slide {
    max-height: 400px;
    height: 400px;
}
}

@media (max-width: 767px) {
	.sec-before-after__inner   { padding: 0 24px; }
	.sec-before-after__arrow   { width: 44px; height: 44px; background-size: 24px 10px; }
	.sec-before-after__arrow--prev { left: 12px; }
	.sec-before-after__arrow--next { right: 12px; }
	.sec-before-after__heading {margin: 0px 0 20px;}
	.sec-before-after {padding: 40px 0 0;}
	.sec-before-after__footer {
    text-align: center;
    padding: 30px 0 80px;
	}
		section.sec-before-after.inner-page-bottom-space {
    padding: 30px 0 50px;
}
.sec-before-after__slide {
    max-height: 350px;
    height: 350px;
}
}

@media (max-width:640px) { 
	section.sec-before-after.inner-page-bottom-space {
    padding: 30px 0 40px;
}
.sec-before-after__slide {
    max-height: 320px;
    height: 320px;
}
}