/* ==========================================================================
   07 — Depoimentos
   Figma: 7057:361 "Depoimentos" (1440 × 665) · frame Desktop 7057:68
   - Header 7057:362: título 56px + selo de avaliação (7057:364)
   - Carrossel 7057:369: linha de cards 7057:370 (3 × 389.33 × 318, gap 24),
     setas 48 × 48 (7057:482 esq. / 7057:479 dir.) e paginação 7057:485.
   Line-heights em px: o Figma arredonda a altura de linha para px inteiro
   (16 × 1.4 = 22.4 → 22; 14 × 1.4 = 19.6 → 20). Conferido no recorte: as
   linhas do depoimento têm baseline a cada 22px e os text nodes medem 22·n.
   ========================================================================== */


.depoimentos {
  padding-block: var(--section-py);            /* py-[80px] */
  background: var(--color-cream-50);
  color: var(--color-red-700);
  overflow-x: clip;                            /* trilho sangrado (≤1023) e setas a -24px nunca geram scroll lateral */
}

.depoimentos__container {
  display: flex;
  flex-direction: column;
  gap: 80px;                                   /* gap-[80px] header → carrossel */
}

/* ---------- Header (7057:362) -------------------------------------------- */
.depoimentos__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 24px;                            /* respiro < 1440 (em 1440 sobra espaço) */
  overflow-wrap: break-word;
}

.depoimentos__title {                          /* 7057:363 */
  font-family: var(--font-display);
  font-size: clamp(40px, 3.8889vw, 56px);      /* 56px @ 1440 (Figma) → 40px no mobile */
  font-weight: 400;
  line-height: clamp(44px, 4.6528vw, 67px);    /* 67px @ 1440 (56 × 1.2 arredondado no Figma) → 1.1 no mobile */
  text-transform: uppercase;
  text-wrap: balance;                          /* 2 linhas equilibradas quando quebra */
}

.depoimentos__badge {                          /* 7057:364 Verified_Badge */
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.depoimentos__rating {                         /* 7057:365 Rating */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;                           /* 20 × 1.4 */
  text-transform: uppercase;
}

/* ★ não existe na Anton: cai na fonte de símbolos do sistema (como no Figma).
   O fallback do Figma desenha o ★ de 20px com glifo 15 × 15 e avanço 19.2px
   (5 glifos = 96px). O ★ da Segoe UI Symbol tem 0.833em de avanço: a 23px dá
   o mesmo glifo 15 × 15 e o mesmo avanço (95.8px). A caixa segue com 28px. */
.depoimentos__rating-stars {                   /* 7057:366 */
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", var(--font-display);
  font-size: 23px;
}

.depoimentos__badge-label {                    /* 7057:368 */
  font-size: 16px;
  line-height: 22px;
}

/* ---------- Carrossel (7057:369) ----------------------------------------- */
.depoimentos__carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;                                   /* linha de cards → paginação */
}

.depoimentos__viewport {                       /* 7057:370 Testimonials Row */
  position: relative;
  width: 100%;
}

.depoimentos__track {
  --card-hover-room: 12px;                     /* folga p/ o card ampliado no hover não ser cortado pelo overflow */
  position: relative;                          /* offsetParent dos slides (JS) */
  display: flex;
  gap: 24px;
  margin: calc(-1 * var(--card-hover-room));   /* folga compensada: layout idêntico ao Figma */
  padding: var(--card-hover-room);
  scroll-padding-inline: var(--card-hover-room);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.depoimentos__track::-webkit-scrollbar { display: none; }
/* vence o reset ul[role="list"] { padding: 0 } do base.css */
.depoimentos__track[role="list"] { padding: var(--card-hover-room); }

@media (prefers-reduced-motion: no-preference) {
  .depoimentos__track { scroll-behavior: smooth; }
}

.depoimentos__card {                           /* 7057:371 Testimonial_Card */
  display: flex;
  flex: 0 0 calc((100% - 2 * 24px) / 3);       /* 3 por página: 389.33px @ 1216 */
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 318px;
  padding: 32px;
  border-radius: 16px;
  background: var(--color-cream-25);
  overflow-wrap: break-word;
  scroll-snap-align: start;
}

/* Hover: o card cresce um pouco e volta ao tamanho ao tirar o cursor.
   Não existe no Figma: pedido do cliente, fora do design (diferença documentada).
   Só em dispositivos com mouse (evita hover "preso" no toque) e sem
   preferência por movimento reduzido. transform não altera o layout.
   .3s de propósito (mais lento que --dur .2s dos botões: o card é uma área grande). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .depoimentos__card {
    transition: transform .3s var(--ease);
  }
  .depoimentos__card:hover {
    transform: scale(1.04);
  }
}

/* Autoplay infinito (JS: .is-marquee na raiz; ver 07-depoimentos.js).
   O loop escreve scrollLeft a cada quadro: sem snap e sem scroll suave do
   CSS (as setas usam scrollTo smooth explícito). As bordas esmaecem na folga
   do trilho, onde os cards entram e saem da vista. */
.depoimentos__carousel.is-marquee .depoimentos__track {
  --marquee-fade: calc(var(--card-hover-room) + 16px);
  scroll-snap-type: none;
  scroll-behavior: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--marquee-fade), #000 calc(100% - var(--marquee-fade)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--marquee-fade), #000 calc(100% - var(--marquee-fade)), transparent);
}
.depoimentos__carousel.is-marquee .depoimentos__card { scroll-snap-align: none; }

