/*
	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 .slide .img-cont { border-radius: unset; }

.core-hero-image:not(.hide-content) .slide .img-cont::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 30% 90%, rgba(0,0,0,0.75) 0%, rgba(255,255,255,0) 55%);
	pointer-events: none;
}

.core-hero-image:not(.hide-content) .slide .img-cont .shared-play-button {
	top: var(--space-3);
	left: unset;
	right: var(--space-3);
	transform: unset;
}

.core-hero-image .slide .content-section {
	max-width: 680px;
	padding: var(--space-5);
	padding-bottom: var(--space-6);
}

.core-hero-image .slide.overlap-image :is(.slide-title, .slide-title a) {
	max-width: 100%;
	font-family: var(--font-cormorant);
	font-size: 2rem;
	font-weight: 400;
	line-height: var(--leading-none);
	letter-spacing: var(--tracking-normal);
	color: var(--white);
}

.core-hero-image .slide p {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	font-family: var(--font-work);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
	color: var(--white);
}

.core-hero-image .slide .read-more {
	position: relative;
	z-index: 1;
	display: inline-block;
	font-family: var(--font-work);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sw-button-primary-color);
	text-decoration: none;
	text-transform: uppercase;
	background: transparent;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--rounded-full);
	margin: 0;
	pointer-events: all;
	transition: background 300ms ease-out, color 300ms ease-out;
}

.core-hero-image .slide .read-more::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	height: 100%;
	width: 100%;
	background: var(--sw-button-primary-bg);
	border-radius: var(--rounded-full);
	opacity: 1;
	transition: opacity 300ms ease-out;
	pointer-events: none;
}

@media (hover: hover) {
	.core-hero-image .slide p > a.read-more:hover {
		text-decoration: none;
		color: var(--sw-site-bluexl);
		background: var(--sw-site-blue);
	}

	.core-hero-image .slide p > a.read-more:hover::before { opacity: 0; }
}

@media (min-width: 40em) {
	.core-hero-image:not(.hide-content) .slide .img-cont::after {
		background: radial-gradient(circle at 10% 90%, rgba(0,0,0,0.65) 0%, rgba(255,255,255,0) 55%);
	}
}

@media (min-width: 64em) {
	.core-hero-image:not(.hide-content) .slide .img-cont::after {
		background: radial-gradient(circle at 0% 90%, rgba(0,0,0,0.65) 0%, rgba(255,255,255,0) 60%);
	}

	.core-hero-image .slide .content-section {
		padding: var(--space-5) var(--space-8);
		bottom: var(--space-2);
	}

	.core-hero-image .slide.overlap-image :is(.slide-title, .slide-title a) {
		font-size: 2.75rem;
		line-height: 1.1;
	}
	
	.core-hero-image .slide p {
		gap: var(--space-8);
		font-size: 1rem;
	}

	.core-hero-image .slide .read-more {
		font-size: 16px;
		padding: var(--space-3) var(--space-6);
	}
}

@media (min-width: 90em) {
	.core-hero-image .slide .content-section {
		padding: var(--space-5) 60px;
		bottom: 36px;
	}
}