/* CSS Variables */
:root {
    --author-profile-gap: 30px;
    --author-profile-margin-bottom: 70px;

    --author-avatar-size: 100px;
    --author-avatar-border-color: var(--divider-color);

    --author-name-color: var(--primary-text-color);
    --author-name-font-size: 1.8rem;

    --author-role-color: var(--secondary-text-color);
    --author-role-font-size: 1rem;

    --author-bio-color: var(--secondary-text-color);
    --author-bio-font-size: 1rem;
    --author-bio-line-height: 1.5;

    --author-social-icon-size: 24px;
    --author-social-gap: 12px;
    --author-social-icon-filter: none;

    --author-articles-section-gap: 40px;
}

.author-page-main {
    width: var(--content-width);
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 20px 0;
}

/* Profile block: avatar+name/role row on top, bio and socials span full width below */

.author-profile {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: var(--author-profile-margin-bottom);
    max-width: 50%;
}

.author-profile .author-profile-header {
    display: flex;
    gap: var(--author-profile-gap);
    align-items: center;
}

.author-profile .author-avatar-container {
    flex-shrink: 0;
}

.author-profile .author-avatar {
    width: var(--author-avatar-size);
    height: var(--author-avatar-size);
    border: 1px solid var(--author-avatar-border-color);
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.author-profile .author-info {
    flex: 1;
    min-width: 0;
}

.author-profile .author-info .author-name {
    margin: 0 0 4px 0;
    font-size: var(--author-name-font-size);
    color: var(--author-name-color);
}

.author-profile .author-info .author-role {
    margin: 0;
    font-size: var(--author-role-font-size);
    color: var(--author-role-color);
}

.author-profile .author-bio {
    margin: 0;
    font-size: var(--author-bio-font-size);
    line-height: var(--author-bio-line-height);
    color: var(--author-bio-color);
}

.author-profile .author-bio p:first-child {
    margin-top: 0;
}

.author-profile .author-bio p:last-child {
    margin-bottom: 0;
}

/* Social links row */

.author-profile .social-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--author-social-gap);
    flex-wrap: wrap;
}

.author-profile .social-links .author-social-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.author-profile .social-links .author-social-link .author-social-icon {
    width: var(--author-social-icon-size);
    height: var(--author-social-icon-size);
    display: block;
    filter: var(--author-social-icon-filter);
}

.author-profile .social-links .author-social-link a:hover {
    opacity: 0.65;
}

/* Articles section */

.author-articles {
    margin-top: var(--author-articles-section-gap);
}

.author-articles .page-section h2 {
    margin: 0 0 20px 0;
}

/* Stack profile vertically on narrow screens */
@media (max-width: 600px) {
    .author-profile {
        max-width: 100%;
        align-items: center;
        text-align: center;
    }

    .author-profile .author-profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .author-profile .social-links {
        justify-content: center;
    }
}