.depoimentos__card-body {                      /* 7057:372 */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.depoimentos__card-head {                      /* 7057:373 Card_Header */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.depoimentos__stars {                          /* 7057:374 Stars_Row */
  display: flex;
  gap: 4px;
}

.depoimentos__star {
  width: 16px;
  height: 16px;
}

/* Logo Google (7057:386 Symbol.svg): arte com blur mascarada pelo "G".
   Estrutura/offsets idênticos ao Figma (7057:391 + wrapper da imagem). */
.depoimentos__google {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  overflow: hidden;
}

.depoimentos__google-mask {
  position: absolute;
  inset: -0.43% -0.75% -0.73% -0.75%;
  -webkit-mask: url("../../images/07-depoimentos-google-mask.svg") 0.179px 0.103px / 24px 24px no-repeat;
          mask: url("../../images/07-depoimentos-google-mask.svg") 0.179px 0.103px / 24px 24px no-repeat;
  mask-mode: alpha;
}

.depoimentos__google-art {
  position: absolute;
  inset: -9.57% -1.93% -1.94% -3.38%;          /* = 25.6525 × 27.0713 (tamanho do SVG) */
}

.depoimentos__google-art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.depoimentos__quote {                          /* 7057:401 */
  font-size: 16px;
  line-height: 22px;
}

.depoimentos__card-foot {                      /* 7057:402 Card_Footer */
  display: flex;
  flex-wrap: wrap;                             /* data desce de linha em cards estreitos */
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px 16px;
}

.depoimentos__author {                         /* 7057:403 Author_Stack */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* Figma: w-[min-content] + min-w-full → o nome quebra na largura do rótulo */
.depoimentos__author-name {                    /* 7057:404 */
  width: min-content;
  min-width: 100%;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  text-transform: uppercase;
}

.depoimentos__source,                          /* 7057:405 */
.depoimentos__date {                           /* 7057:406 */
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

/* ---------- Setas (7057:482 / 7057:479) ---------------------------------- */
.depoimentos__nav {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: var(--color-white);
  box-shadow: 0 4px 6px color-mix(in srgb, var(--color-ink-900) 6%, transparent);
  transition: background-color var(--dur) var(--ease);
}
/* só com mouse: no toque o :hover "gruda" após o tap e a seta ativa parecia desabilitada */
@media (hover: hover) {
  .depoimentos__nav:hover:not(:disabled) { background: var(--color-cream-50); }
}
.depoimentos__nav:disabled { cursor: default; }

.depoimentos__nav img {
  width: 20px;
  height: 20px;
}

/* Posições do Figma (as duas setas não estão alinhadas entre si). As duas são
   relativas à altura da linha de cards, então a distância entre elas é
   constante (31px) quando o card cresce abaixo de 1440. */
.depoimentos__nav--prev {                      /* left-[-24px] top-[calc(50%+12px)] -translate-y-1/2 */
  top: calc(50% + 12px);
  left: -24px;
  transform: translateY(-50%);
}

.depoimentos__nav--next {                      /* right-[-23px] top-[116px] = 50% − 43px com a linha de 318px */
  top: calc(50% - 43px);
  right: -23px;
}

/* ---------- Paginação (7057:485) ----------------------------------------- */
.depoimentos__dots {
  display: flex;
  gap: 6px;                                    /* dots 8px a cada 14px */
}

.depoimentos__dot {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-red-700) 10%, transparent);   /* fill-opacity .1 */
}
.depoimentos__dot.is-active,
.depoimentos__dot[aria-current="true"] { background: var(--color-red-700); }

/* área de toque maior sem alterar o layout (dots viram <button> via JS) */
button.depoimentos__dot::before {
  content: "";
  position: absolute;
  inset: -8px -3px;
}


/* ==========================================================================
   Responsivo — o Figma só tem o frame de 1440. ≥1200 = layout do Figma.
   Padrão mobile da referência do cliente ("Clientes que confiam e
   recomendam"): título → selo → carrossel de 1 card por vez em largura total
   → dots à esquerda + setas à direita, abaixo do card. Escala em tokens.css
   (--fs-t-* / --fs-m-* / --gap-m-*). Uma media query por breakpoint.
   ========================================================================== */

/* ---------- ≤1199 · laptop/tablet: 2 cards por vez, controles abaixo -----
   Setas laterais a −24px (Figma) ficariam a 8px da borda da tela e por cima
   dos cards, e os dots de 8px são pequenos demais para o toque (iPad
   paisagem): de 1199 para baixo os controles vão para a linha de baixo. */
@media (max-width: 1199.98px) {
  .depoimentos__container {
    gap: 56px;
  }

  .depoimentos__card {
    min-height: 0;                             /* altura pelo conteúdo (os cards da linha esticam juntos) */
  }

  /* com 2+ páginas, a seta do extremo fica visivelmente inativa */
  .depoimentos__nav:disabled {
    opacity: .4;
    box-shadow: none;
  }

  /* Tudo cabe numa página (ex.: WP com 1–2 depoimentos): sem controles mortos.
     O JS marca a raiz; ≥1200 mantém as setas/dot do Figma. */
  [data-single-page] .depoimentos__nav,
  [data-single-page] .depoimentos__dots {
    display: none;
  }

  /* Grade do carrossel: trilho em cima; dots à esquerda e setas à direita
     embaixo (como na referência). O viewport vira "contents" para as setas
     saírem de cima dos cards sem mudar o markup. */
  .depoimentos__carousel {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "track track track"
      "dots  prev  next";
    align-items: center;
    gap: 20px 8px;
  }

  .depoimentos__carousel[data-single-page] {
    row-gap: 0;                                /* linha de controles oculta não deixa respiro sobrando */
  }

  .depoimentos__viewport {
    display: contents;
  }

  /* Trilho de borda a borda da tela: o 1º card alinha com o conteúdo
     (padding = --section-px) e o gap entre cards é o mesmo respiro lateral,
     então o card seguinte começa exatamente na borda da tela (sem "peek"). */
  .depoimentos__carousel.is-marquee .depoimentos__track {
    --marquee-fade: var(--section-px);         /* esmaece só na margem da tela */
  }

  .depoimentos__track,
  .depoimentos__track[role="list"] {
    grid-area: track;
    gap: var(--section-px);
    margin: calc(-1 * var(--card-hover-room)) calc(-1 * var(--section-px));
    padding: var(--card-hover-room) var(--section-px);
    scroll-padding-inline: var(--section-px);
  }

  .depoimentos__card {
    flex-basis: calc((100% - var(--section-px)) / 2);
  }

  /* setas 44 × 44 na linha de controles */
  .depoimentos__nav {
    position: static;
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }

  .depoimentos__nav--prev,
  .depoimentos__nav--next {
    transform: none;
  }

  .depoimentos__nav--prev { grid-area: prev; }
  .depoimentos__nav--next { grid-area: next; }

  /* Indicador de páginas em segmentos: cada alvo tem 44 × 44 (toque) e o
     traço visível (32 × 4) é o ::before. Com alvos de 44px, pontos de 8px
     ficariam espalhados a cada 44px; segmentos com 12px de respiro leem como
     um indicador único e compacto. O -6px alinha o 1º traço à margem. */
  .depoimentos__dots {
    grid-area: dots;
    justify-self: start;
    gap: 0;
    margin-left: -6px;
  }

  .depoimentos__dots .depoimentos__dot,
  .depoimentos__dots .depoimentos__dot.is-active,
  .depoimentos__dots .depoimentos__dot[aria-current="true"] {
    width: 44px;
    height: 44px;
    border-radius: 0;
    background: none;
  }

  .depoimentos__dots .depoimentos__dot::before {
    content: "";
    position: absolute;
    inset: 20px 6px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--color-red-700) 18%, transparent);
    transition: background-color var(--dur) var(--ease);
  }

  .depoimentos__dots button.depoimentos__dot:not([aria-current="true"]):hover::before {
    background: color-mix(in srgb, var(--color-red-700) 40%, transparent);
  }

  .depoimentos__dots .depoimentos__dot.is-active::before,
  .depoimentos__dots .depoimentos__dot[aria-current="true"]::before {
    background: var(--color-red-700);
  }
}

