/*
	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. 
*/


.hero-image {
	--text-color: var(--white);
	aspect-ratio: auto;
	position: relative;
	z-index: 2;
	clip-path: polygon(
		0 0,
		100% 0,
		100% 90%,
		0 100%
	);
}

.hero-image .slide > .inner {
	display: grid;
}

/* .hide-content also hides gradient */
.hero-image.hide-content .img-cont:after,
.hero-slideshow.hide-content .slide .img-cont:after, 
.hero-preview-slideshow.hide-content .img-cont:before {
	content: none;
}

.hero-image .slide .img-cont,
.hero-image .slide .content-section {
	grid-column-start: 1;
	grid-row-start: 1;
}

.hero-image .content-section {
	position: relative;
	padding: var(--space-8);
	margin-bottom: var(--space-6);
	width: 100%;
	max-width: var(--width-comfortable);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-3);
	pointer-events: none;
}

.hero-image.hero-image-homepage .content-section .og-pattern {
	position: absolute;
	bottom: -5%;
	left: 0;
	width: 240px;
}

.panel-content-cta .hero-image.hero-image-homepage .content-section .og-pattern {
	display: none;
}

.hero-image .slide-title {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-2);
	line-height: var(--leading-tight);
	max-width: 80%;
	pointer-events: none;
}

.hero-image.hero-image-interior .slide-title {
	font-size: 22px;
}

.hero-image .title-desc-container {
	width: 100%;
	max-width: var(--width-comfortable);
}

.hero-image.hero-image-homepage .slide-title {
	font-size: 26px;
}

.hero-image .img-cont .credits {
	position: absolute;
	top: 0;
	right: -87px;
	bottom: unset;
	background: rgb(45, 43, 43, 0.6);
	margin: 0;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-body);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	transform-origin: left top;
	transform: rotate(-90deg) translate(-100%);
}

@media (min-width: 769px) {
	.hero-image {
		clip-path: polygon(0 0, 100% 0, 100% 87%, 0% 100%);
		max-width: calc(100% - 52px);
	}
	
	.hero-image .banner-title {
		max-width: 70%;
	}
	
	.hero-image .content-section {
		margin-bottom: var(--space-3);
		max-width: 30%;
	}
	
	.hero-image.hero-image-homepage .content-section .og-pattern {
		width: 320px;
		bottom: -8%;
	}
}

@media (min-width: 1024px) {
	.hero-image {
		clip-path: polygon(0 0, 100% 0, 100% 93%, 0% 100%);
	}
	.hero-image.hero-image-homepage .slide-title {
		font-size: 36px;
	}
	.hero-image.hero-image-homepage .read-more {
		font-size: 17px;
	}
	.hero-image.hero-image-interior .slide-title {
		font-size: 24px;
	}
	.hero-image.hero-image-interior .read-more {
		font-size: 17px;
	}
}