/**
 * Sanaa inner page header — base + structural variants (compact,
 * image-background, split).
 *
 * Component-level stylesheet: loads whenever the inner-header component
 * resolves, any design system. All values consume tokens.
 */

.sanaa-inner-header {
	padding-block: calc(var(--sanaa-section-gap) / 2);
	border-bottom: var(--sanaa-border-width) solid var(--sanaa-border);
}

.sanaa-inner-header .sanaa-breadcrumb {
	margin-bottom: calc(var(--sanaa-grid-gap) / 2);
}

.sanaa-inner-header__title {
	margin: 0;
	font-family: var(--sanaa-font-heading);
	font-size: var(--sanaa-display-md, 2.5rem);
	font-weight: var(--sanaa-heading-weight);
	letter-spacing: var(--sanaa-heading-tracking, 0);
	line-height: 1.15;
	color: var(--sanaa-heading-color, var(--sanaa-text));
}

.sanaa-inner-header__subtitle {
	max-width: 60ch;
	margin: calc(var(--sanaa-grid-gap) / 2) 0 0;
	font-size: var(--sanaa-text-lg, 1.125rem);
	color: var(--sanaa-text-muted);
}

/* Compact — one tight axis, small vertical spend. */

.sanaa-inner-header--compact {
	padding-block: calc(var(--sanaa-section-gap) / 3);
}

.sanaa-inner-header--compact .sanaa-inner-header__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25em var(--sanaa-grid-gap);
}

.sanaa-inner-header--compact .sanaa-inner-header__title {
	font-size: var(--sanaa-display-sm, 1.75rem);
}

.sanaa-inner-header--compact .sanaa-inner-header__subtitle {
	margin: 0;
	font-size: var(--sanaa-text-md, 1rem);
}

/* Band — solid brand panel with diagonal accent blades in the top
   corner. The fourth blade is a wide surface slab forming the light
   corner wedge. */

.sanaa-inner-header--band {
	position: relative;
	padding-block: calc(var(--sanaa-section-gap) * 0.75);
	color: var(--sanaa-on-primary);
	background: var(--sanaa-primary);
	border-bottom: none;
	overflow: hidden;
}

.sanaa-inner-header--band .sanaa-inner-header__inner {
	position: relative;
	z-index: 1;
}

.sanaa-inner-header--band .sanaa-inner-header__title {
	color: var(--sanaa-on-primary);
}

.sanaa-inner-header--band .sanaa-inner-header__subtitle {
	max-width: 52ch;
	color: var(--sanaa-on-primary);
	opacity: 0.88;
}

/* The whole trail — list, links, current step and separators — must
   read on the brand band: the base current step is --sanaa-text and
   the base link hover is --sanaa-primary, both invisible on primary. */
.sanaa-inner-header--band .sanaa-breadcrumb__list,
.sanaa-inner-header--band .sanaa-breadcrumb ol {
	color: var(--sanaa-on-primary);
}

.sanaa-inner-header--band .sanaa-breadcrumb a {
	color: var(--sanaa-on-primary);
	opacity: 0.8;
}

.sanaa-inner-header--band .sanaa-breadcrumb a:hover,
.sanaa-inner-header--band .sanaa-breadcrumb a:focus-visible {
	color: var(--sanaa-on-primary);
	opacity: 1;
}

.sanaa-inner-header--band .sanaa-breadcrumb__current {
	color: var(--sanaa-on-primary);
}

.sanaa-inner-header--band .sanaa-breadcrumb__sep {
	color: var(--sanaa-on-primary);
	opacity: 0.6;
}

.sanaa-inner-header--band .sanaa-breadcrumb__item + .sanaa-breadcrumb__item::before {
	border-color: var(--sanaa-on-primary);
	opacity: 0.5;
}

.sanaa-inner-header__deco {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.sanaa-inner-header__deco i {
	position: absolute;
	top: -45%;
	height: 220%;
	width: clamp(2rem, 5vw, 4.5rem);
	background: var(--sanaa-support-blue);
	transform: rotate(30deg);
}

.sanaa-inner-header__deco i:nth-child(1) {
	right: 16%;
	opacity: 0.16;
}

.sanaa-inner-header__deco i:nth-child(2) {
	right: 10%;
	opacity: 0.3;
}

.sanaa-inner-header__deco i:nth-child(3) {
	right: 4%;
	opacity: 0.5;
}

.sanaa-inner-header__deco i:nth-child(4) {
	right: -7%;
	width: clamp(4rem, 12vw, 11rem);
	background: var(--sanaa-surface);
	opacity: 1;
}

/* Content directly after a band sits closer — the panel itself already
   carries the vertical spend. */

.sanaa-inner-header--band + .sanaa-section {
	padding-block-start: calc(var(--sanaa-section-gap) / 3);
}

/* Image background — media behind a token-tinted veil. */

.sanaa-inner-header--image-background {
	position: relative;
	padding-block: var(--sanaa-section-gap);
	border-bottom: none;
	overflow: hidden;
	text-align: center;
}

.sanaa-inner-header--image-background .sanaa-inner-header__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.sanaa-inner-header--image-background .sanaa-inner-header__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--sanaa-text) 62%, transparent);
}

.sanaa-inner-header--image-background .sanaa-inner-header__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sanaa-inner-header--image-background .sanaa-inner-header__inner {
	position: relative;
}

.sanaa-inner-header--image-background .sanaa-inner-header__title {
	color: var(--sanaa-text-inverse);
}

.sanaa-inner-header--image-background .sanaa-inner-header__subtitle {
	margin-inline: auto;
	color: var(--sanaa-text-inverse);
	opacity: 0.9;
}

/* Same legibility rule over the media veil: the trail inverts with the
   title and subtitle instead of keeping dark token colors. */
.sanaa-inner-header--image-background .sanaa-breadcrumb__list,
.sanaa-inner-header--image-background .sanaa-breadcrumb ol {
	justify-content: center;
	color: var(--sanaa-text-inverse);
}

.sanaa-inner-header--image-background .sanaa-breadcrumb a {
	color: var(--sanaa-text-inverse);
	opacity: 0.85;
}

.sanaa-inner-header--image-background .sanaa-breadcrumb a:hover,
.sanaa-inner-header--image-background .sanaa-breadcrumb a:focus-visible {
	color: var(--sanaa-text-inverse);
	opacity: 1;
}

.sanaa-inner-header--image-background .sanaa-breadcrumb__current {
	color: var(--sanaa-text-inverse);
}

.sanaa-inner-header--image-background .sanaa-breadcrumb__sep {
	color: var(--sanaa-text-inverse);
	opacity: 0.6;
}

.sanaa-inner-header--image-background .sanaa-breadcrumb__item + .sanaa-breadcrumb__item::before {
	border-color: var(--sanaa-text-inverse);
	opacity: 0.5;
}

/* Split — content axis + media axis. */

.sanaa-inner-header--split .sanaa-inner-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: var(--sanaa-grid-gap);
	align-items: center;
}

.sanaa-inner-header--split .sanaa-inner-header__media {
	margin: 0;
}

.sanaa-inner-header--split .sanaa-inner-header__img {
	width: 100%;
	height: auto;
	border-radius: var(--sanaa-radius-md);
}

@media (width <= 768px) {
	.sanaa-inner-header--split .sanaa-inner-header__inner {
		grid-template-columns: 1fr;
	}
}