/*
 * 08c-depoimentos-texto.css
 * Seção: Carrossel de depoimentos em texto (prints reais de mensagens de
 * alunas/alunos sobre O Novo Sistema)
 *
 * Inserida logo abaixo de Carreira (08b) a pedido do cliente (2026-08-13).
 * Numerada "08c" pelo mesmo raciocínio de 02b/02c/08b (ver docs/CONVENCOES.md)
 * para não invadir a faixa de CSS/asset IDs já reservada às demais seções.
 *
 * Fundo: --cor-fundo-preto-puro (mesmo tom "mais profundo" da seção seguinte,
 * Vivência/07) — a seção fica entre 2 fundos escuros (Carreira acima,
 * Vivência abaixo), então usa o tom mais escuro dos dois para casar com o
 * que vem depois.
 *
 * Estrutura full-bleed ("de fora a fora na tela", pedido do cliente): o
 * carrossel (.depoimentos-texto-carrossel) é filho direto de <section>, FORA
 * do .container — mesmo princípio já usado em .hero-credenciais
 * (02-hero.css), então herda 100% da largura da viewport em vez de ficar
 * limitado ao max-width do container. Só o título/subtítulo ficam dentro de
 * um .container (largura de leitura normal).
 *
 * Os prints (assets/video/prints/dep1.png..dep6.png) já vêm prontos como
 * "card" — fundo e cantos arredondados são do próprio app de mensagens
 * (WhatsApp/Instagram), capturados no print. Por isso são exibidos como
 * <img> única (sem moldura/fundo adicional), só com sombra para descolar do
 * fundo escuro da seção. Cada imagem carrega os atributos width/height reais
 * do arquivo (ver HTML) — isso faz o navegador calcular o aspect-ratio
 * automaticamente, então `height: 100%; width: auto` abaixo respeita a
 * proporção nativa de cada print sem precisar de uma regra por imagem
 * (proporções variam bastante: dep1/dep2 são retrato, dep3/dep4/dep5 são
 * paisagem, dep6 é quase quadrado).
 *
 * Ativo como carrossel de fato em TODOS os breakpoints (diferente do
 * carrossel de notícias em 02b-noticias.css, que só vira carrossel no
 * mobile — aqui aparecem sempre mais de 1 card por vez, então sempre há o
 * que rolar). scroll-snap nativo no viewport já cobre arrastar por toque no
 * mobile sem precisar de JS; setas + dots (script.js,
 * initDepoimentosTextoCarousel) cobrem a navegação por clique no
 * desktop/tablet.
 */

.depoimentos-texto {
  background-color: var(--cor-fundo-preto-puro);
  /* .section já dá padding-block fluido; a seção não precisa de padding
     lateral próprio porque o carrossel é full-bleed (o .container interno
     do título cuida do respiro lateral do texto). */
  overflow: hidden;
}

.depoimentos-texto__titulo {
  font-size: var(--fs-h2-escuro);
  font-weight: var(--fw-h2-escuro);
  line-height: var(--lh-h2-escuro);
  color: var(--cor-texto-branco);
  margin-bottom: 12px;
}

.depoimentos-texto__subtitulo {
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: 40px;
  font-size: var(--fs-hero-subtitulo);
  font-weight: var(--fw-hero-subtitulo);
  line-height: var(--lh-hero-subtitulo);
  color: var(--cor-texto-cinza-claro);
}

/* ---------------------------------------------------------------------------
 * Painel (2026-08-13, pedido do cliente, referência visual anexada) — caixa
 * sem borda, fundo verde institucional mais claro que o fundo da seção
 * (--cor-fundo-preto-puro), para o carrossel "rolar por dentro" dela. Mesma
 * largura/centralização de .container (replicada aqui em vez de aplicar a
 * classe .container diretamente porque .container tem padding-inline
 * próprio, que empurraria o carrossel para dentro — aqui queremos
 * padding-inline: 0 no painel, deixando o carrossel ocupar 100% da largura
 * da caixa, com o respiro interno vindo do padding do próprio
 * .depoimentos-texto-carrossel__trilho abaixo).
 * [AJUSTE 2026-08-13] Cor trocada de --cor-fundo-escuro-base (#0F221D) para
 * #19372D, literal a pedido do cliente ("ainda no desktop, não consigo ver
 * muito o contraste da caixa") — o token institucional não dava contraste
 * suficiente contra --cor-fundo-preto-puro (variação sutil demais); #19372D
 * é a mesma cor já usada como fundo do Hero (styles/sections/02-hero.css),
 * reaproveitada aqui por ser um verde mais claro e já validado no site.
 * Literal em vez de var(--token) porque não existe token institucional para
 * este tom específico — ver docs/CONVENCOES.md sobre cores fora da paleta.
 * Só no desktop/tablet (>768px) — em mobile a caixa é neutralizada (ver
 * media query 768px) e o layout volta a ser full-bleed, como já era antes
 * desta mudança.
 * ------------------------------------------------------------------------- */

.depoimentos-texto-painel {
  width: 100%;
  max-width: calc(var(--container-largura-conteudo) + (2 * var(--space-secao-horizontal)));
  margin-inline: auto;
  background-color: #19372D;
  border-radius: var(--oportunidade-card-radius);
  padding-block: 40px;
}

