/* ========================================================
	WEBSITE - HOMEPAGE HERO
	ETOS JONG © FORWARD STUDIO
======================================================== */



/* ============================
	HERO - BACKGROUND & OVERLAY
============================ */

.hero__block {
	align-items: center;
	background-color: #D58DA8;
	background-image: url("../../images/hero/etos-jong-medemblik-hero.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	height: auto;
	isolation: isolate;
	min-height: clamp(27rem, 35vw, 54rem);
	overflow: hidden;
	padding: 5rem 0;
	position: relative;
}

.hero__block::before {
	background: linear-gradient(90deg,
			rgba(0, 0, 0, .67) 0%,
			rgba(0, 0, 0, .54) 20%,
			rgba(0, 0, 0, .30) 39%,
			rgba(0, 0, 0, .08) 55%,
			rgba(0, 0, 0, 0) 72%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.hero__block>.container {
	position: relative;
	z-index: 1;
}



/* ============================
	HERO - CONTENT & BUTTON
============================ */

.hero__block .hero--content {
	gap: 0;
	max-width: 43rem;
}

.hero__block .hero--title {
	color: #FFF;
	font-size: clamp(2.6rem, 3.65vw, 4.5rem);
	letter-spacing: -.025em;
	line-height: 1.08;
	margin: 0;
	text-align: left;
	text-wrap: balance;
}

.hero__block .button--box {
	display: flex;
	justify-content: flex-start;
	margin-top: 2rem;
}

.hero__block a.hero--button {
	font-size: 1.2rem;
	padding: 1.15rem 1.4rem;
}

.hero__block a.hero--button:focus-visible {
	outline: .1875rem solid #FFF;
	outline-offset: .1875rem;
}



/* ============================
	HERO - TABLET
============================ */

@media (min-width: 768px) and (max-width: 1199.98px) {

	.hero__block {
		min-height: 32rem;
		padding: 4rem 0;
	}

	.hero__block .hero--title {
		font-size: clamp(2.75rem, 4.5vw, 3.75rem);
	}

}



/* ============================
	HERO - MOBILE
============================ */

@media (max-width: 767.98px) {

	.hero__block {
		min-height: 31rem;
		padding: 4rem 0;
	}

	.hero__block::before {
		background: linear-gradient(90deg,
				rgba(0, 0, 0, .72) 0%,
				rgba(0, 0, 0, .52) 65%,
				rgba(0, 0, 0, .30) 100%);
	}

	.hero__block .hero--content {
		margin-top: 0;
		max-width: 27rem;
	}

	.hero__block .hero--title {
		font-size: clamp(2.1rem, 8vw, 3.1rem);
		line-height: 1.12;
		margin-bottom: 0;
		text-align: left;
	}

	.hero__block .button--box {
		justify-content: flex-start;
		margin-top: 1.75rem;
	}

	.hero__block a.hero--button {
		font-size: 1.05rem;
		padding: 1rem 1.2rem;
	}

}