/**
 * Widget "Seção Trilhas de Capacitação" (BannerTrilhas)
 *
 * Fonte: architecture/secoes-design.md (seção 3, `BannerTrilhas`) e
 * architecture/design-tokens.md. A faixa de losangos em si (`.fjpn-diamond-*`)
 * é estilizada por assets/css/sections/diamond-card.css, do widget aninhado
 * `fjpn-diamond-card` — este arquivo cuida só do que está EM VOLTA dela:
 * fundo decorativo, cabeçalho, barra de estatísticas e CTA.
 *
 * Tokens vindos de assets/css/tokens.css — nenhuma cor/tamanho literal exceto
 * onde não existe token dedicado (comentado caso a caso, mesmo critério já
 * usado em base.css, sobre.css e missao.css).
 */

.fjpn-banner-trilhas {
  position: relative;
  overflow: hidden;
  /* Cor de fundo customizável (widgets/banner-trilhas.php, controle "Cor de
     fundo da seção") — fallback idêntico ao valor original (--fjpn-white). */
  background-color: var(--fjpn-banner-trilhas-bg, var(--fjpn-white));
  /* Imagem de fundo opcional — só é definida inline pelo PHP quando a
     cliente escolhe uma imagem; sem imagem, cai em "none" e não altera nada. */
  background-image: var(--fjpn-banner-trilhas-bg-image, none);
  background-size: cover;
  background-position: center;
  /* CORREÇÃO (diagnóstico item 22): a seção ocupava bem mais altura que o
     aprovado — py-lg (96px) trocado por py-md (80px); o resto do ar
     "sobrando" vem dos gaps internos (cabeçalho/stats), reduzidos abaixo. */
  padding-block: var(--fjpn-space-section-py-md);
}

/* Overlay sobre a imagem de fundo (widgets/banner-trilhas.php, controle
   "Cor do overlay") — só é renderizado no PHP quando há imagem de fundo;
   fallback totalmente transparente preserva o visual quando a cliente não
   define uma cor própria. */
.fjpn-banner-trilhas__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--fjpn-banner-trilhas-overlay, rgba(0, 0, 0, 0));
}

/* ==========================================================================
   1. FUNDO DECORATIVO
   Ícones em baixa opacidade espalhados atrás do conteúdo.
   CORREÇÃO (diagnóstico item 20): no aprovado os ícones são bem mais sutis e
   ficam só nos cantos superiores — antes eles se espalhavam por toda a
   seção (inclusive no meio/embaixo, competindo com o conteúdo) em opacidade
   alta o bastante pra chamar atenção. Reduzido o tamanho e a opacidade, e
   as 6 posições reagrupadas nos dois cantos de cima (reaproveitadas em
   ciclo caso a cliente cadastre mais de 6 itens — mesmo raciocínio de
   `index % 6` já usado nas variações de flutuação do losango).
   ========================================================================== */

.fjpn-banner-trilhas__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.fjpn-banner-trilhas__fundo-icone {
  position: absolute;
  font-size: 1.75rem;
  line-height: 1;
  opacity: 0.06;
}

.fjpn-banner-trilhas__fundo-icone--0 { top: 4%; left: 4%; }
.fjpn-banner-trilhas__fundo-icone--1 { top: 9%;  left: 15%; }
.fjpn-banner-trilhas__fundo-icone--2 { top: 3%; right: 5%; }
.fjpn-banner-trilhas__fundo-icone--3 { top: 12%; right: 17%; }
.fjpn-banner-trilhas__fundo-icone--4 { top: 16%; left: 8%; }
.fjpn-banner-trilhas__fundo-icone--5 { top: 18%; right: 9%; }

/* ==========================================================================
   2. CABEÇALHO
   Mesmo trio divisor+eyebrow+heading do resto do site (base.css), só que
   centralizado — layout exclusivo desta seção.
   ========================================================================== */

.fjpn-banner-trilhas__cabecalho {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Diagnóstico item 22: era --fjpn-gap-hero-columns (48px) — reduzido para
     encurtar o ar entre título e losangos. */
  margin-bottom: var(--fjpn-gap-grid);
}

.fjpn-banner-trilhas__titulo {
  margin-block: 0 var(--fjpn-gap-medium);
}

.fjpn-banner-trilhas__titulo-destaque {
  /* Cor customizável (widgets/banner-trilhas.php, controle "Cor do trecho de
     destaque do título") — herda a custom property definida na raiz da
     seção; fallback idêntico ao valor original (--fjpn-orange-primary). */
  color: var(--fjpn-banner-trilhas-destaque, var(--fjpn-orange-primary));
}

