/* ============================================================
   VEDA — depoimentos

   Carregado só pela home, que é onde a seção existe. Os cards vêm de
   data/depoimentos.json via scripts/depoimentos.js; aqui só o desenho.
   ============================================================ */

/* ---- carrossel de cards ----
   Antes era uma grade de 3 colunas, e o 4º depoimento caía numa linha nova
   sozinho, com dois buracos ao lado. Agora é uma fila que anda de um em um:
   a janela mostra --por-vez cards e esconde o resto dos lados.

   --por-vez-max é quantos cabem naquela largura de tela; o JS lê esse número
   e grava --por-vez = o menor entre ele e o total de depoimentos. Assim,
   com só 2 depoimentos no computador, os dois dividem a largura inteira em
   vez de deixar uma terceira coluna vazia. */
.dep-carrossel { position: relative; --por-vez-max: 3; --por-vez: 3; }
@media (max-width: 900px) { .dep-carrossel { --por-vez-max: 2; } }
@media (max-width: 600px) { .dep-carrossel { --por-vez-max: 1; } }

.dep-janela { overflow: hidden; border: 1px solid var(--line); }

/* O 1px entre os cards é a linha divisória: o fundo da fila aparece pelo
   vão. Largura do card = (janela - vãos) / por-vez. */
.dep-grid {
  display: flex; gap: 1px; background: var(--line);
  transition: transform 0.55s cubic-bezier(0.085, 0.4, 0.17, 0.995);
  touch-action: pan-y;
}
.dep-grid > .dep-card {
  flex: 0 0 calc((100% - (var(--por-vez) - 1) * 1px) / var(--por-vez));
  min-width: 0;
}

/* ---- setas ----
   No computador e no tablet elas ficam FORA dos cards, na margem entre a
   borda da tela e a janela, no meio da altura, com 16px de folga até o card.
   Essa margem é de 80px acima de 720px de tela (32 da seção + 48 do .wrap),
   e a seta de 44px + 16 de folga cabe com sobra. A que não tem para onde ir
   some. Abaixo de 720px a margem cai para 48px e a seta encostaria na borda
   da tela: elas descem para baixo dos cards, lado a lado, e a que não tem
   para onde ir fica apagada (sumir faria a outra pular de lugar). */
.dep-setas {
  position: absolute; inset: 0; pointer-events: none;
}
.dep-setas[hidden] { display: none; }
.dep-seta {
  position: absolute; top: 50%; z-index: 2; pointer-events: auto;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2, var(--bg)); border: 1px solid var(--line-2);
  color: var(--fg); cursor: pointer;
  transform: translateY(-50%);
  transition: opacity var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.dep-seta svg { width: 20px; height: 20px; }
.dep-seta-ant  { left: -60px; }
.dep-seta-prox { right: -60px; }
.dep-seta:hover { background: var(--magenta); border-color: var(--magenta); }
.dep-seta:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
.dep-seta:disabled { opacity: 0; pointer-events: none; }

@media (max-width: 720px) {
  .dep-setas {
    position: static; pointer-events: auto;
    display: flex; justify-content: center; gap: 14px; margin-top: 20px;
  }
  .dep-seta { position: static; transform: none; }
  .dep-seta:disabled { opacity: 0.3; }
}

.dep-card {
  position: relative; background: var(--bg);
  padding: 32px 28px 26px; display: flex; flex-direction: column; gap: 16px;
  transition: background var(--dur-base) var(--ease-out);
}
.dep-card[role="button"] { cursor: pointer; }
.dep-card[role="button"]:hover,
.dep-card[role="button"]:focus-visible { background: var(--surface); }
.dep-card[role="button"]:focus-visible { outline: 2px solid var(--magenta); outline-offset: -2px; }

/* ---- topo: foto mini + nome ---- */
.dep-head { display: flex; align-items: center; gap: 12px; }
.dep-foto {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--line-2); background: var(--surface-2);
}
.dep-foto-vazia {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 500; font-size: 19px;
  color: var(--magenta-text-elevado);
}
.dep-nome { font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--fg); }

/* ---- a frase grande ---- */
.dep-quote {
  position: relative;
  font-family: var(--font-display); font-weight: 300; font-stretch: 90%;
  font-size: 21px; line-height: 1.38; letter-spacing: -0.01em;
  color: var(--fg); margin: 0; flex: 1;
}
.dep-quote::before {
  content: "“"; display: block;
  font-family: var(--font-display); font-size: 40px; line-height: 0.6;
  color: var(--magenta); margin-bottom: 8px;
}

/* ---- instagram, sempre no rodapé do card — texto para copiar, não link ---- */
.dep-insta {
  align-self: flex-start; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.02em; color: var(--magenta-text);
}

/* ---- sinal de "clicável", só quando há mais para ler ---- */
.dep-expandir {
  position: absolute; top: 20px; right: 20px;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,241,237,0.07); border: 1px solid var(--line-2);
  color: var(--fg-mute);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.dep-expandir svg { width: 14px; height: 14px; }
.dep-card[role="button"]:hover .dep-expandir,
.dep-card[role="button"]:focus-visible .dep-expandir { opacity: 1; transform: none; }
@media (hover: none) { .dep-expandir { opacity: 1; transform: none; } }

/* ============================================================
   Janela com o depoimento inteiro
   ============================================================ */
.dep-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 4vmin;
  background: rgba(10,7,13,0.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 200ms var(--ease-out);
}
.dep-modal.is-on { opacity: 1; }
body.dep-aberto { position: fixed; width: 100%; overflow: hidden; }

.dep-modal-card {
  width: 100%; max-width: 620px; max-height: calc(100vh - 8vmin);
  overflow-y: auto; background: var(--bg-2);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 40px;
}
.dep-modal-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.dep-modal-head .dep-foto { width: 64px; height: 64px; }
.dep-modal-head .dep-foto-vazia { font-size: 22px; }
.dep-modal-nome { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--fg); margin-bottom: 4px; }
.dep-modal-texto {
  font-size: 16px; line-height: 1.7; color: var(--fg-mute);
  margin: 0 0 16px;
}
.dep-modal-texto:last-child { margin-bottom: 0; }

.dep-modal-fechar {
  position: absolute; top: 20px; right: 20px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(245,241,237,0.07); border: 1px solid var(--line-2);
  color: var(--fg); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.dep-modal-fechar:hover { background: var(--magenta); border-color: var(--magenta); }
.dep-modal-fechar:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
.dep-modal-fechar svg { width: 20px; height: 20px; }

@media (max-width: 640px) {
  .dep-modal { padding: 0; align-items: flex-end; }
  .dep-modal-card { max-width: none; max-height: 86vh; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 32px 22px; }
  .dep-modal-fechar { top: 14px; right: 14px; width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .dep-modal { transition: none; }
  .dep-card, .dep-expandir, .dep-modal-fechar, .dep-grid, .dep-seta { transition: none; }
}