/**
 * Card Losango (Trilhas de Capacitação) — componente aninhado em
 * widgets/banner-trilhas.php.
 *
 * Valores conferidos linha a linha contra o componente `DiamondCard` do fonte
 * do protótipo (App.tsx). Antes deste arquivo ser refeito, eu havia inventado
 * a estrutura: girava o cartão inteiro 45° e contra-girava o conteúdo por
 * dentro. Isso prende o texto ao retângulo INSCRITO no losango — cuja largura
 * útil é muito menor que o lado — e foi o que me levou a espremer a fonte até
 * 7,5px tentando resolver por geometria.
 *
 * No aprovado quem gira é só a camada de FUNDO (`__forma`), irmã do conteúdo.
 * O texto ocupa a caixa quadrada inteira de 96px e cabe com folga em 8px.
 *
 * O que NÃO vem do protótipo, e é adição deliberada: a faixa rola. No fonte
 * ela é `flex-wrap: nowrap` dentro de um `overflow: hidden`, ou seja, os
 * losangos das pontas simplesmente somem cortados em tela estreita. Aqui a
 * faixa é rolável e tem rolagem automática em laço (assets/js/banner-trilhas.js),
 * a pedido do responsável.
 */

/* ==========================================================
 * 1. FAIXA
 * ========================================================== */

.fjpn-diamond-trilhas {
  display: flex;
  align-items: center;
  /* `safe` para a faixa centralizar quando couber e voltar ao início quando
     não couber — num contêiner que rola, `center` puro joga o excedente para
     os dois lados e o que sai pela esquerda fica inalcançável. */
  justify-content: safe center;
  gap: 10px;
  padding: 32px 32px 48px;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* Consome o gesto horizontal para rolar a faixa e deixa o vertical livre
     para a página. */
  touch-action: pan-x;
  cursor: grab;
  scrollbar-width: none;
  /* Degradê nas bordas indicando que há mais conteúdo — as custom properties
     são zeradas pelo JS quando a faixa chega ao início/fim. */
  --fjpn-diamond-fade-start: 0px;
  --fjpn-diamond-fade-end: 0px;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--fjpn-diamond-fade-start),
    black calc(100% - var(--fjpn-diamond-fade-end)),
    transparent 100%
  );
}

.fjpn-diamond-trilhas::-webkit-scrollbar {
  height: 0;
}

.fjpn-diamond-trilhas.is-arrastando {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

/* Snap e rolagem automática contínua são incompatíveis: a cada quadro o
   navegador repuxa a posição para o ponto de encaixe mais próximo, e contra um
   avanço de fração de pixel o puxão sempre vence. A classe entra pelo JS, de
   modo que sem autoscroll (conteúdo que já cabe, ou preferência de menos
   movimento) o encaixe continua valendo para rolagem por toque. */
.fjpn-diamond-trilhas.is-autoscroll {
  scroll-snap-type: none;
}

/* ==========================================================
 * 2. ITEM E ZIGUE-ZAGUE
 * ========================================================== */

.fjpn-diamond-item {
  position: relative;
  flex-shrink: 0;
  scroll-snap-align: center;
  /* O losango girado 45° projeta as pontas para fora da caixa de 96px — a
     diagonal mede 136px. Sem esta folga vertical as pontas de cima e de baixo
     ficam cortadas pelo padding da faixa. */
  padding-block: 22px;
}

/* Zigue-zague: itens de índice ímpar descem 26px (valor do protótipo). */
.fjpn-diamond-item--offset {
  transform: translateY(26px);
  transition: transform 200ms var(--fjpn-ease-simple, ease);
}

/* ==========================================================
 * 3. CARTÃO
 * ========================================================== */

.fjpn-diamond-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  text-decoration: none;
  outline-offset: 8px;
}

/* Camada de fundo — é ela, e só ela, que gira 45°. A rotação vive dentro dos
   keyframes de flutuação (§5), então cada losango sobe e desce mantendo o
   giro. */
