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

.carousel {
	--swiper-theme-color: #000000;
	--swiper-navigation-size: 32rem;
}

.carousel {
	width:100%;
}

.overview {
	display:flex;
	flex-wrap:wrap;
	width:100%;
}
.overview .carousel {
	width:calc(100% - 400rem);
	padding:0rem 30rem;
	order:2;
}

.carousel .swiper {
	height:100%;
	padding: 0 20rem;
}


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

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

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

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

.carousel .swiper-button-next:hover, 
.carousel .swiper-button-prev:hover {
	opacity:1;
}

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


.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;
}

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

#home .carousel {
	margin-bottom:-35rem;
}

.carousel .swiper-pagination {
	--swiper-pagination-bottom: 20rem;
	--swiper-pagination-top: auto;
	font-size: 15rem;
	line-height: 20rem;
	font-variant: lining-nums;
	opacity: 0.5;
}

#work .carousel.mobile {
	display:none;
}

@media (max-width:1300px){
	.carousel .swiper-button-prev,
	.carousel .swiper-button-next {
		--swiper-navigation-sides-offset:-10rem;
	}
	
	#home .carousel figure picture {
		height: calc(100vh - 145rem);
	}
}

@media (max-width:910px){
	.carousel .swiper {
		padding:0 15rem;
	}
	
	.carousel .swiper-button-prev,
	.carousel .swiper-button-next {
		--swiper-navigation-sides-offset:-7rem;
	}
}

@media (max-width:520px){
	
	.overview .carousel {
		margin-bottom:-30rem;
	}
	.carousel .swiper {
		padding:0rem 0rem 30rem 0rem;
	}
	.carousel .swiper-pagination {
		bottom:0rem;
		width:auto;
		left:auto;
		right:20rem;
	}
	
	.carousel .swiper-button-prev,
	.carousel .swiper-button-next {
		--swiper-navigation-sides-offset:0rem;
		
		display:none;
	}
	
	.carousel figure.contain picture {
		padding:0 20rem;
	}
	
	#home .carousel figure picture {
		height: calc(100vh - 130rem);
		height: calc(100dvh - 90rem);
	}
	
	.overview .carousel {
		width:100%;
		padding:0rem;
		order:1;
		/*height:100vw;*/
	}
	
	.overview .carousel figure picture {
		height:100vw;
		height:auto;
	}
	
	.carousel figure picture {
		margin-bottom:0rem;
	}
	
	#work .overview .carousel {
		height:auto;
		/*height:100vw;*/
	}
	#work .overview .carousel figure picture {
		height:auto;
		/*height:100vw;
		width:100vw;*/
		margin-bottom:0rem;
	}
	#work .overview .carousel figure.contain picture {

	}
	
	#work .overview .carousel figure.fit picture {
		padding:0rem 20rem;
	}
	#work .overview .carousel figure.cover picture {
		padding:0rem;
	}
	
	/*#work .overview .carousel .swiper-pagination {
		left:auto;
		right:20rem;
		width:auto;
	}
	*/
	/*
	#work .overview .carousel {
		display:none;
	}
	
	#work .overview .carousel.mobile {
		display:block;
	}
	
	#work .carousel.mobile {
		display:block;
	}
	*/
	
	.carousel figure figcaption {
		bottom:0rem;
	}
}

.carousel.wide {
	display:block;
}
.carousel.narrow{
	display:none;
}

@media only screen and (orientation : portrait) {
	.carousel.wide {
		display:none;
	}
	.carousel.narrow{
		display:block;
	}
}