/**
 * Autorenbox
 *
 * Eine Box für Rezept, Beitrag, Seite und Taxonomie-Archiv (EPIC-209).
 * Template: template-parts/shared/author-box.php
 * Mockup:   mockup/organisms/shared-author-box/
 *
 * @package WPBlogsAndPages
 */

.author-box {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    margin: var(--spacing-8) auto;
    padding: var(--spacing-8);
    max-width: var(--width-content-md);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--card-border-radius, var(--radius-2xl));
}

.author-box-image {
    flex-shrink: 0;
    width: 160px;
    height: 160px;
    border-radius: var(--radius-full);
    overflow: hidden;
}

.author-box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-box-content {
    flex: 1;
    min-width: 0;
}

.author-box-label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-brand-600);
}

.author-box-title {
    margin: 0 0 var(--spacing-3);
    font-family: var(--font-handwriting);
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-tight);
    color: var(--color-neutral-900);
}

.author-box-text {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-neutral-600);
}

.author-box-text p {
    margin: 0 0 var(--spacing-3);
}

.author-box-text p:last-child {
    margin-bottom: 0;
}

.author-box-tagline {
    margin: var(--spacing-3) 0 0;
    font-size: var(--font-size-sm);
    font-style: italic;
    color: var(--color-neutral-500);
}

.author-box-signature img {
    max-width: 200px;
    height: auto;
}

.author-box-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-4);
    margin-top: var(--spacing-5);
}

.author-box-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.author-box-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-avatar);
    height: var(--size-avatar);
    border-radius: var(--radius-full);
    background: var(--color-brand-600);
    color: var(--color-white);
    transition: background-color var(--transition-default);
}

.author-box-social-link:hover {
    background: var(--color-brand-700);
    color: var(--color-white);
}

.author-box-social-link .social-icon {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
}

@media (max-width: 640px) {
    .author-box {
        flex-direction: column;
        gap: var(--spacing-5);
        padding: var(--spacing-6);
        text-align: center;
    }

    .author-box-image {
        width: 120px;
        height: 120px;
    }

    .author-box-actions {
        justify-content: center;
    }
}