/* ================================================================
   MF Suite — Author Profiles
   ----------------------------------------------------------------
   The profile building blocks: the portrait frame, the statistics
   panel, the article list and the social links row.

   Ported from the standalone `extended_profiles` plugin (divb-hq#7),
   whose stylesheet mixed three unrelated things and loaded all of
   them on every page. Only the profile rules came along:

     * the parts below, INCLUDING .mf-profile-post — the article list
       on an author page. It sits among the foreign rules in the old
       file, but it uses this palette (border, accent, hover) and it
       only ever appears on a profile page, so it belongs here. Same
       case as .mf-portrait: markup the template writes, not the
       module.
     * .mf-footer and .mf-product-* stayed behind — a different
       palette (cream, #C0541E), all !important, and one rule reaching
       into core's wp-block-column. Product-page chrome.
     * .mf-ad* and glow-pulse stayed behind too — their own palette
       again, and the old file's own comment called them global.

   The two that stayed are divb-hq#116. See
   docs/plans/2026-08-27-author-profiles-design.md.

   Colours are the profile palette as it ships on the live site, kept
   byte-for-byte so the switchover is invisible. No @import, no remote
   font, no external request (DSGVO).
   ================================================================ */

.mf-ap-statement,
.mf-panel,
.mf-portrait,
.mf-profile-post,
.mf-socials {
	--mfap-border: #e3e8e5;
	--mfap-accent: #e2683c;
	--mfap-muted: #5e6e69;
	--mfap-ink: #13231f;
	--mfap-surface: #fff;
	--mfap-hover: #0f6e56;
	--mfap-radius: 14px;
	--mfap-mono: "Space Mono", monospace;
}

/* --- Portrait -------------------------------------------------- */

/* Markup written by the author-archive template, not by this module —
   the frame belongs to the profile, so its rules travel with it. */
.mf-portrait {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.mf-portrait img {
	display: block;
	border: 1px solid var(--mfap-border);
	border-radius: var(--mfap-radius);
}

/* The accent bracket in the lower left corner. */
.mf-portrait::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: -10px;
	width: 64px;
	height: 64px;
	border-bottom: 2px solid var(--mfap-accent);
	border-left: 2px solid var(--mfap-accent);
	border-bottom-left-radius: var(--mfap-radius);
	pointer-events: none;
}

/* --- Statistics panel ------------------------------------------ */

.mf-panel {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	overflow: hidden;
	background: var(--mfap-surface);
	border: 1px solid var(--mfap-border);
	border-radius: var(--mfap-radius);
}

.mf-stat {
	position: relative;
	padding: 22px 24px;
	border-left: 1px solid var(--mfap-border);
}

.mf-stat:first-child {
	border-left: none;
}

/* The accent tick above each label. */
.mf-stat::before {
	content: "";
	position: absolute;
	top: 22px;
	left: 24px;
	width: 18px;
	height: 2px;
	background: var(--mfap-accent);
}

