/* Author entity (AUE-01) — /authors, /authors/{slug}, and the byline.
   Content surface: uses the warm --content-* palette from content.css. */

/* Monogram avatar. Non-photographic by design (AUE-01 §10): the file is a
   static SVG so Person.image has a stable URL, and the CSS only sizes it. */
.author-avatar {
    display: block;
    border-radius: 50%;
    flex-shrink: 0;
}

.author-avatar--lg {
    width: 96px;
    height: 96px;
}

.author-avatar--sm {
    width: 56px;
    height: 56px;
}

/* Profile hero */
.author-hero {
    max-width: 800px;
    margin: 0 auto 2.5rem;
    background-color: var(--content-card-bg);
    border: 1px solid var(--content-border);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px var(--content-shadow);
}

.author-hero-top {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.author-name {
    font-size: 1.9rem;
    line-height: 1.3;
    margin: 0 0 0.25rem;
}

.author-role {
    font-size: 0.95rem;
    color: var(--content-primary-dark);
    font-weight: 600;
    margin: 0;
}

.author-bio {
    font-size: 1.05rem;
    color: var(--content-text-secondary);
    margin: 1.5rem 0 0;
}

/* "Elsewhere" links. The template renders this block only when the author
   has at least one sameAs URL — an empty or fabricated profile link is
   worse than none, so there is no placeholder and no disabled state. */
.author-elsewhere {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--content-border);
}

.author-elsewhere-heading {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--content-text-muted);
    margin: 0 0 0.6rem;
}

.author-elsewhere-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.author-elsewhere-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--content-primary);
    text-decoration: none;
    border: 1px solid var(--content-border);
    border-radius: 50px;
    padding: 0.3rem 0.85rem;
    transition: all 0.2s ease;
}

.author-elsewhere-link:hover {
    border-color: var(--content-primary-light);
    background-color: var(--content-bg-warm);
    color: var(--content-primary);
}

/* Empty state for the guide list */
.author-empty {
    max-width: 1000px;
    margin: 0 auto 3rem;
    padding: 2rem;
    text-align: center;
    color: var(--content-text-muted);
    background-color: var(--content-bg-warm);
    border: 1px solid var(--content-border);
    border-radius: 12px;
}

.author-empty p {
    margin: 0;
}

/* /authors index. 800px rather than the 1000px the blog grids use, so the
   cards line up with the page heading. auto-fit rather than auto-fill so a
   single author fills the row instead of stranding empty tracks. */
.authors-grid {
    max-width: 800px;
    margin: 0 auto 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
}

.author-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background-color: var(--content-card-bg);
    border: 1px solid var(--content-border);
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px var(--content-shadow);
}

.author-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px var(--content-shadow-hover);
    border-color: var(--content-primary-light);
}

.author-card-name {
    font-size: 1.15rem;
    margin: 0 0 0.15rem;
    color: var(--content-text-primary);
}

.author-card:hover .author-card-name {
    color: var(--content-primary);
}

.author-card-role {
    font-size: 0.85rem;
    color: var(--content-primary-dark);
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.author-card-line {
    font-size: 0.9rem;
    color: var(--content-text-secondary);
    line-height: 1.5;
    margin: 0 0 0.6rem;
}

.author-card-cta {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--content-primary);
}

/* Byline. Sits inside the existing .blog-post-meta row and inherits its
   size and colour, so the only new styling is the link on the name. */
.author-byline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.author-byline-link {
    color: var(--content-primary);
    text-decoration: none;
    font-weight: 600;
}

.author-byline-link:hover {
    color: var(--content-primary);
    text-decoration: underline;
    text-decoration-color: var(--content-primary-light);
    text-decoration-thickness: 2px;
}

@media (max-width: 768px) {
    .author-hero {
        margin: 0 1rem 2rem;
        padding: 1.5rem;
        border-radius: 12px;
    }

    .author-hero-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}