/*
 * Page title (ADR 0019) in the site's shared page title look (ADR 0065): the title band — breadcrumbs,
 * a small label, the title and a description — and the section around it, which takes the band's
 * background, text colors and height. The Blog heading uses the same band ("requires": ["page-title"]).
 */
.sv-titleband {
	display: grid;
	gap: var(--sv-space-sm);
	justify-items: start;
	text-align: start;
}

.sv-titleband--align-center {
	justify-items: center;
	text-align: center;
}

/* ---------- The section around the band ---------- */

/*
 * Its background: the page's color, the soft one, the accent, dark, or a picture (with light text, or
 * dark text for a light picture). On the light ones the page's text colors come back, whatever the
 * section's own background was.
 */
.sv-section.sv-section:has(:is(.sv-titleband--bg-none, .sv-titleband--bg-soft, .sv-titleband--bg-image.sv-titleband--tone-dark)) {
	--sv-color-text: var(--sv-ink);
	--sv-color-muted: var(--sv-ink-muted);
	--sv-color-border: var(--sv-ink-border);
	--sv-accent: initial;
	color: var(--sv-color-text);
}

.sv-section.sv-section:has(.sv-titleband--bg-none) {
	background: none;
}

.sv-section.sv-section:has(.sv-titleband--bg-soft) {
	background: var(--sv-color-surface);
}

/* Under a light picture (until it shows): the page's color. */
.sv-section.sv-section:has(.sv-titleband--bg-image.sv-titleband--tone-dark) {
	background: var(--sv-color-background);
}

.sv-section.sv-section:has(.sv-titleband--bg-accent) {
	--sv-color-text: var(--sv-color-on-primary);
	--sv-color-muted: var(--sv-color-on-primary);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-primary) 25%, transparent);
	--sv-accent: var(--sv-color-on-primary);
	background: var(--sv-color-primary);
	color: var(--sv-color-text);
}

.sv-section.sv-section:has(:is(.sv-titleband--bg-dark, .sv-titleband--bg-image.sv-titleband--tone-light)) {
	--sv-color-text: var(--sv-color-on-inverse);
	--sv-color-muted: color-mix(in srgb, var(--sv-color-on-inverse) 80%, transparent);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-inverse) 20%, transparent);
	--sv-accent: var(--sv-color-on-inverse);
	background: var(--sv-color-inverse);
	color: var(--sv-color-text);
}

/* The section's own background photo gives way to the shared look. */
.sv-section:has(.sv-titleband) > .sv-section__bg {
	display: none;
}

/* The picture covers the whole section (the nearest positioned box), with a shade so the text reads. */
.sv-titleband__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.sv-titleband__img {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	object-fit: cover;
}

.sv-titleband__bg::after {
	position: absolute;
	inset: 0;
	background: var(--sv-color-inverse);
	content: "";
	opacity: 0.55;
}

.sv-titleband__bg--light::after {
	opacity: 0.35;
}

.sv-titleband__bg--strong::after {
	opacity: 0.75;
}

/* Dark text on a light picture: the shade lightens it, in the page's color. */
.sv-titleband--tone-dark > .sv-titleband__bg::after {
	background: var(--sv-color-background);
}

/* No shade: the picture as it is; a soft shadow keeps the text apart from it. */
.sv-titleband__bg--none::after {
	display: none;
}

.sv-titleband:has(> .sv-titleband__bg--none) {
	text-shadow: 0 1px 3px rgb(0 0 0 / 35%);
}

.sv-titleband--tone-dark:has(> .sv-titleband__bg--none) {
	text-shadow: 0 1px 3px rgb(255 255 255 / 60%);
}

/* Its height: small, medium, large or half the screen (the content centered). */
.sv-section.sv-section:has(.sv-titleband--height-sm) {
	padding-block: var(--sv-space-md);
}

.sv-section.sv-section:has(.sv-titleband--height-md) {
	padding-block: var(--sv-space-lg);
}

.sv-section.sv-section:has(.sv-titleband--height-lg) {
	padding-block: calc(var(--sv-space-lg) * 1.6);
}

/* None (ADR 0075): no extra height, just the room the title needs. */
.sv-section.sv-section:has(.sv-titleband--height-none) {
	padding-block: var(--sv-space-sm);
}

/* Full screen and Custom (ADR 0075): the band itself is that tall at least, its content centered. */
.sv-section.sv-section:has(:is(.sv-titleband--height-screen, .sv-titleband--height-custom)) {
	padding-block: 0;
}