.fjpn-diamond-card__forma {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    var(--fjpn-diamond-start, #1b4da1),
    var(--fjpn-diamond-end, #2563eb)
  );
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transform: rotate(45deg);
  transition: box-shadow 250ms var(--fjpn-ease-simple, ease);
}

.fjpn-diamond-card:hover .fjpn-diamond-card__forma,
.fjpn-diamond-card:focus-visible .fjpn-diamond-card__forma {
  box-shadow: 0 16px 40px color-mix(in srgb, var(--fjpn-diamond-start, #1b4da1) 40%, transparent);
}

/* ==========================================================
 * 4. CONTEÚDO — quadrado, sem rotação
 * ========================================================== */

.fjpn-diamond-card__conteudo {
  position: relative;
  z-index: 1;
  padding-inline: 10px;
  text-align: center;
  transition: transform 250ms var(--fjpn-ease-simple, ease);
}

.fjpn-diamond-card:hover .fjpn-diamond-card__conteudo,
.fjpn-diamond-card:focus-visible .fjpn-diamond-card__conteudo {
  transform: scale(1.07);
}

.fjpn-diamond-card__icon {
  display: block;
  margin-bottom: 3px;
  font-size: 18px;
  line-height: 1;
  color: var(--fjpn-white);
}

.fjpn-diamond-card__icon svg {
  width: 18px;
  height: 18px;
  fill: var(--fjpn-white);
  margin-inline: auto;
}

/* 8px é o valor do protótipo, abaixo do piso de 11px que o projeto adota para
   rótulos. É exceção consciente e limitada a este elemento: o losango tem 96px
   e o rótulo é apoio visual, não o conteúdo em si. O título COMPLETO vai no
   `.screen-reader-text` do link, então quem usa leitor de tela recebe o nome
   inteiro do curso — e quem quiser aumentar tem o controle de tipografia
   "Título dentro do losango" no painel do widget Trilhas. */
.fjpn-diamond-card__title {
  display: block;
  max-width: 58px;
  margin-inline: auto;
  font-family: var(--fjpn-font-sans);
  font-size: 8px;
  font-weight: var(--fjpn-weight-bold);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fjpn-white);
  /* Sombra no texto porque o gradiente de fundo varia por trilha: sem ela, o
     branco some sobre os tons mais claros (amarelo, ciano). */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.fjpn-diamond-card__badge {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  font-family: var(--fjpn-font-sans);
  font-size: 8px;
  font-weight: var(--fjpn-weight-bold);
  color: rgba(255, 255, 255, 0.95);
}

/* ==========================================================
 * 5. FLUTUAÇÃO
 * Seis curvas com amplitudes diferentes, cicladas entre os itens — é o que
 * evita o efeito de "onda sincronizada" que uma animação única produziria.
 * O `rotate(45deg)` precisa estar DENTRO de cada keyframe: `transform` é uma
 * propriedade só, então uma animação que anime translateY sobrescreveria a
 * rotação e o losango viraria quadrado durante a animação.
 * ========================================================== */

@keyframes fjpn-diamond-float-1 { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(-10px) rotate(45deg); } }
@keyframes fjpn-diamond-float-2 { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(-14px) rotate(45deg); } }
@keyframes fjpn-diamond-float-3 { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(-8px)  rotate(45deg); } }
@keyframes fjpn-diamond-float-4 { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(-12px) rotate(45deg); } }
@keyframes fjpn-diamond-float-5 { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(-7px)  rotate(45deg); } }
@keyframes fjpn-diamond-float-6 { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(-11px) rotate(45deg); } }

@media (prefers-reduced-motion: no-preference) {
  .fjpn-diamond-card__forma--float-1 { animation: fjpn-diamond-float-1 3.6s 0.0s var(--fjpn-ease-default, ease-in-out) infinite; }
  .fjpn-diamond-card__forma--float-2 { animation: fjpn-diamond-float-2 4.1s 0.4s var(--fjpn-ease-default, ease-in-out) infinite; }
  .fjpn-diamond-card__forma--float-3 { animation: fjpn-diamond-float-3 3.8s 0.8s var(--fjpn-ease-default, ease-in-out) infinite; }
  .fjpn-diamond-card__forma--float-4 { animation: fjpn-diamond-float-4 4.3s 0.2s var(--fjpn-ease-default, ease-in-out) infinite; }
  .fjpn-diamond-card__forma--float-5 { animation: fjpn-diamond-float-5 3.5s 1.0s var(--fjpn-ease-default, ease-in-out) infinite; }
  .fjpn-diamond-card__forma--float-6 { animation: fjpn-diamond-float-6 4.0s 0.6s var(--fjpn-ease-default, ease-in-out) infinite; }
}

/* Sem movimento: a rotação precisa continuar aplicada, senão o losango vira
   quadrado para quem pediu menos animação. */
@media (prefers-reduced-motion: reduce) {
  .fjpn-diamond-card__forma {
    animation: none !important;
    transform: rotate(45deg) !important;
  }

  .fjpn-diamond-item--offset {
    transition: none !important;
  }
}