.ccl-widget.highlight { margin-bottom: var(--space-24); }

/* Widget Header */
.ccl-widget.highlight .widget-header {
	position: relative;
	margin-bottom: var(--space-12);
}

.ccl-widget.highlight .widget-header::before {
	content: '';
	position: absolute;
	bottom: -34px;
	left: 50%;
	transform: translateX(-50%);
	width: 74px;
	height: 16px;
	background: url(/includes/public/assets/shared/yellow-wave-icon.svg);
	background-repeat: no-repeat;
	background-size: 100%;
	pointer-events: none;
}

.ccl-widget.highlight .widget-header-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: nowrap;
	padding-bottom: 0;
}

.ccl-widget.highlight .widget-subtitle {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: var(--leading-none);
	letter-spacing: 0.25em;
	color: var(--black);
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 10px;
}

.ccl-widget.highlight .widget-title {
	font-family: var(--font-display);
	font-size: var(--text-3xl-3);
	line-height: var(--leading-none);
	letter-spacing: var(--tracking-normal);
	font-weight: 500;
	color: var(--blue);
	text-align: center;
	margin-right: 0;
}

/* Slides */
.ccl-widget.highlight .slides {
	max-width: 1230px;
	position: relative;
	padding: var(--space-3) var(--space-5) 0;
	margin: 0 auto;
	overflow: hidden;
}

.ccl-widget.highlight .slides::before {
	content: '';
	position: absolute;
	left: -12px;
	top: 0;
	z-index: -1;
	width: calc(100% + 24px);
	height: 66%;
	background: url(/includes/public/assets/shared/highlight-wave-background.svg);
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0.1;
	pointer-events: none;
}

.ccl-widget.highlight .slides .slides-inner {
	display: grid;
	gap: var(--space-2);
	max-width: 984px;
	margin: 0 auto;
}

.ccl-widget.highlight .slides article.slide { cursor: default; }

.ccl-widget.highlight .slides .slide > .inner {
	position: relative;
	overflow: hidden;
}

.ccl-widget.highlight .slides .slide > .inner .img-cont {
	position: relative;
	overflow: hidden;
}

.ccl-widget.highlight .slides .slide > .inner .img-cont .shared-play-button {
	transform: scaleY(1);
	left: unset;
	top: var(--space-2);
	right: var(--space-2);
	height: var(--space-10);
	width: var(--space-10);
	font-size: var(--text-sm);
}

.ccl-widget.highlight .slides .slide > .inner .img-cont::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--black);
	opacity: 0.2;
	pointer-events: none;
	transition: opacity 450ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.ccl-widget.highlight .slide-title-cont {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: var(--space-5) var(--space-6);
	pointer-events: none;
}

.ccl-widget.highlight .slide-title-cont .slide-title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 500;
	color: var(--white);
	line-height: var(--leading-none);
	letter-spacing: var(--tracking-normal);
	text-transform: uppercase;
	text-shadow: 0 3px 6px rgba(0, 0, 0, 0.29);
}

/* Slides - Content-section */
.ccl-widget.highlight .content-slides { display: none; }


