/* ==========================================================================
   Carousel
   ========================================================================== */

:root {
	--carousel-speed: 650ms;

	--carousel-control-width: 44rem;
	--carousel-control-height: 3.75rem;

	--carousel-control-border: rgba(255, 252, 243, 0.2);
	--carousel-control-blur: 2px;

	--carousel-dot-size: 0.7rem;
	--carousel-dot-gap: 0.75rem;
}


/* ==========================================================================
   Base
   ========================================================================== */

.carousel {
	position: relative;
	width: 100%;
}

.carousel .swiper-wrapper {
	align-items: stretch;
}

.carousel__slide {
	height: auto;
	margin: 0;
}


/* ==========================================================================
   Controls
   ========================================================================== */

.carousel__controls {
	align-items: center;
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem;
}

.carousel__pagination {
	align-items: center;
	display: flex;
	gap: var(--carousel-dot-gap);
	justify-content: center;
}

.carousel__dot,
.carousel__arrow {
	font: inherit;
}


/* ==========================================================================
   Pagination
   ========================================================================== */

.carousel__dot {
	appearance: none;
	background: currentColor;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	display: block;
	flex: 0 0 auto;
	height: var(--carousel-dot-size);
	margin: 0 !important;
	opacity: 1;
	padding: 0;
	transition: transform var(--control-transition);
	width: var(--carousel-dot-size);
}

.carousel__dot.is-active {
	transform: rotate(45deg);
}


/* ==========================================================================
   Arrows
   ========================================================================== */

.carousel__arrow {
	appearance: none;
	align-items: center;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: flex;
	height: 100%;
	justify-content: center;
	padding: 0;
	position: relative;
	width: 100%;
}

.carousel__arrow-icon {
	border-right: var(--stroke-width) solid currentColor;
	border-top: var(--stroke-width) solid currentColor;
	display: block;
	height: 0.9rem;
	width: 0.9rem;
}

.carousel__arrow--prev .carousel__arrow-icon {
	transform: rotate(-135deg);
}

.carousel__arrow--next .carousel__arrow-icon {
	transform: rotate(45deg);
}

.carousel__arrow:focus-visible,
.carousel__dot:focus-visible {
	outline: var(--focus-ring);
	outline-offset: -0.25rem;
}


/* ==========================================================================
   Gallery variant
   ========================================================================== */

.carousel--gallery {
	background: var(--sz-graphite);
	/* Overlap the preceding section to hide fractional-pixel rendering seams. */
	margin-top: -1px;
	overflow: hidden;
}

.carousel--gallery .carousel__slide {
	overflow: hidden;
}

.carousel--gallery .carousel__image {
	display: block;
	height: min(56vw, 54rem);
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.carousel--gallery .carousel__controls {
	-webkit-backdrop-filter: blur(var(--carousel-control-blur));
	backdrop-filter: blur(var(--carousel-control-blur));

	background: rgba(25, 26, 32, 0.18);
	border: var(--stroke-width) solid var(--carousel-control-border);
	bottom: clamp(1.5rem, 5vw, 3.5rem);
	box-sizing: border-box;
	color: var(--sz-chalk);
	height: var(--carousel-control-height);
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: min(
		var(--carousel-control-width),
		calc(100% - (2 * var(--layout-margin-mobile)))
	);
	z-index: 5;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 64rem) {

	.carousel--gallery .carousel__image {
		height: 62vw;
	}

	.carousel--gallery .carousel__controls {
		bottom: 2rem;
		width: min(
			34rem,
			calc(100% - (2 * var(--layout-margin-tablet)))
		);
	}
}


@media (max-width: 48rem) {

	:root {
		--carousel-control-height: 3.25rem;
		--carousel-dot-size: 0.6rem;
	}

	.carousel__controls {
		grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem;
	}

	.carousel__arrow-icon {
		height: 0.8rem;
		width: 0.8rem;
	}

	.carousel--gallery .carousel__image {
		height: 75vw;
		min-height: 22rem;
	}

	.carousel--gallery .carousel__controls {
		bottom: 1rem;
		width: calc(100% - (2 * var(--layout-margin-mobile)));
	}
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.carousel .swiper-wrapper {
		transition-duration: 0.01ms !important;
	}

	.carousel__dot {
		transition-duration: 0.01ms;
	}
}

/* ==========================================================================
   Top chamfer
   ========================================================================== */

.carousel--gallery::before {
	background: var(--sz-graphite);
	z-index: 4;
}