@import "../mixins/shadow.scss";

.h-card {
	--border-radius: 0.5em;
	@include shadow-low;
	border-radius: var(--border-radius);
	max-width: 80ch;
	header {
		background-image: url('/header.jpg');
		background-size: cover;
		background-position: center;
		width: 100%;
		aspect-ratio: 2;
		display: grid;
		place-items: end start;
		border-top-left-radius: var(--border-radius);
		border-top-right-radius: var(--border-radius);
	}
	.u-logo {
		height: 60%;
		width: 30%;
		background: rgba(0,0,0,0.5);
		border-radius: var(--border-radius);
		margin-left: 1em;
		margin-bottom: 1em;
	}
	.display-name {
		display: flex;
		flex-flow: column;
		padding-left: 1em;
		.p-name {
			&::after {display: none;}
			&:focus {padding: unset; color: unset; background: unset;}
			text-decoration: none;
			color: inherit;
			font-weight: 900;
			font-size: 1.5em;
			line-height: 1.5em;
			margin-top: 0.5em;
		}
		.p-nickname:not(.p-name) {
			font-size: 1em;
			line-height: 1.5em;
			opacity: 0.75;
			margin-bottom: 0.5em;
		}
		background: var(--ui-overlay);
		color: var(--ui-overlay-text);
	}
	section {
		> .p-name,
		> .u-email,
		> .u-impp,
		> .u-url,
		> .p-note,
		> .p-gender-identity
		{
			display: none;
		}
	}
	.e-note {
		font-size: 1em;
		line-height: 1.5em;
		p {
			margin-bottom: 0.5em;
		}
		padding: 1em;
		padding-top: 0;
		background: var(--ui-overlay);
		color: var(--ui-overlay-text);
		border-bottom-left-radius: var(--border-radius);
		border-bottom-right-radius: var(--border-radius);
	}
	margin-bottom: 1em;
}