/*
 * Ingesto Author Card — Frontend
 * Design: refinado, institucional, compatível com o tema Trydo.
 * Paleta neutra com acento em laranja-terra (#C85C2A) — tom frequente
 * em identidades de institutos e ONGs brasileiras.
 */

:root {
    --iac-bg:          #F7F5F2;
    --iac-border:      #E2DDD8;
    --iac-accent:      #C85C2A;
    --iac-text:        #1C1C1C;
    --iac-text-light:  #6B6560;
    --iac-badge-bg:    #EDE8E3;
    --iac-badge-text:  #7A6A5E;
    --iac-avatar-bg:   #D4C8BE;
    --iac-radius:      12px;
    --iac-avatar-size: 64px;
    --iac-social-size: 32px;
}

/* ── Card container ─────────────────────────────────────────────────────────── */

.iac-author-card {
    display:          flex;
    align-items:      center;
    gap:              18px;
    background:       var(--iac-bg);
    border:           1px solid var(--iac-border);
    border-left:      4px solid var(--iac-accent);
    border-radius:    var(--iac-radius);
    padding:          20px 24px;
    margin:           32px 0;
    font-family:      Georgia, 'Times New Roman', serif;
    box-shadow:       0 2px 8px rgba(0,0,0,.05);
}

/* ── Foto ───────────────────────────────────────────────────────────────────── */

.iac-photo-wrap {
    flex-shrink: 0;
}

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

/* Fallback de iniciais */
.iac-avatar-initials {
    width:           var(--iac-avatar-size);
    height:          var(--iac-avatar-size);
    border-radius:   50%;
    background:      var(--iac-avatar-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       22px;
    font-weight:     700;
    color:           var(--iac-text);
    letter-spacing:  .02em;
    border:          2px solid var(--iac-border);
    font-family:     Georgia, serif;
}

/* ── Informações ────────────────────────────────────────────────────────────── */

.iac-info {
    display:        flex;
    flex-direction: column;
    gap:            5px;
    min-width:      0;
}

.iac-name {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--iac-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.iac-badge {
    display:          inline-block;
    font-size:        .7rem;
    font-family:      'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:      600;
    letter-spacing:   .08em;
    text-transform:   uppercase;
    background:       var(--iac-badge-bg);
    color:            var(--iac-badge-text);
    padding:          2px 8px;
    border-radius:    4px;
    width:            fit-content;
}

.iac-area {
    font-size:  .82rem;
    color:      var(--iac-text-light);
    font-style: italic;
    line-height: 1.3;
}

/* ── Redes sociais ──────────────────────────────────────────────────────────── */

.iac-social-links {
    display:     flex;
    gap:         8px;
    margin-top:  4px;
    flex-wrap:   wrap;
}

.iac-social {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            var(--iac-social-size);
    height:           var(--iac-social-size);
    border-radius:    50%;
    background:       transparent;
    border:           1px solid var(--iac-border);
    color:            var(--iac-text-light);
    text-decoration:  none;
    transition:       background .18s ease, color .18s ease, border-color .18s ease;
}

.iac-social:hover {
    background:   var(--iac-accent);
    color:        #fff;
    border-color: var(--iac-accent);
}

/* ── Erro ───────────────────────────────────────────────────────────────────── */

.iac-error {
    color:     #9B3A3A;
    font-size: .85rem;
    padding:   8px 12px;
    background: #FDF0F0;
    border-radius: 6px;
    border-left: 3px solid #C85C5C;
}

/* ── Responsivo ─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .iac-author-card {
        flex-direction: column;
        align-items:    flex-start;
        gap:            14px;
        padding:        16px;
    }

    .iac-name {
        white-space: normal;
    }
}