/* ============================================================
   Jersey Jump — Page Banner
   Background image + title, used at the top of every inner page
   (WP Pages, single rental_category) instead of the homepage hero.
   Title sits low in the banner — vertically centered 30% up from
   the bottom edge, not at the true middle.
   ============================================================ */
.page-banner {
	position: relative;
	height: clamp(280px, 30vw, 400px);
	overflow: hidden;
}

.page-banner-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.page-banner-overlay {
	position: absolute;
	inset: 0;
	background-color: var(--color-navy-900);
	opacity: 0.3;
}

.page-banner-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 30%;
	transform: translateY(50%);
	text-align: center;
}

.page-banner-title {
	font-family: var(--font-accent);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
	font-size: clamp(28px, 5vw, 56px);
	margin: 0;
}

/* No image set (e.g. Contact, About, a future Thank You page) — a
   short solid band instead of the tall photo-banner height, since
   that much height was sized for a background photo to fill, not a
   flat color. Height comes from padding instead of a fixed/clamped
   value, and .page-banner-content drops the absolute positioning
   (which assumed that fixed height) for normal centered flow. */
.page-banner--no-image {
	height: auto;
	background-color: #EAF3FC;
	padding-block: 2.5rem;
}

.page-banner--no-image .page-banner-content {
	position: static;
	transform: none;
}