/*
 * Title band (Figma Resources "Frame 466"): 232px on desktop with the section's M spacing, the
 * photo in greyscale (Figma saturation -1, exposure +0.17) under a 50% black layer.
 */

.tband {
	color: var(--c-light);
}

.tband__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--c-dark);
}

.tband__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 65%;
	filter: grayscale(1) brightness(1.15);
}

.tband__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.5);
}

.tband__inner {
	position: relative;
}

.tband__title {
	max-width: 560px;
	font-size: var(--t-title-l);
	line-height: var(--lh-title-l);
	text-wrap: wrap; /* Figma breaks lines as they fill, not balanced */
}

/* Desktop pages leave a strip of the page colour between the header and the photo (as the page hero). */
@media (min-width: 1024px) {
	.s-title_band {
		margin-top: 56px;
	}
}

/* Mobile keeps the title at 40/56 (Figma), where section titles drop to 32/40. */
@media (max-width: 767px) {
	.tband__title {
		font-size: var(--t-display);
		line-height: var(--lh-display);
	}
}

.s-title_band:empty {
	display: none;
}