/* tt360/author-card, ported from the prototype's .ad-author-card
   (html/assets/css/layout/article-detail.css), generalized into a
   reusable block instead of a page-specific class. Meant to sit inside
   a tt360/section (its own "ancestor" restriction in block.json), which
   supplies the surrounding section's own background and padding — this
   file only styles the card itself, not a section wrapper. */

.author-card {
    display: flex;
    gap: 24px;
}

.author-card .avatar {
    display: block;
    width: 80px;
    height: 80px;
    flex: none;
    border-radius: 8px;
    object-fit: cover;
    background-color: rgba(var(--charcoal), 0.08);
}

/* No photo set: the same 80x80 box shows the author's initials instead of sitting
   empty. Sized to fit two letters comfortably inside the box's own padding. */
.author-card .avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    color: rgba(var(--terra-green), 1);
}

.author-card .body {
    min-width: 0;
}

.author-card .name {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: rgba(var(--terra-green), 1);
}

.author-card .role {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(var(--warm-gray-dark), 1);
}

.author-card .bio {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.6;
}

/* sm */
@media (max-width: 575.98px) {
    .author-card {
        flex-direction: column;
    }
}