/**
 * Foundation Right Pro - Inner-page banner
 * Short maroon-gradient banner used at the top of secondary page templates
 * (About Us, Contact Us, ...), plus the outline-on-dark button variant used
 * on those same dark surfaces.
 */

.frp-page-banner {
	position: relative;
	overflow: hidden;
	padding-top: clamp(3.5rem, 2rem + 5vw, 5.5rem);
	padding-bottom: clamp(3.5rem, 2rem + 5vw, 5.5rem);
	background: var(--frp-gradient-maroon);
	color: var(--frp-white);
}

.frp-page-banner__bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.frp-page-banner__overlay {
	position: absolute;
	inset: 0;
	background: var(--frp-gradient-hero);
}

.frp-page-banner__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

.frp-page-banner__breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: var(--frp-space-2);
	margin-bottom: var(--frp-space-4);
	color: var(--frp-on-dark-70);
	font-size: var(--frp-fs-sm);
	font-weight: var(--frp-fw-medium);
}

.frp-page-banner__breadcrumb a {
	color: var(--frp-on-dark-70);
}

.frp-page-banner__breadcrumb a:hover {
	color: var(--frp-white);
}

.frp-page-banner__title {
	margin-bottom: var(--frp-space-4);
	color: var(--frp-white);
	font-size: var(--frp-fs-h1);
}

.frp-page-banner__text {
	max-width: 38rem;
	margin-inline: auto;
	color: var(--frp-on-dark-70);
	font-size: var(--frp-fs-lead);
	line-height: var(--frp-lh-loose);
}

/* Outline button readable on any dark maroon surface (page banner, CTA panels). */
.frp-btn--outline-white {
	border-color: rgba(255, 255, 255, 0.7);
	background-color: transparent;
	color: var(--frp-white);
}

.frp-btn--outline-white:hover,
.frp-btn--outline-white:focus {
	border-color: var(--frp-white);
	background-color: var(--frp-white);
	color: var(--frp-maroon-dark);
}