/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL widgets in the Header Slideshow 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-slideshow {
	--text-container-width: var(--width-comfortable);
	--letter-spacing: var(--tracking-wide);
	--title-text-size: var(--text-2xl);
	--btn-text-size: var(--text-base);
	--text-size: var(--text-base);

	position: relative;
}

.core-hero-slideshow .slide .img-cont::after {
	content: "";
	background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 40%);
	top: 0;
	left: 0;
	position: absolute;
	pointer-events: none;
	height: 100%;
	width: 100%;
}

.core-hero-slideshow .slide-title {
	font-weight: 700;
	line-height: var(--leading-tight);
	font-size: var(--title-text-size);
}

.core-hero-slideshow .slide p {
	color: var(--text-color);
	font-size: var(--text-size);
	font-weight: normal;
	line-height: var(--leading-normal);
}


/*--Customization--*/

/*--CONTENT--*/
.core-hero-slideshow .content-section {
	padding-bottom: 25px;
}
.core-hero-slideshow.hide-content .slide .img-cont::after {
	display: none;
}
.core-hero-slideshow .content-section .slide-title {
	font-family: var(--font-smithsonian);
	font-size: 24px;
	color: var(--white);
	text-transform: lowercase;
	margin-bottom: 6px;
}
.core-hero-slideshow .content-section p.description {
	font-family: var(--font-montserrat);
	font-size: 12px;
	font-weight: 100;
	color: var(--white);
	letter-spacing: 1px;
	line-height: 1.7;
	text-decoration: none;
	margin-bottom: 5px;
	padding-right: 10px;
}
/*--BUTTON--*/
.core-hero-slideshow .slide .slide-footer .read-more {
	margin-left: 20px;
	width: 86px;
	height: 24px;
	font-size: 0px;
}
.core-hero-slideshow .slide a.read-more:not(p *),
.core-hero-slideshow .slide .slide-footer a {
	background: url("/includes/public/assets/shared/patina-CTA.svg");
	background-repeat: no-repeat;
	border: none;
	width: 150px;
	height: 25px;
	margin-left: 15px;
	font-size: 0px; 
	opacity: 1;
}
.core-hero-slideshow .slide a.read-more:not(p *):hover,
.core-hero-slideshow .slide .slide-footer a:hover {
	background: url("/includes/public/assets/shared/patina-CTA.svg");
	background-repeat: no-repeat;
	border: none;
	width: 86px;
	height: 24px;
	transform: translate(0px, 0px);
	z-index: 1;
}
.core-hero-slideshow .slide .shared-play-button {
	right: 0%;
	left: auto;
    top: 20%;
    z-index: 10;
    transform: translate(-30%, 0%);
}
/*--ARROW--*/
.core-hero-slideshow .glide__arrows .glide__arrow {
	font-weight: 100;
	width: 30px;
	height: 33px;
	background: var(--orange-d7);
	color: var(--white);
	box-shadow: none;
}
.core-hero-slideshow .arrows-cont .glide__arrows {
	display: flex;
	left: auto;
	right: 0px;
	gap: 12px;
}
.core-hero-slideshow .glide__arrows .count {
	color: var(--white);
	font-size: 12px;
	font-weight: 900;
	align-self: center;
}

@media screen and (min-width:40em) {
	/*--IMAGE--*/
	.core-hero-slideshow .slide .img-cont::after {
		background: radial-gradient(ellipse at bottom left, rgba(0, 0, 0, 0.9) -30%, transparent 51%);
	}
	/*--CONTENT--*/
	.core-hero-slideshow .content-section {
		bottom: var(--space-1);
		left: 28px;
		max-width: 630px;
		margin-bottom: 24px;
	}
	.core-hero-slideshow .content-section .slide-title {
		font-size: 28px;
		margin-bottom: 3px;
		width: 100%;
	}
	.core-hero-slideshow .content-section p.description {
		line-height: 1.45;
		padding-bottom: 55px;
		width: 70%;
	}
	/*--ARROW--*/
	.core-hero-slideshow .arrows-cont .glide__arrows {
		right: var(--space-10);
		bottom: 58px;
		gap: 18px;
		padding: 0px;
	}
	.core-hero-slideshow .glide__arrows .glide__arrow {
		width: 45px;
		height: 50px;
		font-size: 25px;
	}
	.core-hero-slideshow .glide__arrows .count {
		font-size: 18px;
	}
}

@media screen and (min-width:64em) {
	/*--CONTENT--*/
	.core-hero-slideshow .content-section p.description {
		width: 100%;
		font-size: 16px;
		line-height: 1.6;
		padding-bottom: 40px;
		color: var(--white);
	}
	.core-hero-slideshow .slide .shared-play-button {
		transform: translate(-30%, 30%);
	}
}