@use "../kit-deps" as *;
@use "typography" as *;

.page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: $space-5;
	width: 100%;
	padding: $space-5;
	border: $border-width-base solid $border-color-muted;
	border-left-width: $border-width-accent;
	background: $surface-panel-muted;

	.page-header-content {
		display: flex;
		flex-direction: column;
		gap: $space-2;
		min-width: min(100%, 320px);
	}

	.page-header-kicker {
		color: $color-secondary;
		font-size: $font-size-sm;
		font-weight: $font-weight-bold;
		line-height: $line-height-base;
		text-transform: uppercase;
	}

	.page-header-title {
		margin: 0;
		color: $color-text-light;
		font-size: $font-size-h2;
		font-weight: $font-weight-bold;
		line-height: $line-height-tight;
	}

	.page-header-subtitle {
		max-width: 720px;
		margin: 0;
		color: $color-text-medium;
		font-size: $font-size-base;
		line-height: $line-height-relaxed;
	}

	.page-header-meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: $space-2;
		color: $color-text-dark;
		font-size: $font-size-sm;
	}

	.page-header-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: $space-2;
	}

	&.page-header-compact {
		align-items: center;
		padding: $space-4;

		.page-header-title {
			font-size: $font-size-h4;
		}
	}

	&.page-header-accent {
		border-color: $color-secondary;
		background: rgba($color-secondary, 0.055);
	}
}