/*
 * Breadcrumbs Block — the page title hero: photo, H1, Breadcrumb NavXT trail.
 *
 * Self-contained: every rule the block needs is here. Element rules are scoped under the root with
 * two classes, so neither Bootstrap nor the theme style.css is required, and the generic rules still
 * living there (h1, a, img, the NavXT .sws-separator) cannot win against these whatever the print
 * order. The only outside inputs are the theme tokens, each read with a literal fallback, and the
 * site's @font-face rules.
 *
 * Geometry mirrors the legacy .page-title-wrap hero pixel for pixel: 75px vertical padding, the
 * container ladder (--sws-container-max) with a 15px gutter, the photo at its natural size anchored
 * to the bottom centre, and the three overlay steps at 1199.98px / 767.98px. Those are viewport media
 * queries like the legacy rules: the block is full width, and the editor canvas is an iframe, so they
 * follow the canvas width there too.
 */

.sws-page-title,
.sws-page-title *,
.sws-page-title *::before,
.sws-page-title *::after {
	box-sizing: border-box;
}

/* Typography as the legacy hero inherited it from body: the trail line box is sized by it. */
.sws-page-title {
	position: relative;
	isolation: isolate;
	margin: 0;
	padding: 0;
	background-color: #a7a8ad; /* average colour of the visible photo band, seen only until it paints */
	color: #fff;
	font-family: var(--sws-font-body, "Source Sans Pro", sans-serif);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
}

/* Photo layer: a CSS background at its natural size, anchored to the bottom centre, like the legacy
   hero. Deliberately not an <img>: at odd section widths Chrome snaps an <img> to whole pixels but
   paints a background at the true half-pixel offset, so only a background keeps the old pixels. An
   editor-picked photo comes in as an inline background-image; view.php preloads either one. */
.sws-page-title .sws-page-title__media {
	position: absolute;
	inset: 0;
	background-position: 50% 100%;
	background-repeat: repeat;
	pointer-events: none;
}

/* The block's own photo (1920x360). A hero taller than it scales it up instead of tiling it. */
.sws-page-title .sws-page-title__media--default {
	background-image: url(hills.webp);
	background-size: auto max(100%, 360px);
}

/* Phones get the 768px centre crop: below 768px it shows exactly the pixels of the full photo. */
@media (max-width: 767.98px) {
	.sws-page-title .sws-page-title__media--default {
		background-image: url(hills-768.webp);
	}
}

/* Wider than the photo: scale it up instead of tiling it. */
@media (min-width: 1921px) {
	.sws-page-title .sws-page-title__media {
		background-size: cover;
	}
}

/* Darkening overlay, painted over the photo and under the text. */
.sws-page-title .sws-page-title__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent);
}

@media (max-width: 1199.98px) {
	.sws-page-title .sws-page-title__media::after {
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
	}
}

@media (max-width: 767.98px) {
	.sws-page-title .sws-page-title__media::after {
		background: rgba(0, 0, 0, 0.7);
	}
}

/* Content column: positioned so it paints above the photo layer. */
.sws-page-title .sws-page-title__inner {
	position: relative;
	width: 100%;
	max-width: var(--sws-container-max, 1200px);
	margin: 0 auto;
	padding: 75px var(--sws-gutter, 15px);
}

.sws-page-title .sws-page-title__heading {
	margin: 0 0 15px;
	padding: 0;
	font-family: var(--sws-font-heading, Rubik, sans-serif);
	font-size: 2rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
}

/* Trail. NavXT markup: span[itemListElement] items (a link, or the current span.current-item) with
   span.sws-separator between them; the separator and home templates live in the NavXT settings. */
.sws-page-title .sws-page-title__crumbs {
	display: block;
	margin: 0;
	padding: 0;
}

.sws-page-title .sws-page-title__crumbs > span,
.sws-page-title .sws-page-title__crumbs a {
	font-family: var(--sws-font-heading, Rubik, sans-serif);
	font-size: 14px;
	color: #fff;
}

.sws-page-title .sws-page-title__crumbs a {
	text-decoration: none;
	transition: color 0.2s;
}

.sws-page-title .sws-page-title__crumbs a:hover {
	color: #28a745;
}

.sws-page-title .sws-page-title__crumbs .sws-separator {
	margin: 0 8px;
}

.sws-page-title .sws-page-title__crumbs .current-item {
	font-weight: 700;
	text-decoration: underline;
}

/* Home glyph, sized like the Font Awesome icon it replaces: 1em tall, 1.125em wide, on the baseline. */
.sws-page-title .sws-page-title__home {
	display: inline-block;
	width: auto;
	height: 1em;
	margin-right: 3px;
	vertical-align: -0.125em;
	fill: currentColor;
}