/* =========================================================================
   VentureView — Author credential box
   Etappe 3, "Newspaper x Apple" runbook.

   WHY THIS EXISTS
   The Newspaper article template renders no author box. Until Etappe 3 the
   author bios were also empty in WordPress, so there was nothing to show. Both
   are now fixed, and this surfaces the credential on every article.

   That matters beyond decoration. Google's quality guidance leans on
   experience, expertise, authoritativeness and trust — and for a news site the
   cheapest, most legible signal is: who wrote this, what do they cover, and can
   I see their other work. An article with an anonymous byline is a weaker
   document than the same article with an accountable author.

   NO GRAVATAR — deliberate. The obvious implementation calls get_avatar(),
   which fetches from gravatar.com and hands the reader's IP to a third party on
   every article view. That is the exact problem Etappe 1 removed for fonts;
   reintroducing it for a 40px picture would be indefensible, and none of the
   authors have Gravatars set anyway. Instead each author gets a typographic
   monogram built from their initials in the brand palette: zero requests, no
   personal data leaves the site, and it looks like a masthead rather than a
   forum signature.
   ========================================================================= */

.vv-author-box {
	display: flex;
	gap: var(--vv-space-3);
	align-items: flex-start;
	max-width: var(--vv-content-max);
	margin: var(--vv-space-8) auto var(--vv-space-4);
	padding: var(--vv-space-3) 0 0;
	border-top: 2px solid var(--vv-c-heading);
	font-family: var(--vv-font-body);
}

/* The monogram */
.vv-author-box__mark {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--vv-radius-pill);
	background-color: var(--vv-c-heading);
	color: var(--vv-c-surface);
	font-family: var(--vv-font-display);
	font-weight: var(--vv-weight-bold);
	font-size: var(--vv-step-1);
	line-height: 1;
	letter-spacing: 0.01em;
	user-select: none;
}

.vv-author-box__body {
	min-width: 0; /* lets long German words wrap instead of overflowing */
}

.vv-author-box__eyebrow {
	display: block;
	margin-bottom: var(--vv-space-05);
	font-size: var(--vv-step--2);
	font-weight: var(--vv-weight-semibold);
	letter-spacing: var(--vv-tracking-wide);
	text-transform: uppercase;
	color: var(--vv-c-text-muted);
}

.vv-author-box__name {
	margin: 0 0 var(--vv-space-1);
	font-family: var(--vv-font-display);
	font-size: var(--vv-step-2);
	font-weight: var(--vv-weight-bold);
	line-height: var(--vv-lh-tight);
	letter-spacing: var(--vv-tracking-tight);
	color: var(--vv-c-heading);
}

.vv-author-box__name a {
	color: inherit;
	text-decoration: none;
}

.vv-author-box__name a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.14em;
	text-decoration-color: var(--vv-c-accent);
}

.vv-author-box__bio {
	margin: 0 0 var(--vv-space-2);
	font-size: var(--vv-step--1);
	line-height: var(--vv-lh-prose);
	color: var(--vv-c-text);
}

.vv-author-box__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vv-space-2);
	align-items: baseline;
	font-size: var(--vv-step--2);
	letter-spacing: var(--vv-tracking-wide);
	text-transform: uppercase;
	color: var(--vv-c-text-muted);
}

.vv-author-box__meta a {
	color: var(--vv-c-link);
	text-decoration: none;
	font-weight: var(--vv-weight-semibold);
}

.vv-author-box__meta a:hover {
	text-decoration: underline;
}

.vv-author-box__meta a:focus-visible {
	outline: none;
	box-shadow: var(--vv-focus-ring);
	border-radius: var(--vv-radius-sm);
}

/* Mobile: stack, and shrink the monogram so the name gets the width. */
@media (max-width: 600px) {
	.vv-author-box {
		gap: var(--vv-space-2);
	}

	.vv-author-box__mark {
		width: 44px;
		height: 44px;
		font-size: var(--vv-step-0);
	}

	.vv-author-box__name {
		font-size: var(--vv-step-1);
	}
}

/* Dark mode: the monogram inverts so it stays a solid, legible chip. */
html[data-vv-theme="dark"] .vv-author-box {
	border-top-color: var(--vv-c-accent) !important;
}

html[data-vv-theme="dark"] .vv-author-box__mark {
	background-color: var(--vv-c-accent) !important;
	color: var(--vv-navy-900) !important;
}

html[data-vv-theme="dark"] .vv-author-box__name,
html[data-vv-theme="dark"] .vv-author-box__name a {
	color: var(--vv-c-heading) !important;
}

html[data-vv-theme="dark"] .vv-author-box__bio {
	color: var(--vv-c-text) !important;
}

html[data-vv-theme="dark"] .vv-author-box__eyebrow,
html[data-vv-theme="dark"] .vv-author-box__meta {
	color: var(--vv-c-text-muted) !important;
}

@media print {
	.vv-author-box {
		break-inside: avoid;
	}
}