/* ---------------------------------------------------------------------------
 * Carrossel — scroll-snap nativo é o mecanismo de navegação em TODOS os
 * tamanhos de tela. Setas/dots são um reforço visual/de acessibilidade por
 * cima do scroll nativo, não o único jeito de navegar.
 * ------------------------------------------------------------------------- */

.depoimentos-texto-carrossel {
  position: relative;
}

.depoimentos-texto-carrossel__viewport {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.depoimentos-texto-carrossel__viewport::-webkit-scrollbar {
  display: none;
}

.depoimentos-texto-carrossel__trilho {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  /* Respiro interno do painel (2026-08-13): antes era clamp(20,4vw,64) para
     alinhar com o .container quando o carrossel era full-bleed direto no
     fundo da seção. Agora que ele mora dentro de .depoimentos-texto-painel
     (que já tem sua própria margem até a borda da tela), esse respiro só
     precisa afastar o 1º/último card da borda arredondada da caixa — valor
     bem menor. Restaurado ao original em mobile (ver media query 768px),
     onde o painel é neutralizado e o carrossel volta a ser full-bleed. */
  padding: 4px clamp(16px, 2vw, 32px) 12px;
}

.depoimentos-texto-carrossel__slide {
  flex: 0 0 auto;
  height: clamp(320px, 34vw, 480px);
  scroll-snap-align: center;
}

.depoimentos-texto-carrossel__img {
  display: block;
  height: 100%;
  width: auto;
  border-radius: var(--foto-radius-md);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

/* Setas — sobrepostas às laterais do carrossel, mesma linguagem visual das
   outras (dourado sobre fundo escuro). Ficam visíveis em todos os
   breakpoints (ao contrário de .noticias-carrossel__seta, que só aparece no
   mobile) porque aqui SEMPRE há mais conteúdo do que cabe na tela. */
.depoimentos-texto-carrossel__seta {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: calc(50% - 22px);
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(212, 175, 55, 0.92);
  color: var(--cor-cta-dourado-texto);
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.depoimentos-texto-carrossel__seta:hover {
  background-color: var(--cor-cta-dourado);
  transform: scale(1.06);
}

.depoimentos-texto-carrossel__seta:focus-visible {
  outline: 2px solid var(--cor-texto-branco);
  outline-offset: 3px;
}

.depoimentos-texto-carrossel__seta svg {
  width: 18px;
  height: 18px;
}

/* Metade da seta "para fora" da caixa, montada na borda arredondada do
   painel (referência visual do cliente, 2026-08-13) — offset negativo de
   metade da largura do botão (44px). Restaurado a um valor positivo em
   mobile (ver media query 768px), onde não há mais painel/borda para a
   seta montar em cima. */
.depoimentos-texto-carrossel__seta--prev {
  left: -22px;
}

.depoimentos-texto-carrossel__seta--next {
  right: -22px;
}

.depoimentos-texto-carrossel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.depoimentos-texto-carrossel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(251, 247, 238, 0.25);
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}

.depoimentos-texto-carrossel__dot--active {
  width: 22px;
  border-radius: 4px;
  background-color: var(--cor-cta-dourado);
}

/* ---------------------------------------------------------------------------
 * Responsivo — ver convenção de breakpoints em styles/base.css
 * ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .depoimentos-texto-carrossel__slide {
    height: clamp(280px, 38vw, 420px);
  }
}

@media (max-width: 768px) {
  .depoimentos-texto__titulo {
    font-size: 30px;
  }

  .depoimentos-texto__subtitulo {
    margin-bottom: 28px;
  }

  /* Painel neutralizado em mobile — pedido do cliente (2026-08-13) era
     especificamente para a versão desktop; abaixo de 768px o carrossel
     volta a ser full-bleed direto no fundo da seção, como já era antes
     desta mudança. */
  .depoimentos-texto-painel {
    max-width: none;
    background-color: transparent;
    border-radius: 0;
    padding-block: 0;
  }

  .depoimentos-texto-carrossel__slide {
    height: clamp(260px, 62vw, 380px);
  }

  .depoimentos-texto-carrossel__trilho {
    gap: 16px;
    /* Restaura o respiro lateral original (alinhado ao .container) — sem
       painel, o carrossel volta a precisar desse padding para alinhar com
       o título acima. */
    padding-inline: clamp(20px, 4vw, var(--space-secao-horizontal));
  }

  /* Setas semi-transparentes menores, mais para dentro — no mobile o toque
     (arrastar o dedo) é o jeito principal de navegar; as setas viram um
     reforço discreto, não o controle primário. */
  .depoimentos-texto-carrossel__seta {
    width: 36px;
    height: 36px;
    background-color: rgba(15, 34, 29, 0.6);
    color: var(--cor-texto-branco);
  }

  .depoimentos-texto-carrossel__seta svg {
    width: 16px;
    height: 16px;
  }

  .depoimentos-texto-carrossel__seta--prev {
    left: 8px;
  }

  .depoimentos-texto-carrossel__seta--next {
    right: 8px;
  }
}

@media (max-width: 430px) {
  .depoimentos-texto__titulo {
    font-size: 26px;
  }

  .depoimentos-texto-carrossel__slide {
    height: clamp(240px, 68vw, 320px);
  }
}