/* ============================================================
   SEÇÃO: FEEDBACKS / AVALIAÇÕES
   Slug: feedbacks
   Design: PlayStation UI
   Nota: seção posicionada após "como-receber" (fundo #050C15
         com grid neon). A transição é tratada pelo ::before
         desta seção para que a mudança de fundo não seja abrupta.
   ============================================================ */

/* ---------- WRAPPER DA SEÇÃO ---------- */
.flavor-section--feedbacks {
  background-color: #080F1C;
  background-color: var(--color-bg-secondary, #080F1C);
  padding: 96px 0 88px;
  position: relative;
  overflow: hidden;
}

/*
   Fade de transição — dissolve o fundo anterior (#050C15)
   até o fundo desta seção (#080F1C).
   A linha sutil de 1px funciona como separador de seção no estilo
   "barra de carregamento" do PS5.
*/
.flavor-section--feedbacks::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(
    to bottom,
    #050C15 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Linha de separação sutil — referência ao indicador de loading PS5 */
.flavor-section--feedbacks::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 168, 232, 0.18),
    rgba(0, 112, 209, 0.25),
    rgba(0, 168, 232, 0.18),
    transparent
  );
  pointer-events: none;
  z-index: 1;
}

/* ---------- INNER CONTAINER ---------- */
.section-feedback__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

/*
   O shortcode [jc_feedbacks_showcase] injeta .jcf-wrapper,
   mas dentro da seção ele não precisa de max-width próprio
   pois o .section-feedback__inner já controla o container.
*/
.section-feedback__inner .jcf-wrapper {
  max-width: none;
  padding: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .flavor-section--feedbacks {
    padding: 72px 0 64px;
  }
}

@media (max-width: 480px) {
  .flavor-section--feedbacks {
    padding: 56px 0 48px;
  }

  .section-feedback__inner {
    padding: 0 16px;
  }
}