/* Depoimentos (Figma: Cases / Sessão depoimentos, 510:4112). */

/* Faixa de fundo (Figma: 1920×878, y 3526–4404): conteúdo a 100px do
   topo e 106px da base. */
.depoimentos { background: var(--color-bg-band); padding: 56px 0; }
@media (min-width: 1024px) {
  .depoimentos { padding: 100px 0 106px; }
}

.depoimentos-intro { margin-bottom: 32px; }
.depoimentos-intro h2 { margin-bottom: 16px; max-width: 441px; }
@media (min-width: 900px) {
  /* Título à esquerda (441px, 2 linhas) e texto de apoio na coluna de
     630px da direita, 5px mais baixo; 44px até a foto/carrossel. */
  .depoimentos-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-bottom: 44px; }
  /* Quebra "gulosa" como no Figma ("O que dizem sobre / a Mercanet"). */
  .depoimentos-intro h2 { margin-bottom: 0; text-wrap: wrap; }
  .depoimentos-intro .lead { max-width: 630px; margin-top: 5px; }
}

.depoimentos-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.depoimentos-photo {
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 562 / 514;
}
@media (min-width: 768px) {
  .depoimentos-photo { border-radius: 30px; }
}
.depoimentos-photo-img { width: 100%; height: 100%; object-fit: cover; }
/* Foto diferente no mobile (pedido do cliente) — a original permanece
   no desktop. */
.depoimentos-photo-img--mobile { display: block; }
.depoimentos-photo-img--desktop { display: none; }
@media (min-width: 1024px) {
  .depoimentos-photo-img--mobile { display: none; }
  .depoimentos-photo-img--desktop { display: block; }
}

.depoimentos-carousel { min-width: 0; }

@media (min-width: 1024px) {
  /* No Figma o primeiro card do carrossel fica por cima do canto
     direito da foto, não do lado dela — a fileira de cards começa
     antes da foto acabar (309:4111 x=645, a foto termina em x=882) e
     segue até a borda direita do container. Reproduzido aqui com
     posicionamento absoluto: a foto define a altura da sessão (fica
     no fluxo normal) e o carrossel flutua por cima em cqw, relativo à
     largura do container (1280px no Figma), pra manter a mesma
     proporção de sobreposição em qualquer largura de tela. */
  .depoimentos-layout { display: block; position: relative; container-type: inline-size; }
  .depoimentos-photo { width: 43.9cqw; }
  .depoimentos-carousel {
    position: absolute;
    left: 25.39cqw;
    top: 0.55cqw;
    width: 74.6cqw;
  }
}

/* Setas (Figma: quadrados de 32px, raio 6, 10px entre eles, 32px até
   os cards): a anterior branca com seta navy, a próxima laranja com
   seta branca — mesmo visual das setas de Segmentos. */
.depoimentos-nav { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 32px; }
.depoimentos-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: var(--color-white);
  cursor: pointer;
}
.depoimentos-arrow--next { background: var(--color-orange); }
.depoimentos-arrow:disabled { opacity: 0.4; cursor: default; }

/* Ícone como máscara (não <img>) pra poder colorir só a seta via CSS
   — currentColor não funciona num <img> apontando pra um SVG externo,
   mask-image sim. */
.depoimentos-arrow-icon {
  display: block;
  width: 18px;
  height: 18px;
  background-color: var(--color-navy);
  mask: url(../img/cases-caret-icon.svg) center / contain no-repeat;
  -webkit-mask: url(../img/cases-caret-icon.svg) center / contain no-repeat;
}
.depoimentos-arrow--next .depoimentos-arrow-icon { background-color: var(--color-white); transform: scaleX(-1); }

.depoimentos-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Sem isso, o navegador trata o scroll-snap-align:start do primeiro
     card como se a "borda" do carrossel fosse a borda real da caixa
     (0), ignorando o padding — resultado: a página já carrega com o
     carrossel rolado 20px pra dentro, engolindo a margem esquerda que
     o padding deveria criar (o primeiro card nascia colado na borda
     da tela). Isso diz pro snap tratar o padding como a borda de
     verdade. */
  scroll-padding: 0 20px;
  scrollbar-width: none;
  margin: 0 -20px;
  padding: 0 20px;
}
.depoimentos-track::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  /* A sangria de -20px (usada no mobile pra alinhar com o padding do
     container mesmo com scroll nativo) faria a fileira vazar 20px pra
     fora da caixa do carrossel, que agora tem largura exata em cqw. O
     "scroll-padding" zera junto: sobrando os 20px do mobile, o encaixe
     parava 20px além do card e o último card visível ficava cortado. */
  .depoimentos-track { margin: 0; padding: 0; scroll-padding: 0; }
}

.depoimento-card {
  flex: 0 0 calc(85% - 10px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-blue);
  border-radius: 30px;
  padding: 32px;
  background: var(--color-white);
}
@media (min-width: 640px) {
  .depoimento-card { flex-basis: calc(50% - 10px); }
}
@media (min-width: 1024px) {
  /* Largura fixa (não flex:1) — com 6 depoimentos e só 3 visíveis por
     vez, o card precisa manter 1/3 da fileira mesmo com os outros 3
     "fora da tela", senão flex:1 1 0 encolheria os 6 pra caber todos
     ao mesmo tempo e o carrossel não teria mais o que rolar. */
  .depoimento-card { flex: 0 0 calc((100% - 40px) / 3); min-height: 372px; }
}

.depoimento-card h3 { font-size: 20px; font-weight: 600; line-height: 1.5; color: var(--color-navy); margin-bottom: 24px; }
/* Escopado à classe da citação (não um seletor de elemento "p" genérico)
   de propósito: um "p" pegando qualquer parágrafo do card tinha
   especificidade maior que .depoimento-name/.depoimento-role logo
   abaixo e vencia o margin-bottom:0 e o font-size delas — o nome e o
   cargo ficavam com a margem de 24px e o tamanho de fonte da citação
   por baixo, o que empurrava o cargo/avatar pra longe do nome. */
.depoimento-quote { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--color-gray-04); margin-bottom: 24px; }
@media (min-width: 1024px) {
  /* Figma: o título fica no topo do card e o texto desce até 20px antes
     do autor (que fica na base) — não colado embaixo do título. A caixa
     de texto tem 249px (8px além do miolo do card). */
  .depoimento-quote { margin-top: auto; margin-bottom: 20px; margin-right: -8px; }
}

.depoimento-author { display: flex; align-items: center; gap: 13px; margin-top: auto; }
@media (min-width: 1024px) {
  /* O texto empurra o autor pra base; sem isso o "auto" do texto e o
     do autor dividiam o espaço sobrando. */
  .depoimento-author { margin-top: 0; }
}
.depoimento-avatar {
  flex-shrink: 0;
  display: block;
  width: 41px;
  height: 41px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--color-orange);
}
.depoimento-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.depoimento-name { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--color-navy); margin: 0; }
/* Figma: nome (21px) e cargo (18px) formam um bloco de 36px — as caixas
   de texto se sobrepõem 3px. */
.depoimento-role { font-size: 12px; font-weight: 300; line-height: 1.5; color: var(--color-gray-04); margin: -3px 0 0; }