.fjpn-banner-trilhas__texto {
  max-width: 42rem;
  margin-block: 0;
}

/* ==========================================================================
   3. FAIXA DE LOSANGOS
   Só o posicionamento em relação ao resto da seção — geometria e animação
   do losango em si vivem em diamond-card.css.
   ========================================================================== */

.fjpn-banner-trilhas__faixa {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   4. BARRA DE ESTATÍSTICAS
   CORREÇÃO (diagnóstico item 18): no site estava num cartão branco com
   borda e sombra — no aprovado é uma linha simples sobre fundo levemente
   acinzentado, com divisores verticais discretos entre os itens (sem
   cartão elevado). Removidos fundo branco/sombra/radius grande; fundo
   passa a ser o cinza neutro do site (--fjpn-bg-soft), sem elevação.
   Empilha em coluna no mobile, vira linha com divisores a partir de 768px.
   ========================================================================== */

.fjpn-banner-trilhas__stats {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--fjpn-gap-medium);
  max-width: 64rem;
  /* Diagnóstico item 22: era --fjpn-gap-hero-columns (48px) — reduzido. */
  margin: 0 auto var(--fjpn-gap-grid);
  padding: var(--fjpn-gap-medium) var(--fjpn-padding-card);
  /* Conferido no fonte: a barra é separada da faixa por uma LINHA no topo, e
     não por um cartão com fundo. Eu havia posto fundo claro e cantos
     arredondados, o que a transformava numa caixa flutuante e competia
     visualmente com os losangos logo acima.
     O fundo segue customizável pelo painel — mas o padrão agora é
     transparente, como no aprovado. */
  border-top: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
  background: var(--fjpn-banner-trilhas-stats-bg, transparent);
  /* Sem raio: no aprovado a barra e uma faixa entre linhas, nao um cartao. */
  border-radius: 0;
}

.fjpn-banner-trilhas__stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fjpn-gap-icon-text-lg);
  padding-block: var(--fjpn-gap-icon-text);
  text-align: center;
}

@media (min-width: 768px) {
  .fjpn-banner-trilhas__stats {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--fjpn-gap-medium);
  }

  .fjpn-banner-trilhas__stat {
    flex: 1 1 0;
    padding-inline: var(--fjpn-gap-medium);
    border-left: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
  }

  .fjpn-banner-trilhas__stat:first-child {
    border-left: none;
  }
}

.fjpn-banner-trilhas__stat-icone {
  font-size: var(--fjpn-text-heading-sm);
  line-height: 1;
}

.fjpn-banner-trilhas__stat-texto {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-button);
  font-weight: var(--fjpn-weight-semibold);
  /* Cor customizável (widgets/banner-trilhas.php, controle "Cor do texto da
     barra de estatísticas") — fallback idêntico ao original
     (--fjpn-text-primary). */
  color: var(--fjpn-banner-trilhas-stats-texto, var(--fjpn-text-primary));
}

/* ==========================================================================
   5. CTA FINAL
   ========================================================================== */

.fjpn-banner-trilhas__cta-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

/* Cores customizáveis do botão final (widgets/banner-trilhas.php, controles
   "Cor de fundo do botão final" / "Cor do texto do botão final"). Seletor
   escopado (2 classes) vence a especificidade de `.fjpn-btn-blue` em
   base.css sem precisar de `!important`. `--fjpn-banner-trilhas-cta-bg` só é
   definida inline quando a cliente escolhe uma cor — sem override, o
   fallback repete o mesmo gradiente já usado por `.fjpn-btn-blue`. */
.fjpn-banner-trilhas__cta-wrap .fjpn-btn-blue {
  background: var(--fjpn-banner-trilhas-cta-bg, var(--fjpn-gradient-blue-button));
  color: var(--fjpn-banner-trilhas-cta-texto, var(--fjpn-white));
}

/* ==========================================================================
   6. RESPONSIVO
   Base já é a versão compacta (mobile-first) — o tamanho dos ícones de fundo
   (item 20) não precisa mais de exceção pra telas estreitas.
   ========================================================================== */

/* ==========================================================================
   7. PREFERS-REDUCED-MOTION
   Esta seção não define animação própria (a flutuação/hover do losango é
   neutralizada em diamond-card.css); mantido por completude/documentação —
   caso um efeito de entrada seja adicionado aqui no futuro, já cai dentro do
   escopo coberto por este bloco.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .fjpn-banner-trilhas__fundo-icone {
    animation: none !important;
  }
}