/**
 * HALINK C9 — Page hero (Luxury Spa)
 */

.hl-page-hero {
	position: relative;
	isolation: isolate;
	background-color: var(--hl-primary);
	background-size: cover;
	background-position: center;
	color: #fff;
	min-height: clamp(180px, 28vw, 260px);
	display: flex;
	align-items: center;
	padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

.hl-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(20, 28, 18, 0.78) 0%, rgba(20, 28, 18, 0.42) 55%, rgba(20, 28, 18, 0.28) 100%);
	z-index: -1;
}

.hl-page-hero__title {
	margin: 0 0 0.75rem;
	font-family: var(--hl-font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.15;
	color: #fff;
}

.hl-page-hero__breadcrumb,
.hl-page-hero .breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	background: transparent;
	padding: 0;
	margin: 0;
	font-size: 0.86rem;
	font-weight: 500;
}

.hl-page-hero .breadcrumb-item,
.hl-page-hero .breadcrumb-item a,
.hl-page-hero__current {
	color: rgba(255, 255, 255, 0.84);
	padding: 0;
	text-decoration: none;
}

.hl-page-hero .breadcrumb-item a:hover {
	color: var(--hl-gold);
}

.hl-page-hero .breadcrumb-item + .breadcrumb-item::before {
	display: none;
}

.hl-page-hero__sep {
	color: rgba(255, 255, 255, 0.45);
	margin-inline: 0.15rem;
}

.hl-page-hero__current {
	color: #fff;
}