.mf-stat-label {
	display: block;
	margin: 14px 0 4px;
	color: var(--mfap-muted);
	font-family: var(--mfap-mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mf-stat-value {
	display: block;
	color: var(--mfap-ink);
	font-family: var(--mfap-mono);
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* The unit next to a figure — "12<small> years</small>". */
.mf-stat-value small {
	color: var(--mfap-muted);
	font-size: 0.95rem;
	font-weight: 400;
}

/* A cell holding prose rather than a figure, e.g. "LangChain · vLLM". */
.mf-stat-value--text {
	font-size: 1.15rem;
	line-height: 1.3;
}

@media (max-width: 860px) {

	.mf-panel {
		grid-template-columns: repeat(2, 1fr);
	}

	.mf-stat:nth-child(3) {
		border-left: none;
	}

	.mf-stat:nth-child(n + 3) {
		border-top: 1px solid var(--mfap-border);
	}
}

@media (max-width: 520px) {

	.mf-panel {
		grid-template-columns: 1fr;
	}

	.mf-stat {
		border-top: 1px solid var(--mfap-border);
		border-left: none;
	}

	.mf-stat:first-child {
		border-top: none;
	}
}

/* --- Expert statement ------------------------------------------- */

/* A quotation, deliberately SMALLER than body text rather than larger:
   it is an aside on a profile page, not a pull quote in an article. */
.mf-ap-statement {
	margin: 1.5rem 0;
	padding-left: 1rem;
	color: var(--mfap-muted);
	font-size: 0.85em;
	font-style: italic;
	line-height: 1.5;
	border-left: 2px solid var(--mfap-accent);
}

.mf-ap-statement p {
	margin: 0 0 0.6em;
}

.mf-ap-statement p:last-child {
	margin-bottom: 0;
}

/* --- Pills ----------------------------------------------------- */

/* `mf-ap-pill`, not the bare `pill` the legacy plugin emitted. That class is
   defined by whatever loads last: the theme's Customizer CSS makes it a white
   pill with black text, mf-product-pages makes it white-on-transparent for a
   dark hero — with !important throughout, so on a white author archive the
   pills were white on white and nothing here could win.

   These declarations reproduce the theme's pill, so the appearance is
   unchanged where that rule was the one in play. The font size was an inline
   style on every span; it belongs here, where a theme can still override it. */
.mf-ap-pill {
	display: inline-block;
	margin: 1rem 1rem 0 0;
	padding-block: 0.8rem;
	padding-inline: 2rem;
	color: #000;
	font-size: 0.6em;
	font-weight: 400;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #ababab;
	border-radius: 999em;
}

/* --- The article list on a profile page ------------------------- */

/* Markup written by the author-archive template, like .mf-portrait above.
   Ported with every !important intact: the old plugin needed them to win
   against the theme, and the first job of the switchover is that nothing
   moves. Tidying them is a separate decision that needs the live page. */
.mf-profile-post {
	position: relative !important;
	display: flex !important;
	align-items: baseline;
	justify-content: space-between !important;
	gap: 20px !important;
	padding: 14px 0 !important;
	font-family: "Lucida Console", "Courier New", monospace !important;
	text-decoration: none !important;
	border-bottom: 1px solid var(--mfap-border) !important;
	transition: padding-left 0.2s ease !important;
}

.mf-profile-post-date {
	font-family: "Lucida Console", "Courier New", monospace;
}

/* The accent arrow that slides in on hover. `\2192` rather than a literal
   arrow, so the rule survives a file being re-encoded. */
.mf-profile-post::before {
	content: "\2192" !important;
	position: absolute !important;
	left: -22px !important;
	color: var(--mfap-accent) !important;
	opacity: 0 !important;
	transition: opacity 0.2s ease !important;
}

.mf-profile-post:hover {
	padding-left: 8px !important;
	color: var(--mfap-hover);
}

.mf-profile-post:hover::before {
	opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {

	.mf-profile-post,
	.mf-profile-post::before {
		transition: none !important;
	}
}

/* --- Social links ---------------------------------------------- */

.mf-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mf-social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	color: var(--mfap-ink);
	font-family: var(--mfap-mono);
	font-size: 0.78rem;
	text-decoration: none;
	background: var(--mfap-surface);
	border: 1px solid var(--mfap-border);
	border-radius: 999px;
	transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.mf-social:hover {
	color: var(--mfap-hover);
	border-color: var(--mfap-hover);
	transform: translateY(-2px);
}

/* Three of the four icons are inline Simple-Icons SVG. */
.mf-social .mf-ico {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

/* The fourth is a Material Symbol from the suite's own self-hosted font.
   It replaces the legacy `.material-icons` span, which depended on a font
   this plugin does not ship — see docs/core/symbols.md. */
.mf-social .mf-symbol {
	font-size: 18px;
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {

	.mf-social {
		transition: none;
	}

	.mf-social:hover {
		transform: none;
	}
}