/* Card 1057676 — Depoimentos v4. Carregado DEPOIS do MudBlazor e do favoritos.css: herda os
   tokens de .fv-pagina e a faixa .ph-*. Valores do design `Depoimentos v4c.dc.html`.
   Regra do card: nenhum card com altura fixa, max-height, overflow: hidden ou reticências.
   O card é quadrado (aspect-ratio) só como tamanho MÍNIMO: com overflow visível, a altura
   automática de um item com aspect-ratio nunca fica menor que o conteúdo. */

/* ── Filtros ── */
.dp-filtros { background: var(--white); border-radius: var(--r); box-shadow: var(--sombra-barra); padding: 16px 18px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px 14px; align-items: end; }
.dp-filtro { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dp-filtro-rotulo { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.dp-select-caixa { position: relative; display: block; }
.dp-select { appearance: none; -webkit-appearance: none; display: block; width: 100%; min-height: 48px; margin: 0;
    font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--page);
    border: 1.5px solid var(--line); border-radius: var(--r-sub); padding: 12px 40px 12px 14px; cursor: pointer; }
.dp-filtro-ativo .dp-select { background: var(--teal-100); border-color: var(--teal-500); }
.dp-seta { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-soft); }

/* ── Grade e card ── */
.dp-grade { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
/* Num grid, item com aspect-ratio não estica por padrão em NENHUM eixo. width: 100% — sem ela,
   quando o texto aumenta a altura, o aspect-ratio deriva a LARGURA da altura e o card passa da
   coluna (visto na tela em 360px: card de 718px, página rolando na horizontal). align-self:
   stretch — os cards da mesma linha ficam da altura do maior (que é >= o quadrado). */
.dp-card { aspect-ratio: 1 / 1; width: 100%; align-self: stretch; display: flex; flex-direction: column; gap: 14px; min-width: 0;
    padding: 28px 22px 22px;
    /* Faixa de 6px do pilar = fundo do próprio card (mesmo recurso do .fv-card): o fundo já é
       recortado pelo border-radius, sem overflow. 28px = 22px do design + 6px da faixa. */
    background: linear-gradient(var(--dp-cor) 0 6px, var(--white) 6px);
    border-radius: var(--r); box-shadow: var(--sombra-card); }
.dp-topo { display: flex; align-items: center; gap: 14px; }
/* Anel de 2px na cor do pilar, separado do círculo por 3px de branco (design). A sombra não
   ocupa espaço: a margem de 5px impede que o anel encoste no que está ao lado. */
.dp-inicial { flex: none; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 5px;
    border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; font-size: 28px; line-height: 1;
    box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--dp-cor); }
.dp-quem { min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.dp-pilar { display: inline-flex; font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 4px 10px; border-radius: 999px;
    background: var(--dp-pilar-bg); color: var(--dp-pilar-fg); overflow-wrap: anywhere; }
.dp-autor { font-size: 13.5px; font-weight: 700; color: var(--ink-soft); overflow-wrap: anywhere; }
.dp-titulo { margin: 0; font-family: inherit; font-weight: 800; font-size: 17px; line-height: 1.3; letter-spacing: -.01em;
    color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.dp-citacao { margin: 0; padding: 0; border: none; font-size: 15.5px; line-height: 1.55; font-style: italic; color: var(--ink);
    text-wrap: pretty; overflow-wrap: anywhere; }
/* Botão "Ver vídeo" (VideoProof ComoCta, um MudButton): à esquerda, sem esticar. */
.dp-card .mud-button-root { align-self: flex-start; margin: -6px 0 -6px -8px; }
.dp-rodape { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.dp-rodape a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13.5px; font-weight: 800;
    letter-spacing: .06em; color: var(--teal-700); text-decoration: none; }
.dp-rodape a:hover { color: var(--teal-600); text-decoration: underline; }

/* ── Vazio ── */
.dp-vazio { margin-top: 22px; max-width: 560px; padding: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
    background: var(--white); border-radius: var(--r); box-shadow: var(--sombra-card); }
.dp-vazio p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.dp-limpar { font-size: 13.5px; font-weight: 800; letter-spacing: .05em; padding: 11px 16px; min-height: 44px; border-radius: var(--r-sub);
    border: 1.5px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; }
.dp-limpar:hover { background: var(--page); }

/* ── Paginação ── */
.dp-paginacao { display: flex; justify-content: center; margin-top: 28px; }