.sv-titleband:is(.sv-titleband--height-screen, .sv-titleband--height-custom) {
	align-content: center;
	min-block-size: var(--sv-titleband-height, 100svh);
	padding-block: var(--sv-space-md);
}

.sv-section.sv-section:has(.sv-titleband--height-half) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-block-size: 50vh;
	padding-block: var(--sv-space-lg);
}

/*
 * Vertical alignment (ADR 0076): where the content sits in a tall band — Half screen (the section's
 * column), Full screen and Custom (the band's own grid). Middle is the default.
 */
.sv-section.sv-section:has(.sv-titleband--height-half.sv-titleband--valign-top) {
	justify-content: flex-start;
}

.sv-section.sv-section:has(.sv-titleband--height-half.sv-titleband--valign-bottom) {
	justify-content: flex-end;
}

.sv-titleband:is(.sv-titleband--height-screen, .sv-titleband--height-custom).sv-titleband--valign-top {
	align-content: start;
}

.sv-titleband:is(.sv-titleband--height-screen, .sv-titleband--height-custom).sv-titleband--valign-bottom {
	align-content: end;
}

/*
 * Space above and below the content (ADR 0076): on the band itself, the section's own room off; a side
 * left automatic keeps what the height gives it.
 */
.sv-titleband--height-none { --sv-titleband-pad: var(--sv-space-sm); }
.sv-titleband--height-sm { --sv-titleband-pad: var(--sv-space-md); }
.sv-titleband--height-md { --sv-titleband-pad: var(--sv-space-lg); }
.sv-titleband--height-lg { --sv-titleband-pad: calc(var(--sv-space-lg) * 1.6); }
.sv-titleband--height-half { --sv-titleband-pad: var(--sv-space-lg); }
.sv-titleband:is(.sv-titleband--height-screen, .sv-titleband--height-custom) { --sv-titleband-pad: var(--sv-space-md); }

.sv-section.sv-section:has(.sv-titleband--spaced) {
	padding-block: 0;
}

.sv-titleband.sv-titleband--spaced {
	padding-block: var(--sv-titleband-top, var(--sv-titleband-pad)) var(--sv-titleband-bottom, var(--sv-titleband-pad));
}

/* ---------- The band's parts ---------- */

.sv-page-title__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.5rem;
	margin: 0;
	padding: 0;
	color: var(--sv-color-muted);
	font-size: var(--sv-size-small);
	list-style: none;
}

.sv-titleband--align-center .sv-page-title__crumbs ol {
	justify-content: center;
}

.sv-page-title__crumbs li + li::before {
	margin-inline-end: 0.5rem;
	content: "/";
	opacity: 0.6;
}

.sv-page-title__crumbs a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 0.25em;
}

.sv-page-title__crumbs a:hover,
.sv-page-title__crumbs a:focus-visible {
	text-decoration: underline;
}

.sv-page-title__crumbs [aria-current="page"] {
	color: var(--sv-color-text);
}

.sv-page-title__label {
	margin: 0;
	color: var(--sv-accent, var(--sv-color-link));
	font-size: var(--sv-size-small);
	font-weight: 700;
	letter-spacing: calc(0.08em * var(--sv-tracking, 1));
	text-transform: var(--sv-uppercase, uppercase);
}

/* The title in the band's size (the Page title's and the Blog heading's). */
.sv-titleband :is(.sv-page-title__title, .sv-blog-header__title) {
	margin: 0;
	font-family: var(--sv-font-heading);
	font-weight: var(--sv-font-heading-weight, 700);
	font-synthesis-weight: none;
	letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1));
	font-size: var(--sv-size-h1);
	line-height: calc(1.1 * var(--sv-leading, 1));
	overflow-wrap: break-word;
}

.sv-titleband--size-sm :is(.sv-page-title__title, .sv-blog-header__title) {
	font-size: var(--sv-size-h2);
	line-height: calc(1.15 * var(--sv-leading, 1));
}

.sv-titleband--size-lg :is(.sv-page-title__title, .sv-blog-header__title) {
	font-size: var(--sv-size-display);
	line-height: calc(1.05 * var(--sv-leading, 1));
}

.sv-page-title__description {
	margin: 0;
	max-inline-size: 42rem;
	color: var(--sv-color-muted);
	font-size: calc(var(--sv-size-body) * 1.1);
}