/*
 * Page-title / breadcrumb band — scoped entirely under .bmx-page-title.
 * Reproduces the reference's style.css .page-title rules exactly:
 * padding 130px 0, h1 82px, uppercase/bold breadcrumb with blue links
 * and separators, real per-context background photo (see
 * inc/breadcrumb.php bmx_get_page_title_background_url()).
 */

.bmx-page-title {
	position: relative;
	text-align: center;
	background-color: var( --wp--preset--color--bmx-dark );
	background-size: cover;
	background-position: center;
	padding: 130px var( --wp--preset--spacing--40 );
}

.bmx-page-title__heading {
	margin: 0 0 var( --wp--preset--spacing--20 );
	font-family: 'Inter', sans-serif;
	font-size: 82px;
	line-height: 1em;
	font-weight: 700;
	text-transform: capitalize;
	color: var( --wp--preset--color--base );
}

.bmx-breadcrumb {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: 'Inter', sans-serif;
}

.bmx-breadcrumb li {
	display: flex;
	align-items: center;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 16px;
	color: var( --wp--preset--color--base );
}

.bmx-breadcrumb li:not( :last-child )::after {
	content: '/';
	margin: 0 15px;
	color: var( --wp--preset--color--bmx-primary );
}

.bmx-breadcrumb a {
	color: var( --wp--preset--color--bmx-primary );
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.bmx-breadcrumb a:hover,
.bmx-breadcrumb a:focus-visible {
	opacity: 0.8;
}

@media ( max-width: 767px ) {
	.bmx-page-title {
		padding: 70px var( --wp--preset--spacing--30 );
	}

	.bmx-page-title__heading {
		font-size: clamp( 2rem, 8vw, 3.5rem );
	}
}