/*
 * am-person — the "who I am" block. Mikael is present and named (a real person
 * answers; a face, a direct line), framed as the company's way of working, not a
 * personal portfolio. Corrects the current site, where the person is nearly
 * invisible — the very thing that builds trust.
 *
 * Structure:
 *   am-person
 *     am-person__photo       portrait (square/rounded)
 *     am-person__body
 *       am-person__name      the name (h3 or similar)
 *       am-person__role      role line (e.g. "Grundare · CEH-certifierad")
 *       am-person__bio       a short, human paragraph
 *       am-person__credential  a chip, e.g. the CEH badge (text or inline SVG)
 *       am-person__contact   the direct line (email / phone / link)
 *
 * Media-object layout: stacked on mobile, photo beside text from md up.
 */

.am-person {
	display: flex;
	flex-direction: column;
	gap: var(--am-space-500);
}

@media (min-width: 768px) {
	.am-person {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--am-space-700);
	}
}

.am-person__photo {
	flex-shrink: 0;
	width: 100%;
	max-width: var(--am-media-portrait);
	border-radius: var(--am-radius-lg);
	overflow: hidden;
}

.am-person__photo img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.am-person__body {
	display: flex;
	flex-direction: column;
	gap: var(--am-space-300);
}

.am-person__name {
	margin-block: 0;
	font-size: var(--am-font-size-600);
}

.am-person__role {
	margin-block: 0;
	color: var(--am-color-text-muted);
	font-size: var(--am-font-size-400);
}

.am-person__bio {
	margin-block: var(--am-space-200) 0;
}

/* Credential chip — the CEH badge as a bordered pill. Inline SVG goes in
   am-person__credential-mark; no icon fonts. */
.am-person__credential {
	display: inline-flex;
	align-items: center;
	gap: var(--am-space-200);
	align-self: flex-start;
	padding: var(--am-space-200) var(--am-space-400);
	border: 1px solid var(--am-color-border);
	border-radius: var(--am-radius-full);
	color: var(--am-color-heading);
	font-size: var(--am-font-size-200);
	font-weight: var(--am-weight-semibold);
	letter-spacing: var(--am-tracking-wide);
	text-transform: uppercase;
}

.am-person__credential-mark {
	display: inline-flex;
	width: 1.25em;
	height: 1.25em;
	color: var(--am-color-accent);
}

.am-person__credential-mark svg {
	width: 100%;
	height: 100%;
}

.am-person__contact {
	margin-block-start: var(--am-space-300);
	font-weight: var(--am-weight-medium);
}