/*==================================================
EVER THEME
Hero
Version 2.0.0
==================================================*/

/* BASE
==================================================*/

.ever-hero {
	position: relative;
	min-height: calc(100vh - var(--header-height));

	display: flex;
	align-items: center;

	padding-block: var(--space-10);

	overflow: hidden;

	background: var(--color-background);
}

/* CONTAINER
==================================================*/

.ever-hero__container {
	position: relative;
	z-index: 2;

	width: min(var(--container), calc(100% - 80px));
	margin-inline: auto;

	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--space-10);

	align-items: center;
}

/* CONTENT
==================================================*/

.ever-hero__content {
	position: relative;
	z-index: 3;

	max-width: 680px;
}

.ever-hero__eyebrow {
	margin-bottom: var(--space-5);

	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);

	letter-spacing: 0.22em;
	text-transform: uppercase;

	color: var(--color-primary);
}

.ever-hero__title {
	margin: 0;

	font-size: clamp(52px, 6vw, 82px);
	line-height: 0.98;
	letter-spacing: -0.025em;

	color: var(--color-primary-dark);
}

.ever-hero__title em {
	font-weight: var(--fw-regular);
	color: var(--color-primary);
}

.ever-hero__intro {
	max-width: 590px;

	margin-top: var(--space-6);

	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);

	color: var(--color-text-light);
}

.ever-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);

	margin-top: var(--space-7);
}

/* MEDIA
==================================================*/

.ever-hero__media {
	position: relative;

	width: 100%;
	max-width: 560px;

	justify-self: end;
}

.ever-hero__image {
	position: relative;
	z-index: 2;

	aspect-ratio: 4 / 5;

	overflow: hidden;

	border-radius:
		var(--radius-xl)
		var(--radius-xl)
		180px
		var(--radius-xl);

	box-shadow: var(--shadow-md);
}

.ever-hero__image img {
	width: 100%;
	height: 100%;

	object-fit: cover;

	transition: transform 1.2s cubic-bezier(.4, 0, .2, 1);
}

.ever-hero:hover .ever-hero__image img {
	transform: scale(1.025);
}

/* DECORATIVE SHAPE
==================================================*/

.ever-hero__media::before {
	content: "";

	position: absolute;
	top: -55px;
	right: -70px;

	width: 280px;
	height: 280px;

	background: var(--color-secondary);

	border-radius: 50%;

	opacity: 0.8;
}

/* DECORATIVE LINE
==================================================*/

.ever-hero__media::after {
	content: "";

	position: absolute;
	right: -45px;
	bottom: 70px;
	z-index: 3;

	width: 150px;
	height: 150px;

	border: 1px solid var(--color-primary-light);
	border-radius: 50%;

	opacity: 0.8;
}

/* FLOATING NOTE
==================================================*/

.ever-hero__note {
	position: absolute;
	bottom: 45px;
	left: -70px;
	z-index: 4;

	max-width: 230px;

	padding: var(--space-5);

	background: rgba(255, 255, 255, 0.9);

	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);

	box-shadow: var(--shadow-sm);

	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.ever-hero__note-text {
	margin: 0;

	font-family: var(--font-heading);
	font-size: 23px;
	line-height: 1.35;

	color: var(--color-primary-dark);
}

/* BACKGROUND DECORATION
==================================================*/

.ever-hero::before {
	content: "";

	position: absolute;
	top: 15%;
	left: -180px;

	width: 420px;
	height: 420px;

	background: var(--color-secondary);

	border-radius: 50%;

	filter: blur(2px);

	opacity: 0.55;
}

.ever-hero::after {
	content: "";

	position: absolute;
	right: 12%;
	bottom: -220px;

	width: 440px;
	height: 440px;

	border: 1px solid var(--color-primary-light);
	border-radius: 50%;

	opacity: 0.5;
}

/* SIMPLE HERO
==================================================*/

.ever-hero--simple {
	min-height: auto;

	padding-block:
		var(--space-10)
		var(--space-9);
}

.ever-hero--simple .ever-hero__container {
	display: block;
}

.ever-hero--simple .ever-hero__content {
	max-width: 900px;
	margin-inline: auto;

	text-align: center;
}

.ever-hero--simple .ever-hero__title {
	font-size: clamp(48px, 6vw, 76px);
}

.ever-hero--simple .ever-hero__intro {
	margin-inline: auto;
}

/* CENTERED HERO
==================================================*/

.ever-hero--centered {
	min-height: 75vh;

	text-align: center;
}

.ever-hero--centered .ever-hero__container {
	display: block;
}

.ever-hero--centered .ever-hero__content {
	max-width: 920px;
	margin-inline: auto;
}

.ever-hero--centered .ever-hero__intro {
	margin-inline: auto;
}

.ever-hero--centered .ever-hero__actions {
	justify-content: center;
}

/* RESPONSIVE
==================================================*/

@media (max-width: 1024px) {

	.ever-hero {
		min-height: auto;
	}

	.ever-hero__container {
		width: calc(100% - 56px);

		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.ever-hero__content {
		max-width: 760px;
	}

	.ever-hero__media {
		width: min(620px, 90%);
		margin-inline: auto;

		justify-self: center;
	}

	.ever-hero__note {
		left: -30px;
	}

}

/* TABLET / MOBILE
==================================================*/

@media (max-width: 768px) {

	.ever-hero {
		padding-block:
			var(--space-8)
			var(--space-9);
	}

	.ever-hero__container {
		width: calc(100% - 40px);
		gap: var(--space-7);
	}

	.ever-hero__title {
		font-size: clamp(46px, 13vw, 64px);
		line-height: 1.02;
	}

	.ever-hero__intro {
		margin-top: var(--space-5);

		font-size: var(--fs-sm);
	}

	.ever-hero__actions {
		margin-top: var(--space-6);
	}

	.ever-hero__media {
		width: 100%;
	}

	.ever-hero__image {
		aspect-ratio: 4 / 5;

		border-radius:
			var(--radius-lg)
			var(--radius-lg)
			110px
			var(--radius-lg);
	}

	.ever-hero__media::before {
		top: -35px;
		right: -60px;

		width: 200px;
		height: 200px;
	}

	.ever-hero__media::after {
		right: -25px;
		bottom: 40px;

		width: 110px;
		height: 110px;
	}

	.ever-hero__note {
		bottom: 25px;
		left: -10px;

		max-width: 200px;

		padding: var(--space-4);
	}

	.ever-hero__note-text {
		font-size: 20px;
	}

	.ever-hero--simple {
		padding-block:
			var(--space-8)
			var(--space-7);
	}

}

/* SMALL MOBILE
==================================================*/

@media (max-width: 480px) {

	.ever-hero__container {
		width: calc(100% - 32px);
	}

	.ever-hero__title {
		font-size: 44px;
	}

	.ever-hero__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.ever-hero__actions .ever-button {
		width: 100%;
	}

	.ever-hero__note {
		position: relative;
		bottom: auto;
		left: auto;

		max-width: none;

		margin:
			calc(var(--space-5) * -1)
			var(--space-4)
			0;
	}

}