{# author-bio (magazine-bold) — byline card in an mb-panel with hairline rule and small-caps label. #}
{% if post.author_name %}
<aside data-block-override="magazine-bold:author-bio" class="mb-panel bg-card p-6 text-card-foreground{% if class %} {{ class }}{% endif %}">
{% if heading %}<p class="mb-caps mb-4 text-xs text-muted-foreground">{{ heading }}</p>{% endif %}
<div class="flex items-start gap-4">
{% if showAvatar and post.author_avatar %}<div class="h-14 w-14 flex-shrink-0 overflow-hidden rounded-full bg-muted ring-1 ring-[hsl(var(--border))]">{% img post.author_avatar alt=post.author_name class="h-full w-full object-cover" %}</div>{% endif %}
<div class="min-w-0">
<h3 class="mb-caps text-base text-card-foreground" style="font-family:var(--font-heading, &quot;Archivo Black&quot;, 'Arial Black', sans-serif)">{% if post.author_slug %}<a href="/author/{{ post.author_slug }}" class="transition-colors hover:text-[hsl(var(--accent))]">{{ post.author_name }}</a>{% else %}{{ post.author_name }}{% endif %}</h3>
<span class="mb-rule mt-2 block w-10"></span>
{% if post.author_bio %}<p class="mt-2 text-sm text-muted-foreground" style="font-family:var(--font-body, &quot;Inter&quot;, system-ui, sans-serif)">{{ post.author_bio }}</p>{% endif %}
</div>
</div>
</aside>
{% endif %}