/**
 * Resets: When 2 consecutive blocks have the same background color, remove the 2nd block's top padding to avoid double padding.
 * Only applicable when both blocks have no background image, otherwise the sibling block content would touch the image.
 * @todo Also skip the hidden divider block on smaller resolutions
 */

/* Here the .py-4 check is added in order to not ADD padding when it is altered by exception. (Such as in the divider block) */
@media ( max-width: 991.98px ) {
	.owcb-block.owcb-has-no-bg-image.bg-transparent + .owcb-block.owcb-has-no-bg-image.bg-transparent.py-4,
	.owcb-block.owcb-has-no-bg-image.bg-primary     + .owcb-block.owcb-has-no-bg-image.bg-primary.py-4,
	.owcb-block.owcb-has-no-bg-image.bg-secondary   + .owcb-block.owcb-has-no-bg-image.bg-secondary.py-4,
	.owcb-block.owcb-has-no-bg-image.bg-light       + .owcb-block.owcb-has-no-bg-image.bg-light.py-4,
	.owcb-block.owcb-has-no-bg-image.bg-dark        + .owcb-block.owcb-has-no-bg-image.bg-dark.py-4 {
		padding-top: var( --bs-spacer-3 ) !important;
	}
}
@media ( min-width: 992px ) {
	.owcb-block.owcb-has-no-bg-image.bg-transparent + .owcb-block.owcb-has-no-bg-image.bg-transparent,
	.owcb-block.owcb-has-no-bg-image.bg-primary     + .owcb-block.owcb-has-no-bg-image.bg-primary,
	.owcb-block.owcb-has-no-bg-image.bg-secondary   + .owcb-block.owcb-has-no-bg-image.bg-secondary,
	.owcb-block.owcb-has-no-bg-image.bg-light       + .owcb-block.owcb-has-no-bg-image.bg-light,
	.owcb-block.owcb-has-no-bg-image.bg-dark        + .owcb-block.owcb-has-no-bg-image.bg-dark {
		padding-top: 0 !important;
	}
}

/**
 * Background image
 */

.owcb-has-bg-image {
	position: relative; /* For overlay */
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.owcb-has-bg-image > * {
	position: relative; /* To be on top over overlay */
}
.owcb-bg-image-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}
.owcb-bg-image-overlay.-dark {
	background: rgba( var( --bs-dark-rgb ), 0.4 );
}
.owcb-bg-image-overlay.-dark-topdown {
	background: linear-gradient( 180deg, rgba( var( --bs-dark-rgb ), 0.7 ) 0%, rgba( var( --bs-dark-rgb ), 0 ) 100% );
}
.owcb-bg-image-overlay.-dark-bottomup {
	background: linear-gradient( 180deg, rgba( var( --bs-dark-rgb ), 0 ) 0%, rgba( var( --bs-dark-rgb ), 0.7 ) 100% );
}

/**
 * Headers
 */

.owcb-pre-title {
	margin: 0;
}
.owcb-pre-title + .owcb-title {
	margin-top: 0;
}

/**
 * Typography
 */

.owcb-text p:last-child {
	margin-bottom: 0;
}

.text-white .owcb-pre-title:not( .-text-colored ) {
	color: var( --bs-white ) !important;
}
.text-primary .owcb-pre-title:not( .-text-colored ) {
	color: var( --bs-primary ) !important;
}
.text-secondary .owcb-pre-title:not( .-text-colored ) {
	color: var( --bs-secondary ) !important;
}
.text-light .owcb-pre-title:not( .-text-colored ) {
	color: var( --bs-light ) !important;
}
.text-dark .owcb-pre-title:not( .-text-colored ) {
	color: var( --bs-dark ) !important;
}
.text-cta .owcb-pre-title:not( .-text-colored ) {
	color: var( --bs-cta ) !important;
}

.text-white .owcb-title:not( .-text-colored ),
.owcb-block.text-white .owcb-text h1,
.owcb-block.text-white .owcb-text h2,
.owcb-block.text-white .owcb-text h3,
.owcb-block.text-white .owcb-text h4,
.owcb-block.text-white .owcb-text h5,
.owcb-block.text-white .owcb-text h6 {
	color: var( --bs-white ) !important;
}
.text-primary .owcb-title:not( .-text-colored ) {
	color: var( --bs-primary ) !important;
}
.text-secondary .owcb-title:not( .-text-colored ) {
	color: var( --bs-secondary ) !important;
}
.text-light .owcb-title:not( .-text-colored ) {
	color: var( --bs-light ) !important;
}
.text-dark .owcb-title:not( .-text-colored ) {
	color: var( --bs-dark ) !important;
}
.text-cta .owcb-title:not( .-text-colored ) {
	color: var( --bs-cta ) !important;
}

/**
 * Fadein animation feature.
 * Note it is targeting > * to exclude block backgrounds which don't look nice to fade in/out when multiple blocks are connected for example
 */

.owcb-feature-fadein > * {
	transition: opacity 1s;
}
.owcb-feature-fadein.-is-fadeout > * {
	opacity: 0;
}

/* Make sure the video is displayed inside column with auto width */
.carousel-video-placeholder {
	width: 776px;
}