/* ==========================================================================
   NOORD THEME: DEPOIMENTOS
   Markup em noord_testimonials_render() — inc/noord-template-functions.php.
   Mesmo bloco na página inicial (seção do Page Builder) e na página do produto.

   Modelos (v1.2.51, refeitos a partir das referências do Breno):
     .noord-ts--signature  cards claros, foto redonda no topo, nome em assinatura
                           (+ card de foto grande quando o depoimento é destaque)
     .noord-ts--bubbles    título e setas à esquerda, balões de fala à direita

   Contexto: .noord-ts--in-home | .noord-ts--in-product
   Cores: --ts-* inline quando "cores personalizadas" está ligado.
   ========================================================================== */

.noord-ts {
  --ts-pad: clamp(64px, 7vw, 104px);
  --ts-side: var(--trending-side-pad, clamp(40px, 5.5vw, 80px));
  --ts-gap: 20px;
  --ts-radius: 18px;

  position: relative;
  overflow-x: clip;

  background-color: var(--ts-bg, transparent);
  padding: var(--ts-pad) 0;
  color: var(--ts-text, var(--color-text, #111111));
}

/* Na home a seção mora dentro do container (#main) e precisa escapar dele para
   ficar na largura da tela, como os carrosséis. Na página do produto o layout
   já é full-width: repetir o truque do 100vw faria a seção passar da tela pela
   largura da barra de rolagem (medido: 8px de vazamento horizontal). */
.noord-ts--in-home {
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.noord-ts--pad-compact { --ts-pad: clamp(40px, 5vw, 64px); }
.noord-ts--pad-large   { --ts-pad: clamp(96px, 11vw, 160px); }

/* ==========================================================================
   TRILHO (comum aos dois modelos)
   ========================================================================== */

.noord-ts__track {
  display: flex;
  gap: var(--ts-gap);
  /* Só o recuo da esquerda é padding: o Chrome ignora o padding do FIM em
     contêiner flex com rolagem (o último card encostaria na borda). O recuo
     da direita vem do ::after abaixo. */
  padding: 6px 0 6px var(--ts-side);
  overflow-x: auto;
  /* Sem isto o scroll-snap alinha o 1º card à borda da tela e come o recuo da
     esquerda: o trilho nasce com scrollLeft = 80 e o card fica em x=0. */
  scroll-padding-left: var(--ts-side);
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.noord-ts__track::-webkit-scrollbar { display: none; }

/* Recuo do fim do trilho (ver comentário acima). O gap já separa este espaçador
   do último card, então descontamos o gap para o recuo total bater com o lado
   esquerdo. */
.noord-ts__track::after {
  content: "";
  flex: 0 0 calc(var(--ts-side) - var(--ts-gap));
}

/* ==========================================================================
   CABEÇALHO E NAVEGAÇÃO
   ========================================================================== */

.noord-ts__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--ts-side);
  margin-bottom: 36px;
}

.noord-ts__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ts-text, var(--color-text, #111111));
}

.noord-ts__nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.noord-ts__prev,
.noord-ts__next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ts-text, #111111) 20%, transparent);
  border-radius: 50%;
  color: var(--ts-text, var(--color-text, #111111));
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.noord-ts__prev:hover,
.noord-ts__next:hover {
  background: var(--ts-text, var(--color-text, #111111));
  color: var(--ts-card-bg, #ffffff);
}

.noord-ts__prev[disabled],
.noord-ts__next[disabled] { opacity: 0.25; cursor: default; }

.noord-ts__prev[disabled]:hover,
.noord-ts__next[disabled]:hover {
  background: transparent;
  color: var(--ts-text, var(--color-text, #111111));
}

/* Barra de progresso (só no modelo de balões). O JS escreve --ts-progress (0–100)
   e --ts-progress-x (deslocamento do trecho preenchido). */
.noord-ts__progress {
  position: relative;
  flex: 1 1 auto;
  min-width: 90px;
  height: 1px;
  background: color-mix(in srgb, var(--ts-text, #111111) 20%, transparent);
}

.noord-ts__progress-fill {
  position: absolute;
  top: -1px;
  left: 0;
  height: 3px;
  width: var(--ts-progress, 40%);
  background: var(--ts-text, var(--color-text, #111111));
  transform: translateX(var(--ts-progress-x, 0px));
  transition: transform 0.25s ease, width 0.25s ease;
}

/* ==========================================================================
   PESSOA (foto, nome, linha de apoio)
   ========================================================================== */

.noord-ts__person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.noord-ts__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.noord-ts__person-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Nome em "assinatura": usa a fonte de títulos em itálico enquanto a marca não
   tiver uma manuscrita (--font-signature) carregada. */
.noord-ts__name {
  font-family: var(--font-signature, var(--font-heading));
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  color: var(--ts-text, var(--color-text, #111111));
}

.noord-ts__meta {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ts-meta, var(--color-text-muted, #666666));
}

.noord-ts__stars {
  display: inline-flex;
  gap: 3px;
  color: var(--ts-star, var(--color-text, #111111));
  line-height: 0;
}

/* ==========================================================================
   MODELO 1 — CARDS COM ASSINATURA
   ========================================================================== */

.noord-ts--signature .noord-ts__card {
  flex: 0 0 calc((100% - var(--ts-gap) * 2) / 3);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: 30px 28px 28px;
  background: var(--ts-card-bg, #ffffff);
  border-radius: var(--ts-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
}

.noord-ts--signature .noord-ts__card-text {
  margin: 0;
  quotes: none;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ts-text, var(--color-text, #111111));
}

.noord-ts--signature .noord-ts__card-text::before { content: "“"; }
.noord-ts--signature .noord-ts__card-text::after  { content: "”"; }

/* Rodapé colado embaixo: cards de textos diferentes terminam alinhados. */
.noord-ts__card-foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
}

/* ── Card de foto grande (depoimento marcado como destaque) ── */

.noord-ts__card--photo {
  position: relative;
  justify-content: flex-end;
  min-height: 420px;
  padding: 26px;
  overflow: hidden;
  background: #111111;
}

.noord-ts__card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.noord-ts__card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.72) 100%);
}

.noord-ts__avatar--float {
  position: absolute;
  top: 26px;
  left: 26px;
  width: 46px;
  height: 46px;
  border: 2px solid rgba(255, 255, 255, 0.85);
}

.noord-ts__card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
}

.noord-ts__card--photo .noord-ts__card-text,
.noord-ts__card--photo .noord-ts__name { color: #ffffff; }
.noord-ts__card--photo .noord-ts__meta { color: rgba(255, 255, 255, 0.75); }

/* ==========================================================================
   MODELO 2 — BALÕES COM TÍTULO AO LADO
   ========================================================================== */

.noord-ts--bubbles .noord-ts__inner {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

.noord-ts--bubbles .noord-ts__aside {
  padding-left: var(--ts-side);
}

/* Aspas grandes. Fonte serifada fixa de propósito: as grotescas do tema (Inter
   e afins) desenham a aspa como dois riscos retos, que não leem como aspas
   nesse tamanho. */
.noord-ts__glyph {
  display: block;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 110px;
  line-height: 0.62;
  height: 0.5em;
  color: color-mix(in srgb, var(--ts-text, #111111) 22%, transparent);
  margin-bottom: 26px;
}

.noord-ts--bubbles .noord-ts__title { margin-bottom: 28px; }

.noord-ts--bubbles .noord-ts__nav { max-width: 240px; }

/* O trilho começa na coluna da direita: sem recuo próprio à esquerda. */
.noord-ts--bubbles .noord-ts__track {
  padding-left: 0;
  scroll-padding-left: 0;
}

.noord-ts__item {
  flex: 0 0 min(320px, 74%);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.noord-ts__bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 24px 22px;
  background: var(--ts-card-bg, #ffffff);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 26px rgba(0, 0, 0, 0.06);
}

/* Bico do balão, apontando para a foto que fica logo abaixo. */
.noord-ts__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 28px;
  border-width: 12px 12px 0 0;
  border-style: solid;
  border-color: var(--ts-card-bg, #ffffff) transparent transparent transparent;
}

.noord-ts__bubble-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ts-text, var(--color-text, #111111));
}

.noord-ts--bubbles .noord-ts__person { padding-left: 8px; }

.noord-ts--bubbles .noord-ts__avatar { width: 36px; height: 36px; }

.noord-ts--bubbles .noord-ts__name {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
}

/* ==========================================================================
   CONTEXTO: PÁGINA DO PRODUTO
   Lá o fundo padrão acompanha as seções da página (--pp-section-bg).
   ========================================================================== */

.noord-ts--in-product { background-color: var(--ts-bg, var(--pp-section-bg, transparent)); }

/* ==========================================================================
   TABLET / CELULAR
   ========================================================================== */

@media (max-width: 991px) {
  .noord-ts--signature .noord-ts__card { flex-basis: calc((100% - var(--ts-gap)) / 2); }

  /* Balões: o título sobe para cima do trilho. */
  .noord-ts--bubbles .noord-ts__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .noord-ts--bubbles .noord-ts__aside { padding-right: var(--ts-side); }
  .noord-ts--bubbles .noord-ts__track { padding-left: var(--ts-side); scroll-padding-left: var(--ts-side); }
  .noord-ts__glyph { font-size: 76px; margin-bottom: 18px; }
  .noord-ts--bubbles .noord-ts__title { margin-bottom: 20px; }
}

@media (max-width: 767px) {
  .noord-ts { --ts-gap: 14px; }

  .noord-ts__header { margin-bottom: 26px; align-items: center; }
  .noord-ts--signature .noord-ts__nav { display: none; } /* no celular arrasta com o dedo */

  .noord-ts--signature .noord-ts__card {
    flex-basis: 84%;
    padding: 26px 22px 24px;
    gap: 18px;
  }

  .noord-ts__card--photo { min-height: 360px; }

  .noord-ts__item { flex-basis: 84%; }
}