/*
 * Allow the carousel to have multiple items in the screen and slide per 1.
 * Also depends on the javascript in script-saas-preview-block.js
 */

.post-preview-carousel {
	margin-right: calc( -1 * var( --bs-spacer-2 ) );
	margin-left: calc( -1 * var( --bs-spacer-2 ) );
}
@media ( min-width: 768px ) {
	.owcb-block--saas-preview-block .post-preview-carousel {
		margin-right: var( --bs-spacer-5 );
		margin-left: var( --bs-spacer-5 );
	}
}

/* Cancel out grid col classes inside carousel items */
.post-preview-carousel .search-result--grid {
	width: 100%;
	height: 100%;
}

/* Avoid the only visible slide taking the height of another slide in the same group */
@media ( max-width: 767.98px ) {
	.post-preview-carousel .carousel-inner .carousel-item > div {
		display: none;
	}
	.post-preview-carousel .carousel-inner .carousel-item > div:first-child {
		display: block;
	}
}

.post-preview-carousel .carousel-inner .carousel-item.active,
.post-preview-carousel .carousel-inner .carousel-item-next,
.post-preview-carousel .carousel-inner .carousel-item-prev {
	display: flex;
}

.post-preview-carousel .carousel-inner .carousel-item-end,
.post-preview-carousel .carousel-inner .carousel-item-start {
	transform: translateX( 0 );
	transition: transform 0.9s;
}
@media ( min-width: 768px ) and ( max-width: 991.98px ) {
	.post-preview-carousel .carousel-item-end.active,
	.post-preview-carousel .carousel-item-next {
		transform: translateX( 50% );
	}
	.post-preview-carousel .carousel-item-start.active,
	.post-preview-carousel .carousel-item-prev {
		transform: translateX( -50% );
	}
	.post-preview-carousel--page-size--1 .carousel-item-end.active,
	.post-preview-carousel--page-size--1 .carousel-item-next {
		transform: translateX( 100% );
	}
	.post-preview-carousel--page-size--1 .carousel-item-start.active,
	.post-preview-carousel--page-size--1 .carousel-item-prev {
		transform: translateX( -100% );
	}
}
@media ( min-width: 992px ) {
	.post-preview-carousel--page-size--1 .carousel-item-end.active,
	.post-preview-carousel--page-size--1 .carousel-item-next {
		transform: translateX( 100% );
	}
	.post-preview-carousel--page-size--1 .carousel-item-start.active,
	.post-preview-carousel--page-size--1 .carousel-item-prev {
		transform: translateX( -100% );
	}
	.post-preview-carousel--page-size--2 .carousel-item-end.active,
	.post-preview-carousel--page-size--2 .carousel-item-next {
		transform: translateX( 50% );
	}
	.post-preview-carousel--page-size--2 .carousel-item-start.active,
	.post-preview-carousel--page-size--2 .carousel-item-prev {
		transform: translateX( -50% );
	}
	.post-preview-carousel--page-size--3 .carousel-item-end.active,
	.post-preview-carousel--page-size--3 .carousel-item-next {
		transform: translateX( 33.33333% );
	}
	.post-preview-carousel--page-size--3 .carousel-item-start.active,
	.post-preview-carousel--page-size--3 .carousel-item-prev {
		transform: translateX( -33.33333% );
	}
	.post-preview-carousel--page-size--4 .carousel-item-end.active,
	.post-preview-carousel--page-size--4 .carousel-item-next {
		transform: translateX( 25% );
	}
	.post-preview-carousel--page-size--4 .carousel-item-start.active,
	.post-preview-carousel--page-size--4 .carousel-item-prev {
		transform: translateX( -25% );
	}
}

@media ( max-width: 767.98px ) {
	.post-preview-carousel .carousel-control-prev,
	.post-preview-carousel .carousel-control-next {
		position: static;
		display: inline-block;
		margin-top: var( --bs-spacer-3 );
		margin-right: var( --bs-spacer-1 );
		margin-left: var( --bs-spacer-1 );
		width: 3rem;
		height: 3rem;
	}
}
.post-preview-carousel .carousel-control-prev,
.post-preview-carousel .carousel-control-next {
	background: white;
	border: 1px solid var( --bs-border-color );
	box-shadow: 0 2px 0 rgba( 0, 0, 0, 0.075 );
}
.bg-dark .post-preview-carousel .carousel-control-prev,
.bg-dark .post-preview-carousel .carousel-control-next {
	/* background: var( --bs-dark );
	border-color: rgba( 255, 255, 255, 0.25 ); */
	border-color: var( --bs-white );
	box-shadow: 0 2px 0 rgba( 0, 0, 0, 0.75 );
}
/* .bg-dark .post-preview-carousel .carousel-control-prev-icon,
.bg-dark .post-preview-carousel .carousel-control-next-icon {
	background: white;
} */
.post-preview-carousel .carousel-control-prev:hover,
.post-preview-carousel .carousel-control-next:hover {
	background: var( --bs-secondary ) !important;
	border-color: var( --bs-secondary ) !important;
}

.post-preview-carousel .carousel-control-prev {
	left: calc( -1 * var( --bs-spacer-2 ) );
}
.post-preview-carousel .carousel-control-next {
	right: calc( -1 * var( --bs-spacer-2 ) );
}
.owcb-block--saas-preview-block .carousel-control-prev {
	left: calc( -1 * var( --bs-spacer-5 ) );
}
.owcb-block--saas-preview-block .carousel-control-next {
	right: calc( -1 * var( --bs-spacer-5 ) );
}

/* Horizontal card layout */
.-card-layout-horizontal {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.-card-layout-horizontal .-image {
	margin: var( --bs-spacer-4 );
	margin-right: 0;
	flex-grow: 0;
}
.-card-layout-horizontal .-image-image {
	width: 12rem;
	border-radius: var( --theme-rounded-shapes, 0 );
	overflow: hidden;
}
.-card-layout-horizontal .-content {
	flex-grow: 1;
}
@media ( max-width: 575.98px ) or ( ( min-width: 768px ) and ( max-width: 991.98px ) ) {
	.-card-layout-horizontal {
		display: block;
	}
	.-card-layout-horizontal .-image {
		margin: var( --bs-spacer-4 );
		margin-bottom: 0;
	}
	.-card-layout-horizontal .-image-image {
		width: 100%;
	}
}
@media ( min-width: 1600px ) {
	.-card-layout-horizontal .-image-image {
		width: 20rem;
	}
}