/**
 * CSS
 * @version 0.1
 * @author Ozhan Binici
 * last update: 2025.12.27
 * 
 */

.carousel {
	--swiper-theme-color: #958AA1;
	--swiper-navigation-size: 40rem;
	margin-bottom:30rem;
}

.carousel {
	width:100%;
	background-color:var(--category-color);
	padding: 10rem 10rem 30rem 10rem;
}

.carousel .swiper {
	height:100%;
	/*overflow:hidden;*/

}


.carousel .swiper-button-prev,
.carousel .swiper-button-next {
	--swiper-navigation-sides-offset: -25rem;
}

.carousel .swiper-button-prev:after,
.carousel .swiper-button-next:after {
	font-family: archer-pro;
	font-weight: 500;
}
.carousel .swiper-button-next:after {
	content: ">";
}

.carousel .swiper-button-prev:after {
	content: "<";
}

.carousel .swiper-button-next:hover, 
.carousel .swiper-button-prev:hover {
	color:#000000;
}

.overview .carousel figure {
	display: flex;
	justify-content: center;
	align-items: center;
}

.overview .carousel figure.fit.height img {
	object-fit:contain;
}

.overview .carousel figure img {
	object-fit:contain;
}


.overview .carousel figure picture {
	cursor:zoom-in;
}

.carousel figure figcaption {
	position:absolute;
	bottom:30rem;
	text-align:center;
}

figure.cover img {
	object-fit:cover;
}

figure.contain img {
	object-fit:contain;
}

.carousel figure picture {
	height: calc(100vh - 155rem);
	margin-bottom:40rem;
	display:block;
}
.carousel figure:has(figcaption) {
	padding-bottom:30rem;
}
.carousel figure:has(figcaption) picture {
	height:calc(100vh - 190rem);
}

.carousel:has(.video-holder){
	padding:20rem 0;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.carousel .video-holder {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width:500rem;
	max-width:calc(100vw - 600rem);
}

.carousel .video-holder iframe {
	aspect-ratio: 16 / 9; /* or your $vimeo_aspect_ratio */
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}

.carousel .swiper-pagination {
	--swiper-pagination-bottom: 6rem;
	--swiper-pagination-top: auto;
	font-size: 15rem;
	line-height: 20rem;
	font-weight:600;
	font-variant: lining-nums;
	color:#FFFFFF;
	display:block;
}

.carousel .download {
	position:absolute;
	right:10rem;
	bottom:5rem;
	color:#FFFFFF;
	font-size: 15rem;
	line-height: 20rem;
	font-weight:500;
	z-index:10;
}
.carousel .download:before {
	content:"↓ ";
	display:inline;
	font-size:0.8em;
} 

.carousel .download:hover {
	/*text-decoration:underline;
	text-underline-offset:1.5rem;*/
	color:#000000;
}

@media (max-width:520px){
	
	.carousel .swiper-button-prev,
	.carousel .swiper-button-next {
		--swiper-navigation-sides-offset:0rem;
		
		display:none;
	}
	/*.carousel .swiper-pagination {
		text-align:left;
		padding-left:10rem;
	}*/
		
	.carousel {
		width:calc(100% + 20rem);
		margin-left:-10rem;
	}
}