/* Espaços da pessoa (_EspacosDaPessoa) e barra do dono (_BarraDoDono): ligam as páginas de um mesmo universo
   (autor e leitor). Dois visuais: sobre o topo escuro do autor e sobre o cartão claro do leitor. */

.espacos-pessoa {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 20px;
    padding: 5px;
    border-radius: 999px;
}

.espacos-pessoa a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}

.espacos-pessoa .icone {
    width: 16px;
    height: 16px;
}

/* Sobre o topo escuro (espaço do autor). */
.espacos-pessoa--escuro {
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
}

.espacos-pessoa--escuro a {
    color: rgba(255, 255, 255, .8);
}

.espacos-pessoa--escuro a[aria-current="page"] {
    background: #fff;
    color: var(--cor-grafite, #21213A);
}

.espacos-pessoa--escuro a:not([aria-current]):hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.espacos-pessoa--escuro .espacos-pessoa__criar {
    border: 1.5px dashed rgba(255, 255, 255, .45);
    color: #fff;
}

/* Sobre o cartão claro (espaço do leitor). */
.espacos-pessoa--claro {
    border: 1px solid var(--cor-linha, #e8e3ef);
    background: var(--cor-creme, #fbf9f5);
}

.espacos-pessoa--claro a {
    color: var(--cor-texto-suave);
}

.espacos-pessoa--claro a[aria-current="page"] {
    background: var(--cor-azul, #6952B8);
    color: #fff;
}

.espacos-pessoa--claro a:not([aria-current]):hover {
    background: var(--cor-lilas, #E9E2FC);
    color: var(--cor-grafite, #21213A);
}

.espacos-pessoa--claro .espacos-pessoa__criar {
    border: 1.5px dashed var(--cor-lavanda, #C6B6F0);
    color: var(--cor-azul, #6952B8);
}

/* Barra do dono: primeira linha do topo do próprio espaço. */
.barra-do-dono {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .85);
    font-size: .88rem;
}

.barra-do-dono strong {
    color: #fff;
}

.barra-do-dono a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.barra-do-dono a:hover {
    background: rgba(255, 255, 255, .24);
}

.barra-do-dono--claro {
    margin-bottom: 16px;
    border-bottom-color: var(--cor-linha, #e8e3ef);
    color: var(--cor-texto-suave);
}

.barra-do-dono--claro strong {
    color: var(--cor-grafite, #21213A);
}

.barra-do-dono--claro a {
    background: var(--cor-lilas, #E9E2FC);
    color: var(--cor-grafite, #21213A);
}

.barra-do-dono--claro a:hover {
    background: var(--cor-lavanda, #C6B6F0);
}

/* No topo do autor, a barra fica acima da grade (texto e obra). */
.autor-hero__dono {
    position: relative;
    z-index: 1;
    padding-top: 10px;
}

.autor-hero__dono + .autor-hero__interno {
    padding-top: 36px;
}