/* ---------- ≤1023 · tablet: título 40, card compacto -------------------- */
@media (max-width: 1023.98px) {
  .depoimentos__container {
    gap: var(--content-gap);                   /* 48 · 32 no mobile */
  }

  .depoimentos__title {
    font-size: var(--fs-t-h2);                 /* 40 */
    line-height: 1.1;
  }

  .depoimentos__card {
    gap: 20px;
    padding: 24px;
  }

  .depoimentos__card-body {
    gap: 16px;
  }

  .depoimentos__quote {
    font-size: var(--fs-t-body);               /* 16 */
    line-height: 1.5;
  }

  /* autor → fonte → data empilhados (a data não "pula" de linha conforme o
     nome), com divisor sutil entre depoimento e autor (card da referência) */
  .depoimentos__card-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-top: 16px;
    border-top: 1px solid var(--color-red-700-a15);
  }

  .depoimentos__author-name {
    width: auto;                               /* nome usa a largura do card, sem quebrar pelo rótulo */
    min-width: 0;
    line-height: 24px;
  }
}

/* ---------- ≤767 · mobile: header empilhado, 1 card por vez ------------ */
@media (max-width: 767.98px) {
  .depoimentos__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-m-sm);                      /* 12 */
  }

  .depoimentos__title {
    font-size: var(--fs-m-h2);                 /* 28 */
  }

  .depoimentos__badge {
    align-items: flex-start;
    gap: 2px;
  }

  .depoimentos__rating {
    gap: 8px;
    font-size: 16px;
    line-height: 22px;
  }

  .depoimentos__rating-stars {
    font-size: 18px;                           /* ★ ~12px (proporção do selo de 1440) */
  }

  .depoimentos__badge-label {
    font-size: var(--fs-m-small);              /* 14 */
    line-height: 20px;
  }

  /* 1 card por vez, largura total do conteúdo; o swipe para em cada card */
  .depoimentos__card {
    flex-basis: 100%;
    gap: var(--gap-m-md);                      /* 16 */
    padding: var(--pad-m-card);                /* 24 */
    border-radius: var(--radius-m-card);       /* 16 */
    scroll-snap-stop: always;
  }

  .depoimentos__card-body {
    gap: var(--gap-m-md);                      /* 16 */
  }

  .depoimentos__stars {
    gap: 3px;
  }

  .depoimentos__star {
    width: 14px;
    height: 14px;
  }

  /* logo Google 24 → 20 (máscara escalada na mesma proporção) */
  .depoimentos__google {
    width: 20px;
    height: 20px;
  }

  .depoimentos__google-mask {
    -webkit-mask-position: 0.149px 0.086px;
            mask-position: 0.149px 0.086px;
    -webkit-mask-size: 20px 20px;
            mask-size: 20px 20px;
  }

  .depoimentos__quote {
    font-size: var(--fs-m-body);               /* 15 */
    line-height: var(--lh-m-body);             /* 1.5 */
  }

  .depoimentos__author-name {
    font-size: var(--fs-m-h3);                 /* 20 */
  }

  .depoimentos__source,
  .depoimentos__date {
    font-size: var(--fs-m-small);              /* 14 */
    line-height: 20px;
    white-space: normal;
  }
}


/* ==========================================================================
   Motion (ver MOTION.md) — coreografia em assets/js/sections/07-depoimentos.js
   As ★ do selo são um texto só; durante a entrada o JS embrulha cada ★ num
   span (removido no fim). inline-block para aceitar scale/rotate — mesma
   largura do glifo e mesma linha de 28px, então nada se mexe no layout.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .depoimentos__rating-star {
    display: inline-block;
  }

  /* contador do "+354": dígitos colados no "+" enquanto contam (+3 → +38 →
     +354), na largura reservada do número final (motion.css alinha à direita) */
  .depoimentos__rating-count .motion-count {
    text-align: left;
  }

  /* O carrossel (no mesmo JS, antes da coreografia) mede o layout: quando as
     entradas são registradas os elementos já têm estilo calculado e o estado
     escondido entraria COM a transição do reveal (visível → some durante o
     delay → reaparece). Escondido = instantâneo; a entrada (.is-revealed)
     continua com a transição do motor. */
  .js-motion .depoimentos [data-reveal]:not(.is-revealed) {
    transition: none !important;
  }
}