/* /perfil/X/ — reusa classes do account.css (czum-cover, czum-side, czum-main, etc). */

/* Margem geral da página: zero no desktop, padding lateral no mobile */
.czum-public-profile { padding: 0; }
@media (max-width: 768px) { .czum-public-profile { padding: 0 12px; } }

/* Cover usa MESMA grid do shell pra avatar alinhar com sidebar */
.czum-public-profile .czum-cover { margin-bottom: 0 !important; }
.czum-public-profile .czum-cover-inner {
    display: grid !important;
    grid-template-columns: 280px 1fr;
    gap: 16px !important;
    padding: 0 !important;
    align-items: center;
}
/* Avatar redondo, 200×200 com margem (alinha com 280px da sidebar) */
.czum-public-profile .czum-avatar {
    width: 200px !important;
    height: 200px !important;
    border-radius: 50% !important;
    margin: 40px;
    flex: 0 0 auto;
    overflow: hidden;
}
.czum-public-profile .czum-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.czum-public-profile .czum-identity { padding: 10px; }
.czum-public-profile .czum-name { font-size: 1.8rem; font-weight: 700; line-height: 1.1; color: inherit; }
.czum-public-profile .czum-shell { margin-top: 0 !important; gap: 16px; align-items: start; }
.czum-public-profile .czum-side  { margin: 0 !important; padding: 0 !important; }
.czum-public-profile .czum-main  { margin: 0 !important; padding: 0 !important; }
.czum-public-profile .czum-side > .czum-card:first-child,
.czum-public-profile { margin-top: 8px; }

/* Ajuste fino: o nav-item dentro do card de menu tem padding interno, então o
   primeiro botão fica visualmente mais baixo que o topo do card de conteúdo (que
   tem mais padding). Compensa adicionando padding-top no main pra alinhar. */
.czum-public-profile .czum-main > .czum-tab.is-active > .czum-card:first-child {
    margin-top: 0;
}
.czum-public-profile .czum-main { padding-top: 8px !important; }

/* Em mobile, foto fica em cima e nome/práticas embaixo */
@media (max-width: 768px) {
    .czum-public-profile .czum-cover-inner {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        justify-items: center;
        text-align: center;
    }
    .czum-public-profile .czum-avatar,
    .czum-public-profile .czum-avatar-img {
        width: 200px !important;
        height: 200px !important;
    }
    .czum-public-profile .czum-name { font-size: 1.4rem; }
    .czum-public-profile .czup-cover-practices { justify-content: center; }
}

.czum-public-profile .czum-handle { font-size: 0.9em; color: rgba(0,0,0,0.55); margin-top: 2px; letter-spacing: 0.02em; }

/* Chips de práticas embaixo do nome (cover) — clique faz scroll pra tab */
.czup-cover-practices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.czup-cover-practice {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.czup-cover-practice:hover {
    background: #1565c0;
    color: #fff;
    border-color: #1565c0;
    transform: translateY(-1px);
}
.czum-public-profile .czum-bio { padding: 24px; line-height: 1.6; font-size: 1rem; }
.czum-public-profile .czum-bio p { margin: 0 0 12px; }
.czum-public-profile .czum-bio p:last-child { margin-bottom: 0; }
.czum-public-profile .czum-bio a { text-decoration: underline; }
.czum-public-profile .czum-bio-empty { padding: 32px; }
.czum-public-profile .czum-bio-empty p { margin: 0 0 16px; color: rgba(0,0,0,0.6); }

/* Contato — fica no sidebar (debaixo do menu). Persistente entre tabs. */
.czup-contacts { padding: 14px 16px; margin: 0; }
.czup-contacts h3 { margin: 0 0 10px; font-size: 0.95rem; }
.czup-contacts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.czup-contacts-list li { margin: 0; }
.czup-contacts-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 8px 12px;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 6px;
    color: inherit;
    font-size: 0.9em;
    transition: background 0.15s;
}
.czup-contacts-list a:hover { background: rgba(0,0,0,0.1); }
.czup-icon { font-size: 1.1em; line-height: 1; }

/* Spacing entre cards no sidebar (nav + contato + ...) */
.czum-public-profile .czum-side > .czum-card + .czum-card { margin-top: 10px; }

