/*
  Customer Reviews — componente Reconecta
  Fidelidade visual à referência: Sabri Suby / Sell Like Crazy

  Especificações replicadas do Sabri:
    - 3 linhas (rows) com direções alternadas: rtl normal / ltr normal / rtl slow
    - Cards: width AUTO (preserva aspect ratio natural do print)
    - Card mobile: altura 240px / Card desktop: altura 380px
    - Border-radius pequeno (12px) — feel "print autêntico", não "site fofinho"
    - Gap entre cards: 12px mobile / 24px desktop
    - Pausa no hover de cada row independente

  Adaptado para sistema NOVO LP_SE (creme + Inter + #D3111A):
    - Background creme em vez de #221e1d (escuro)
    - Cards creme-2 com border creme-3 em vez de bg-[#2d2928] + border-red
    - Texto preto em vez de branco

  CSS vars expostas — ver README.md.
*/

.customer-reviews,
.customer-reviews *,
.customer-reviews *::before,
.customer-reviews *::after {
  box-sizing: border-box;
}

.customer-reviews {
  /* TOKENS — sobrescrevíveis */
  --cr-bg:               var(--color-cream,         #F6F3EE);
  --cr-card-bg:          var(--color-cream-2,       #EFEDE0);
  --cr-card-border:      var(--color-cream-3,       #DEDAC3);
  --cr-card-print-bg:    #ffffff;
  --cr-text:             var(--color-black,         #0B0202);
  --cr-text-muted:       rgba(11, 2, 2, 0.62);
  --cr-accent:           var(--color-red-light,     #D3111A);
  --cr-eyebrow-color:    var(--color-red-reconecta, #6B0F0F);

  --cr-font-body:        var(--font-body,           'Inter', system-ui, -apple-system, sans-serif);

  /* DIMENSÕES — card adapta largura ao aspect ratio do print (cada print ocupa card todo)
     Altura fixa por breakpoint, largura auto entre min/max */
  --cr-card-height:      220px;
  --cr-card-min-width:   180px;
  --cr-card-max-width:   520px;
  --cr-card-gap:         12px;
  --cr-card-radius:      12px;
  --cr-card-padding:     0px;

  --cr-row-gap:          12px;

  /* ANIMATIONS */
  --cr-marquee-duration-normal: 60s;
  --cr-marquee-duration-slow:   90s;
  --cr-mask-fade:        4%;

  /* LAYOUT */
  --cr-section-padding-y: 64px;
  --cr-container-max:    1320px;
  --cr-container-pad:    16px;
  --cr-header-mb:        40px;

  background: var(--cr-bg);
  padding: var(--cr-section-padding-y) 0;
  overflow: hidden;
  font-family: var(--cr-font-body);
  color: var(--cr-text);
}

.customer-reviews__container {
  max-width: var(--cr-container-max);
  margin: 0 auto;
  padding-inline: var(--cr-container-pad);
  width: 100%;
}

/* ============ HEADER ============ */
.customer-reviews__header {
  text-align: center;
  margin-bottom: var(--cr-header-mb);
  max-width: 100%;
}

.customer-reviews__eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  color: var(--cr-eyebrow-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.customer-reviews__title {
  margin: 0;
  font-family: var(--cr-font-body);
  font-weight: 900;
  font-size: clamp(24px, 7vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--cr-text);
  overflow-wrap: anywhere;
}

.customer-reviews__title-em {
  font-style: italic;
  color: var(--cr-accent);
  font-weight: 900;
}

/* ============ ROWS ============ */
.customer-reviews__rows {
  display: flex;
  flex-direction: column;
  gap: var(--cr-row-gap);
  width: 100%;
}

.customer-reviews__row {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 var(--cr-mask-fade),
    #000 calc(100% - var(--cr-mask-fade)),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 var(--cr-mask-fade),
    #000 calc(100% - var(--cr-mask-fade)),
    transparent 100%
  );
}

.customer-reviews__track {
  display: flex;
  gap: var(--cr-card-gap);
  width: max-content;
  will-change: transform;
  padding-inline: var(--cr-card-gap);
}

/* Animations por direção × velocidade */
.customer-reviews__row[data-direction="rtl"][data-speed="normal"] .customer-reviews__track {
  animation: cr-marquee-rtl var(--cr-marquee-duration-normal) linear infinite;
}
.customer-reviews__row[data-direction="rtl"][data-speed="slow"] .customer-reviews__track {
  animation: cr-marquee-rtl var(--cr-marquee-duration-slow) linear infinite;
}
.customer-reviews__row[data-direction="ltr"][data-speed="normal"] .customer-reviews__track {
  animation: cr-marquee-ltr var(--cr-marquee-duration-normal) linear infinite;
}
.customer-reviews__row[data-direction="ltr"][data-speed="slow"] .customer-reviews__track {
  animation: cr-marquee-ltr var(--cr-marquee-duration-slow) linear infinite;
}

@keyframes cr-marquee-rtl {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes cr-marquee-ltr {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.customer-reviews__row:hover .customer-reviews__track,
.customer-reviews__row:focus-within .customer-reviews__track {
  animation-play-state: paused;
}

/* ============ CARD ============ */
/* Card minimalista: a IMAGEM define o tamanho do card.
   Altura uniforme por linha (fixa por breakpoint), largura adapta ao aspect ratio natural do print.
   Sem letterbox, sem corte — print fica 100% legível. */
.customer-reviews__card {
  flex-shrink: 0;
  flex-grow: 0;
  display: inline-flex;
  border-radius: var(--cr-card-radius);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(11, 2, 2, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  background: var(--cr-card-print-bg);
}

.customer-reviews__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(11, 2, 2, 0.12);
}

.customer-reviews__card img {
  display: block;
  height: var(--cr-card-height);
  width: auto;
  /* Clamp pra evitar cards extremos (prints com aspect ratio >5:1 ou <0.8:1).
     Dentro do range, img usa aspect ratio natural; fora, contain mantém legibilidade. */
  min-width: var(--cr-card-min-width);
  max-width: var(--cr-card-max-width);
  object-fit: contain;
  object-position: center;
}

/* ============ RESPONSIVE ============ */
@media (min-width: 768px) {
  .customer-reviews {
    --cr-section-padding-y: 96px;
    --cr-card-height: 280px;
    --cr-card-min-width: 220px;
    --cr-card-max-width: 640px;
    --cr-card-gap: 18px;
    --cr-card-radius: 16px;
    --cr-header-mb: 64px;
    --cr-row-gap: 18px;
    --cr-container-pad: 24px;
  }
}

@media (min-width: 1200px) {
  .customer-reviews {
    --cr-section-padding-y: 120px;
    --cr-card-height: 340px;
    --cr-card-min-width: 280px;
    --cr-card-max-width: 800px;
    --cr-card-gap: 24px;
    --cr-card-radius: 20px;
    --cr-row-gap: 24px;
    --cr-header-mb: 80px;
  }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .customer-reviews__row {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .customer-reviews__row .customer-reviews__track {
    animation: none;
  }
  .customer-reviews__card {
    scroll-snap-align: start;
  }
}

/* ============ NO-JS FALLBACK ============ */
.customer-reviews:not([data-marquee-ready]) .customer-reviews__row {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-mask-image: none;
          mask-image: none;
}
.customer-reviews:not([data-marquee-ready]) .customer-reviews__track {
  animation: none;
}