/* Masthead compartilhado. Biome: 50/50. Catalyst: retrato + cards. */

.page-header.profile-header {
	padding-bottom: calc(var(--system-page-header-bottom) / 2);
}

.profile-header__grid {
	display: grid;
	align-self: stretch;
	width: 100%;
	min-width: 0;
	align-items: stretch;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--system-spacing-gap-2xl);

	@container page-content (max-width: 1500px) {
		gap: var(--system-spacing-gap-xl);
	}

	@container page-content (max-width: 1024px) {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--system-spacing-gap-lg);
	}
}

.profile-header--catalyst .profile-header__grid {
	grid-template-columns: auto minmax(0, 1fr);

	@container page-content (max-width: 1024px) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.profile-header--catalyst .profile-header__copy {
	max-width: 40rem;
}

.profile-header__grid:not(:has(.profile-header__media)) {
	grid-template-columns: minmax(0, 1fr);
}

.profile-header__media {
	position: sticky;
	top: calc(var(--system-menu-h) + var(--system-spacing-gap-sm));
	display: flex;
	align-items: flex-start;
	min-width: 0;
	align-self: start;

	@container page-content (max-width: 1024px) {
		position: static;
	}
}

.profile-header--biome .biome-logo {
	width: 100%;
	border-radius: var(--system-border-radius-lg);

	@container page-content (max-width: 1024px) {
		width: min(100%, 36rem);
	}
}

.profile-header__photo {
	display: block;
	width: 28rem;
	max-width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center 18%;
	border-radius: var(--system-border-radius-lg);

	@container page-content (max-width: 1024px) {
		width: min(100%, 22rem);
	}
}

.profile-header__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--system-spacing-gap-md);
	min-width: 0;
}

.profile-header__top,
.profile-header__bottom {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.profile-header__top { gap: var(--system-spacing-gap-md); }

.profile-header__bottom { gap: var(--system-spacing-gap-md); }

.profile-header__identity,
.profile-header__name,
.profile-header__copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.profile-header__identity { gap: var(--system-spacing-gap-sm); }
.profile-header__name { gap: var(--system-spacing-gap-xs); }
.profile-header__copy { gap: var(--system-spacing-gap-sm); }

.profile-header__kicker {
	margin: 0;
	color: var(--system-fg-primary);
}

.profile-header .prose p {
	margin: 0;
}

.profile-header__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--system-spacing-gap-md);
}

.profile-header__relations {
	display: flex;
	flex-wrap: wrap;
	gap: var(--system-spacing-gap-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.profile-header__relations > li {
	display: flex;
	flex: 1 1 18rem;
	max-width: 26rem;
	min-width: 0;

	@container page-content (max-width: 500px) {
		flex-basis: 100%;
		max-width: none;
	}
}

@container page-content (max-width: 1024px) {
	.profile-header__media,
	.profile-header__actions,
	.profile-header__relations {
		justify-content: center;
	}

	.profile-header__identity,
	.profile-header__copy {
		text-align: center;
	}

	.profile-header--catalyst .profile-header__copy {
		align-self: center;
		width: 100%;
	}
}