/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL widgets in the Slider family. This enables the ability to
	a family of widgets in a single update without touching the structure of the widget and without needing
	to duplicate efforts across several widget-specific CSS files.
*/

.core-hero-image .img-cont:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 49.88%, rgba(0, 0, 0, 0.72) 100%) transparent;
	pointer-events: none;
}

.ccl-widget.core-hero-image .slide p {
	font-size: var(--text-15);
	color: var(--cream);
	line-height: 1.46;
	font-weight: 400;
	display: flex;
	gap: var(--space-1);
	flex-direction: column;
	align-items: flex-start;
}

.core-hero-image .read-more {
	color: var(--cream);
	font-weight: 500;
	font-size: var(--text-lg);
	text-transform: uppercase;
	text-decoration: none;
	font-family: var(--nickson-6);
	display: flex;
	align-items: center;
	gap: 6px;
}

.core-hero-image .slide .content-section p a::after {
	content: '';
	background-image: url(/includes/public/assets/shared/red-arrow.svg);
	background-size: cover;
	display: block;
	transform: translateY(-1px);
	height: 13px;
	width: 19px;
}

.core-hero-image .content-section {
	padding: var(--space-6) 29px;
}

.ccl-widget.core-hero-image .sponsored {
	position: static;
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	letter-spacing: 1.2px;
	line-height: var(--leading-none);
	padding: 10px var(--space-2);
	color: var(--cream);
	background: rgba(48, 40, 34, 0.48);
	text-transform: uppercase;
	pointer-events: none;
	margin-bottom: var(--space-2);
}

.ccl-widget.core-hero-image .slide-title {
	font-size: var(--text-29);
	font-family: var(--nickson-6);
	margin-bottom: var(--space-2);
	font-weight: 400;
	line-height: normal;	
	max-width: 80%;
	pointer-events: none;
}

.core-hero-image::after {
	content: '';
	background: url(/includes/public/assets/shared/hero-bottom-texture.svg) no-repeat;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 38px;
	width: 100%;
	background-position: right top;
}

.core-hero-image .shared-play-button {
	left: unset;
	top: 20px;
	right: 20px;
	transform: unset;
}

@media (min-width: 40em) {
	.core-hero-image::after {
		background: url(/includes/public/assets/shared/hero-bottom-texture-desktop.svg) no-repeat;
		height: 28px;
		background-position: right top;
	}
}

@media (min-width: 64em) {
	.ccl-widget.core-hero-image {
		margin-bottom: var(--space-8);
	}
	.ccl-widget.core-hero-image .slide-title {
		font-size: 36px;
		font-family: var(--nickson-6);
		margin-bottom: var(--space-2);
		font-weight: 400;
		line-height: normal;
		max-width: 80%;
		pointer-events: none;
	}

	.ccl-widget.core-hero-image .slide p {
		font-size: var(--text-17);
		line-height: 1.52;
	}

	.core-hero-image .read-more {
		font-size: var(--text-19);
	}

	.ccl-widget.core-hero-image .slide p {
		gap: var(--space-3);
	}
}

@media (min-width: 1200px) {
	.core-hero-image .content-section {
		padding: var(--space-6) var(--space-20);
		padding-left: min(calc(28px + (124 - 28) * ((100vw - 1200px) / (1440 - 1200))), 124px);
	}
}

@media (max-width: 40em) {
	.core-hero-image.hide-mobile{
		display: none;
		height: 0px;
	}
}