@media (min-width: 64em) {
	.ccl-widget.highlight {
		padding-bottom: var(--space-16);
		margin-bottom: var(--space-6);
	}
	
	/* Widget Header */
	.ccl-widget.highlight .widget-header {
		margin-bottom: var(--space-16);
	}

	.ccl-widget.highlight .widget-header::before { bottom: -26px; }

	.ccl-widget.highlight .widget-subtitle { margin-bottom: var(--space-4); }
	
	.ccl-widget.highlight .widget-title {
		font-size: 3.375rem;
		letter-spacing: var(--tracking-tight);
	}

	/* Slides */
	.ccl-widget.highlight .slides {
		overflow: unset;
		padding: 0 var(--space-10);
		margin-bottom: var(--space-12);
	}

	.ccl-widget.highlight .slides .slides-inner {
		display: flex;
		gap: 6px;
		transition: max-width 250ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
	}

	.ccl-widget.highlight .slides .slides-inner.active { max-width: 100%; }

	.ccl-widget.highlight .slides::before {
		content: '';
		position: absolute;
		left: -105px;
		top: -20px;
		z-index: -1;
		width: 568px;
		height: 535px;
		background: url(/includes/public/assets/shared/highlight-wave-background-lg.svg);
		background-size: contain;
		background-repeat: no-repeat;
		opacity: 0.1;
		pointer-events: none;
	}

	.ccl-widget.highlight .slides .slide {
		flex: 1;
		position: relative;
		aspect-ratio: 159 / 411;
		transform: scaleY(1);
		transition: transform 450ms ease-out, flex 450ms cubic-bezier(0.1, 0.9, 0.3, 1.1);
		transform-origin: center;
		max-height: 411px;
	}

	.ccl-widget.highlight .slides .slide.active {
		flex-grow: 2.03;
		transform: scaleY(1.118);
		outline: 6px solid var(--white);
	}

	.ccl-widget.highlight .slides .slides-inner.active .slide:not(.active) > .inner .img-cont::after { opacity: 0.5; }

	.ccl-widget.highlight .slides .slide > .inner,
	.ccl-widget.highlight .slides .slide .img-cont,
	.ccl-widget.highlight .slides .slide .img-cont img { height: 100%; }

	.ccl-widget.highlight .slides .slide .img-cont img { object-fit: cover; }

	.ccl-widget.highlight .slides .slide > .inner .img-cont .shared-play-button {
		transition: transform 450ms cubic-bezier(0.55, 0.085, 0.68, 0.53); 
	}

	.ccl-widget.highlight .slides .slide.active > .inner .img-cont .shared-play-button {
		transform: scaleY(0.882);
	}

	.ccl-widget.highlight .slide-title-cont {
		max-height: 40ch;
		left: 50%;
		transform:translateX(-50%);
		padding: var(--space-5) var(--space-5) var(--space-12);
		opacity: 1;
		transition: opacity 450ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
	}

	.ccl-widget.highlight .slides .slide.active .slide-title-cont {
		opacity: 0;
	}

	.ccl-widget.highlight .slide-title-cont .slide-title {
		writing-mode: vertical-rl;
		transform: scale(-1);
		max-height: 25ch;
	}

	/* Slides - Content Section */
	.ccl-widget.highlight .content-slides {
		max-width: 1190px;
		display: block;
		text-align: center;
		padding: 0 var(--space-5);
		margin: 0 auto;
	}

	.ccl-widget.highlight .content-slides > .inner {
		position: relative;
		max-width: 710px;
		margin: 0 auto;
	}

	.ccl-widget.highlight .content-slides .content-slide {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
	}

	.ccl-widget.highlight .content-slides .content-slide.active {
		display: block;
		position: relative;
		opacity: 1;
		pointer-events: all;
		transition: opacity 450ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
	}

	.ccl-widget.highlight .content-slides .content-slide .slide-title {
		font-family: var(--font-display);
		font-size: 2rem;
		font-weight: 500;
		line-height: var(--leading-tight);
		letter-spacing: var(--tracking-normal);
		color: var(--blue);
		text-transform: uppercase;
		text-align: center;
		margin-bottom: var(--space-3);
		transform: scale(1.1) translate(15px, -15px);
		transition: transform 450ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
	}

	.ccl-widget.highlight .content-slides .content-slide.active .slide-title { transform: scale(1) translate(0, 0); }

	.ccl-widget.highlight .content-slides .content-slide .description {
		font-family: var(--font-body);
		font-size: var(--text-sm);
		font-weight: 400;
		line-height: var(--leading-tight);
		letter-spacing: var(--tracking-wide);
		color: var(--black);
		text-align: center;
		margin-bottom: var(--space-5);
	}

	.ccl-widget.highlight .content-slides .content-slide a.read-more {
		position: relative;
		color: var(--btn-text-color);
		border-radius: var(--rounded-full);
		padding: unset;
		margin: unset;
		font-weight: 600;
		font-size: var(--text-sm);
		letter-spacing: -0.01em;
		text-transform: uppercase;
		text-decoration: none;
	}

	.ccl-widget.highlight .content-slides a.read-more::before {
		content: "\f067";
		position: relative;
		display: inline-block;
		width: 8.19px;
		top: -2px;
		margin-right: 1px;
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 8.5px;
		text-align: center;
		opacity: 1;
		margin-right: var(--space-1);
		transition: opacity ease-out 250ms, transform ease-out 250ms;
	}

	.ccl-widget.highlight .content-slides a.read-more::after {
		content: "";
		width: 0;
		height: 2px;
		background-color: #EE461F;
		opacity: 0;
		transition: width ease-out 300ms, opacity ease-out 300ms;
		position: absolute;
		bottom: 0px;
		left: 12px;
	}

	@media (hover: hover) {
		.ccl-widget.highlight .content-slides a.read-more:hover::before {
			opacity: 0;
			transform: scale(0);
		}

		.ccl-widget.highlight .content-slides a.read-more:hover::after {
			width: calc(100% - 12px);
			opacity: 1;
		}
	}
}