/*
	README

	This file should only be used to style structure of the widget. It should not
	contain fonts or theme styling. Use the shared_theme.css for that purpose.

	If simply theming the CCL, leave this file alone.

	If your design is very customized, edit this file as needed. 
*/

.core-hero-preview-slideshow {
	margin: 30px 0;
	padding-bottom: 62px;
}

@media (min-width: 40em) {
	.core-hero-preview-slideshow {
		margin: var(--space-10) 0;
		padding-bottom: 86px;
	}
}

@media (min-width: 64em) {
	.core-hero-preview-slideshow {
		margin: 60px 0;
	}
}

.core-hero-preview-slideshow .slider-cont {
	position: relative;
	opacity: 0;
	height: 0;
	padding-top: 56.84%; /* Aspect ratio for 320x181.9 */
}

/* Aspect ratio changes due to different peek and gap values at various breakpoints */
@media (min-width: 743px) {
	.core-hero-preview-slideshow .slider-cont {
		padding-top: 30.78%; /* Aspect ratio for 743.2x228.78 */
	}
}

@media (min-width: 942px) {
	.core-hero-preview-slideshow .slider-cont {
		padding-top: 24.21%; /* Aspect ratio for 942.4x228.1 */
	}
}

@media (min-width: 1100px) {
	.core-hero-preview-slideshow .slider-cont {
		padding-top: 29.67%; /* Aspect ratio for 1100x326.39 */
	}
}

@media (min-width: 1279px) {
	.core-hero-preview-slideshow .slider-cont {
		padding-top: 24.45%; /* Aspect ratio for 1279.2x312.68 */
	}
}

@media (min-width: 1387px) {
	.core-hero-preview-slideshow .slider-cont {
		padding-top: 22.92%; /* Aspect ratio for 1387.2x317.9 */
	}
}

@media (min-width: 1547px) {
	.core-hero-preview-slideshow .slider-cont {
		padding-top: 23.08%; /* Aspect ratio for 1547.2x357.06 */
	}
}

@media (min-width: 1700px) {
	.core-hero-preview-slideshow .slider-cont {
		padding-top: 26.88%; /* Aspect ratio for 1700x456.94 */
	}
}

@media (min-width: 1855px) {
	.core-hero-preview-slideshow .slider-cont {
		padding-top: 23.05%; /* Aspect ratio for 1855.2x427.56 */
	}
}

.core-hero-preview-slideshow.js-loaded .slider-cont {
	opacity: 1;
	height: auto; /* Ensure height is auto after load */
	padding-top: 0;
}

/* Initial scale and transition */
.core-hero-preview-slideshow .slide .slide-img {
	position: relative;
	border-radius: 10px;
	transform: scale(0.84);
	transition: none; /* No transition initially */
}

/* Scaling up when active */
.core-hero-preview-slideshow .slide.glide_slide-is-active .slide-img {
	transform: scale(1);
}

/* Scaling down when not active */
.core-hero-preview-slideshow .slide:not(.glide_slide-is-active) .slide-img {
	transform: scale(0.84);
}

/* Enable transition after initialization */
.core-hero-preview-slideshow.js-transition-enabled .slide .slide-img {
	transition: transform 1s ease-in;
}

.core-hero-preview-slideshow .glide__arrows {
	position: absolute;
	bottom: -62px;
	z-index: 10;
	width: 100%;
	padding: 0 var(--space-5);
	pointer-events: none;
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

@media (min-width: 40em) {
	.core-hero-preview-slideshow .glide__arrows {
		bottom: -86px;
	}
}

.core-hero-preview-slideshow .glide__arrow:focus {
	border: 3px solid var(--secondary-color);
}

.core-hero-preview-slideshow .header-cont {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px var(--space-5);
	margin: auto;
	text-align: center;
}

@media screen and (min-width: 40em) {
	.core-hero-preview-slideshow .header-cont {
		max-width: calc(2 * var(--space-5) + 538px);
	}
}

@media screen and (min-width: 64em) {
	.core-hero-preview-slideshow .header-cont {
		max-width: calc(2 * var(--space-5) + 832px);
	}
}

.core-hero-preview-slideshow .header-cont .title {
	max-width: 309px;
	padding-bottom: var(--space-5);
}

@media screen and (min-width: 40em) {
	.core-hero-preview-slideshow .header-cont .title {
		max-width: 478px;
	}
}

@media screen and (min-width: 64em) {
	.core-hero-preview-slideshow .header-cont .title {
		max-width: 712px;
	}
}

.core-hero-preview-slideshow .header-cont .title {
	opacity: 1;
}

.core-hero-preview-slideshow .slide .slide-img {
	position: relative;
	border-radius: 10px;
	transform: scale(0.84);
	transition: none;
}

.core-hero-preview-slideshow .slide:not(.glide_slide-is-active) .slide-img {
	transform: scale(0.84);
}

.core-hero-preview-slideshow .slide.glide_slide-is-active .slide-img {
	transform: scale(1);
}

.core-hero-preview-slideshow.js-transition-enabled .slide .slide-img {
	transition: transform 1s ease-in;
}