/* Decorative crossfading image slider with Almar-style clip-path edges.
   The clip-path creates transparent curved edges. Adjacent sections must
   extend their backgrounds behind the slider to fill those gaps. */
.kr-images-slider-wrap {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	block-size: 75vh;

	/* Overlap into the sections above and below */
	margin-block-start: -8vw;
	margin-block-end: -8vw;
	overflow: hidden;

	/* Clip both top and bottom edges with the inline SVG clipPath */
	clip-path: url(#kr-slider-clip);
}

/* Locations section: extend its background down behind the top clip curve */
.kr-locations {
	position: relative;
	z-index: 1;
	padding-block-end: 12vw;
}

/* Contact section: extend its green background up behind the bottom clip curve */
.kr-contact {
	position: relative;
	z-index: 1;
	padding-block-start: var(--k-space-2xl);
}

/* Hidden inline SVG that holds the clipPath definition */
.kr-images-slider-clip-svg {
	position: absolute;
	inline-size: 0;
	block-size: 0;
	overflow: hidden;
}

.kr-images-slider-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	/* doesn't get site wide transitions, meant to be slow */
	transition: opacity 3s ease-in-out;
}

.kr-images-slider-slide--active {
	opacity: 1;
}

.kr-images-slider-slide img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 640px) {
	.kr-images-slider-wrap {
		margin-block-end: -13vw;
	}
}