/* Em mobile, sidebar fica acima do main */
@media (max-width: 768px) {
    .czum-public-profile .czum-shell { gap: 0; }
    .czum-public-profile .czum-side > .czum-card + .czum-card { margin-top: 8px; }
    /* Em mobile, contatos voltam a ser inline (mais econômico em landscape) */
    .czup-contacts-list { flex-direction: row; flex-wrap: wrap; }
    .czup-contacts-list a { padding: 6px 12px; border-radius: 999px; }
}

.czup-block { padding: 24px; }
.czup-block-thumb {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 0 0 20px;
    object-fit: cover;
}
.czup-block-title { margin: 0 0 12px; font-size: 1.25rem; }
.czup-block-resumo { font-style: italic; color: rgba(0,0,0,0.7); margin: 0 0 16px; }
.czup-block-descricao { line-height: 1.6; }
.czup-block-edit { margin-top: 16px; text-align: right; font-size: 0.9em; }

/* Subtítulo do archive — fica logo abaixo do h1, mesmo padrão do tema */
.czup-archive-sub {
    margin: 0 0 20px;
    color: rgba(255,255,255,0.8);
    font-size: 0.98em;
    text-align: center;
}

/* Mobile: padding lateral pra cards não colarem na borda */
@media (max-width: 768px) {
    body.tax-categoria_servico #content { padding-left: 12px; padding-right: 12px; box-sizing: border-box; }
}

/* Empty state — também sobre fundo escuro */
.czup-archive-empty {
    padding: 32px 20px;
    text-align: center;
    color: #fff;
    font-size: 1rem;
}
.czup-archive-empty a {
    color: #fff !important;
    text-decoration: underline;
    font-weight: 600;
}
.czup-archive-empty a:hover { text-decoration: none; }

/* Card no archive (/tarologos/, /astrologos/, etc.) — usa .terco do mansory */
.czup-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.czup-card .czup-card-link { display: block; color: inherit; text-decoration: none; }
.czup-card .imagem { display: block; }
.czup-card .imagem img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.czup-card-name { margin: 12px 14px 4px; font-size: 1.1rem; font-weight: 700; color: #222; }

/* Tags / especialidades — pílulas visuais (não clicáveis, decorativas) */
.czup-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 14px 8px; justify-content: center; }
.czup-card-tag {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.78em;
    background: rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 999px;
    color: #444;
}
.czup-card-tag.is-current { background: #2e7d32; color: #fff; border-color: #2e7d32; font-weight: 600; }

.czup-card-resumo { margin: 0 14px 16px; font-size: 0.9em; color: rgba(0,0,0,0.7); line-height: 1.4; }

.czup-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.czup-pagination ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; }
.czup-pagination a, .czup-pagination span { padding: 8px 14px; border-radius: 4px; background: rgba(0,0,0,0.05); color: inherit; text-decoration: none; }
.czup-pagination .current { background: #000; color: #fff; }

/* Pagina indisponivel */
.czup-unavailable .czum-card { background: #fff; border-radius: 8px; color: #222; }
.czup-unavailable .czum-card h1 { color: #222 !important; }
.czup-unavailable .czum-card p  { color: #555 !important; }
.czup-unavailable .czum-card a.czum-btn { color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   Banner /perfil/X/ — quando user tem foto de capa
   Mantém o layout base intacto, só adiciona background + overlay.
   ═══════════════════════════════════════════════════════════════ */

.czum-public-profile .czum-cover-has-banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Avatar ganha borda branca + sombra pra destacar do background */
.czum-public-profile .czum-cover-has-banner .czum-avatar {
    border: 4px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* Identity ganha overlay escuro pra texto ficar legível sobre a imagem */
.czum-identity-on-banner {
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: 14px;
    padding: 14px 20px;
    color: #fff !important;
}
.czum-identity-on-banner .czum-name {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.czum-identity-on-banner .czum-handle {
    color: rgba(255,255,255,0.78) !important;
}

/* Mobile: avatar mais compacto pra caber junto da identity */
@media (max-width: 768px) {
    .czum-public-profile .czum-cover-has-banner .czum-avatar {
        border-width: 3px;
    }
    .czum-identity-on-banner {
        padding: 10px 14px;
        border-radius: 10px;
    }
}