/**
 * PCBuildMate Guides - byline component and author box chips
 *
 * .author-byline: small round avatar, "Door Stefan" (a link to the author page, 44 px tall)
 * and the date. Used in the guide header; any template can render it through
 * Byline_Renderer. The author-box chips and the .guide-meta__updated rule are carried over
 * from the previous guides-author.css (still used on the single guide page).
 */

.author-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.25rem;
    font-size: var(--maat-terzijde);
    color: var(--text-secondary);
}

.author-byline__who {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    color: var(--text-primary);
    text-decoration: none;
}

a.author-byline__who:hover .author-byline__name {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

a.author-byline__who:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.author-byline__avatar {
    display: block;
    flex: none;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    object-fit: cover;
}

.author-byline__name {
    font-weight: 600;
}

.author-byline__date {
    color: var(--text-zwak);
}

/* Chips in the author box under a guide (single guide page). */
.guide-author-box__expertise {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.guide-author-box__chip {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-zwak);
    font-weight: 500;
}

.guide-meta__updated {
    color: var(--text-muted);
    font-style: italic;
}