/*
 * F8 — lista de profissionais (134834:3524) e perfil público (134834:4987).
 * Só var(--dl-*); medidas do Figma em px (altura, gap, tipografia), largura pelo container.
 */

@layer dl-telas {

/* ---------- 134834:3524 ---------- */

.dl-profissionais {
    padding-top: var(--dl-espaco-5);
    padding-bottom: var(--dl-espaco-8);
}

/* C28 [TELA-NOVA:2026-09-25] filtro por tipo de limpeza: Chip/Filtro (134617:30) de
   escolha única sob a barra; a linha rola na horizontal como os chips de categoria. */
/* O chip tem 25 de altura (DS); a área de toque de 44 é um ::after centrado, e o padding
   da linha (que rola, logo recorta) abre espaço para ele sem mudar o desenho. */
.dl-profissionais__tipos {
    margin-top: 6px;
    padding-block: 10px;
    /* Quatro chips só: sem o encaixe, o chip tocado fica inteiro à vista (e tocável). */
    scroll-snap-type: none;
}

.dl-profissionais__tipos .dl-chip {
    position: relative;
}

.dl-profissionais__tipos .dl-chip::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 44px;
    transform: translateY(-50%);
}

/* 24 = distância da barra ao título e do título à lista no Figma (cap-trim). */
.dl-profissionais__cabecalho {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-4);
    margin-top: var(--dl-espaco-6);
}

.dl-profissionais__titulo {
    display: flex;
    align-items: center;
    gap: var(--dl-espaco-2);
    margin: 0;
    font-family: var(--dl-fonte);
    font-size: var(--dl-h2-tamanho);
    font-weight: var(--dl-h2-peso);
    line-height: var(--dl-h2-lh);
    color: var(--dl-azul-marinho);
}

.dl-profissionais__icone {
    display: block;
    flex-shrink: 0;
    width: 21px;
    height: 28px;
}

.dl-profissionais__apoio {
    margin: 0;
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-peso);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
    text-box: trim-both cap alphabetic;
}

.dl-profissionais__resultado {
    margin-top: var(--dl-espaco-6);
}

.dl-profissionais__resultado[aria-busy="true"] {
    pointer-events: none;
}

.dl-profissionais__lista {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dl-profissionais__pedir-local {
    display: flex;
    justify-content: center;
}

.dl-profissionais .dl-carregar-mais {
    margin-top: var(--dl-espaco-4);
}

/* Fantasma na caixa do Card/Profissional: avatar 56, nome e estrelas de 14. */
.dl-profissionais__fantasma-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.dl-profissionais__fantasma-nome {
    width: 60%;
    height: 14px;
}

.dl-profissionais__fantasma-nota {
    width: 103px;
    height: 14px;
}

/* ---------- 134834:4987 ---------- */

/* Subtela, sem tab bar (C104): 52 do header e o respiro de baixo das telas sem a barra. */
.dl-perfil-publico {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 52px);
    padding-bottom: var(--dl-espaco-5);
}

/* O Figma (4987) põe 251px entre o header e a identificação porque a tela só tinha
   identificação + [Voltar]; com serviços e avaliações embaixo, o vão virava tela
   vazia. [DECISÃO:2026-09-28] mesmo respiro das seções (32). */
.dl-perfil-publico__identificacao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dl-espaco-4);
    margin-top: var(--dl-espaco-8);
    margin-bottom: var(--dl-espaco-8);
    text-align: center;
}

.dl-perfil-publico__nome {
    margin: 0;
    font-family: var(--dl-fonte);
    font-size: var(--dl-h2-tamanho);
    font-weight: var(--dl-h2-peso);
    line-height: var(--dl-h2-lh);
    color: var(--dl-azul);
    text-box: trim-both cap alphabetic;
}

.dl-perfil-publico__credencial {
    margin: 0;
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-peso);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
    text-box: trim-both cap alphabetic;
}

/* C36 [TELA-NOVA:2026-09-25] — serviços oferecidos: mesma pele da seção de avaliações,
   os tipos em Chip/Filtro (134617:30) sem ação, quebrando linha. */
.dl-perfil-publico__servicos {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-5);
    margin-bottom: var(--dl-espaco-8);
}

.dl-perfil-publico__tipos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dl-espaco-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dl-chip.dl-perfil-publico__tipo {
    cursor: default;
}

/* F12 [TELA-NOVA:2026-09-24] — histórico de avaliações no vão entre a credencial e o
   [Voltar]; título na pele das seções da F10 (Body 1 tom, cinza 50). */
.dl-perfil-publico__avaliacoes {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-5);
    margin-bottom: var(--dl-espaco-8);
}

.dl-perfil-publico__secao-titulo {
    margin: 0;
    font-family: var(--dl-fonte);
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-cinza-50);
    text-box: trim-both cap alphabetic;
}

.dl-perfil-publico__secao-total {
    font-weight: var(--dl-body1-peso);
}

.dl-perfil-publico__avaliacoes-lista {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Botão de apoio do Figma: azul claro sólido, não o secundário de contorno. */
.dl-botao.dl-perfil-publico__voltar {
    margin-top: auto;
    background: var(--dl-azul-claro);
    color: var(--dl-branco);
}

/* ---------- Motion no mobile (docs/21 §4 ①) [TELA-NOVA:2026-09-28] ---------- */

@keyframes dl-profissionais-fade {
    from {
        opacity: 0;
    }
}

/* Skeleton ↔ resultado em crossfade, como no desktop (dl-desktop-publicas.css):
   o skeleton aparece em fade; o que volta entra em fade — os cards pela cascata
   da .dl-d-cascata (dl-motion.css). */
@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
    .dl-profissionais__resultado[aria-busy="true"] > * {
        animation: dl-profissionais-fade var(--dl-dur-base) var(--dl-ease-saida) backwards;
    }

    html:not(.dl-splash-ativo) .dl-profissionais__resultado[aria-busy="false"] > :not(.dl-profissionais__lista) {
        animation: dl-profissionais-fade var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
    }
}

}