/* RPM Page Hero — interior page hero banner (see rpm-page-hero.php) */

@keyframes rpm-hero-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes rpm-hero-panel-in {
	from { opacity: 0; transform: translateX(-28px); }
	to { opacity: 1; transform: translateX(0); }
}

.rpm-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* Matches the gradient's own tone instead of black, so there's nothing
	   jarring behind the photo during the brief window before it loads. */
	background: var(--rpm-hero-grad-end, #687178);
}

.rpm-hero__panel {
	position: relative;
	z-index: 2;
	order: 1;
	width: 100%;
	padding: 40px 0 36px;
	background: radial-gradient(ellipse at top left, var(--rpm-hero-grad-end, #687178), var(--rpm-hero-grad-start, #44494F));
	animation: rpm-hero-panel-in 0.7s ease-out both;
}

.rpm-hero__inner {
	width: 100%;
	max-width: 1215px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

.rpm-hero__eyebrow {
	margin: 0 0 10px;
	font-family: 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.rpm-hero__heading {
	margin: 0 0 16px;
	max-width: 620px;
	font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.1;
	color: #fff;
}

.rpm-hero__subheading {
	margin: 0 0 16px;
	max-width: 620px;
	font-family: 'Barlow', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.85);
}

.rpm-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Barlow', sans-serif;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: #fff;
	text-decoration: underline;
}

.rpm-hero__cta:hover,
.rpm-hero__cta:focus {
	color: #fff !important;
	opacity: 0.6;
}

.rpm-hero__cta-icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: #fff;
	opacity: 0.6;
}

.rpm-hero__photo {
	order: 2;
	width: 100%;
	height: 110px;
	background-size: cover;
	background-position: center;
	animation: rpm-hero-fade-in 0.8s ease-out 0.1s both;
}

@media (min-width: 992px) {

	.rpm-hero {
		flex-direction: row;
	}

	.rpm-hero__panel {
		position: relative;
		width: 62%;
		min-height: 320px;
		padding: 40px 0;
		display: flex;
		align-items: center;
		clip-path: polygon(0 0, 90% 0, 95% 48%, 89% 100%, 0 100%);
	}

	.rpm-hero__heading {
		font-size: 48px;
	}

	.rpm-hero__photo {
		position: absolute;
		top: 0;
		right: 0;
		left: 50%;
		width: auto;
		height: 100%;
		order: initial;
	}
}