/* Blog-only overrides — design system lives in fanmigo-design.css */

.fm-lead {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--fm-muted);
}

.fm-blog-hero {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
}

.fm-blog-hero-wrap {
    overflow: hidden;
}

/* ----- Compact creator card ----- */
/* Two-line layout: [avatar] (name + @handle) on top, (location + stats) below.
   Designed to sit inline inside <li> bullets, paragraphs, or as a standalone block.
   Subtle by default — the role variants add a thin left accent only. */

.creator-card {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.7rem;
    margin: 0.25rem 0;
    border: 1px solid color-mix(in srgb, var(--fm-text) 12%, transparent);
    border-radius: 0.6rem;
    background: var(--fm-surface);
    color: var(--fm-text);
    text-decoration: none;
    line-height: 1.25;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    max-width: 100%;
    vertical-align: middle;
}

.creator-card:hover {
    border-color: color-mix(in srgb, var(--fm-primary) 55%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--fm-text) 8%, transparent);
}

.creator-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--fm-surface-alt);
}

.creator-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.creator-card__line {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.creator-card__name {
    font-weight: 600;
    color: var(--fm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 18ch;
}

.creator-card__handle {
    color: var(--fm-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

.creator-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--fm-muted);
    font-size: 0.78rem;
    line-height: 1;
}

.creator-card__chip i {
    font-size: 0.85rem;
    line-height: 1;
}

/* Role accents — subtle left border only.
   author = full primary; subject = softer; mention = no accent. */
.creator-card--author {
    border-left: 3px solid var(--fm-primary);
    padding-left: calc(0.7rem - 2px);
}

.creator-card--subject {
    border-left: 3px solid color-mix(in srgb, var(--fm-primary) 55%, transparent);
    padding-left: calc(0.7rem - 2px);
}

/* When the card sits inside an <li> in markdown lists, kill the default
   block margins so the bullet aligns to the card's vertical center. */
li > .creator-card,
p > .creator-card {
    margin-top: 0;
    margin-bottom: 0;
}

/* Free-floating block usage (bare in markdown without a wrapping list/p):
   Hugo paragraph-wraps it; that's fine — the rules above handle it. */