/* habilidades-hub.css — depende de codex.css, pals-list.css, habilidades-list.css e habilidade-companheiro.css */

/* ---------- Área de briefing (editável depois) ---------- */
.briefing-panel{
  margin-bottom: 2.5rem;
}
.briefing-title{
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--text-bright);
  margin: 0 0 1rem;
}
.briefing-title em{ color: var(--accent); font-style:italic; }
.briefing-panel p{
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  width: 100%;
}
.briefing-panel p:last-child{ margin-bottom:0; }

/* ---------- Cabeçalho de cada seção (Ativas / Passivas / Companheiro) ---------- */
.skill-hub-section{
  margin-bottom: 3rem;
}
.skill-hub-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1rem;
}
.skill-hub-section-title{
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--text-bright);
  margin:0 0 .3rem;
}
.skill-hub-section-title em{ color: var(--accent); font-style:italic; }
.skill-hub-section-desc{
  font-size:.88rem;
  color: var(--text-dim);
  margin:0;
}

/* ---------- Botão de destaque "Ver todas" ---------- */
.skill-hub-cta{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark, var(--accent)));
  color: #fff;
  font-weight:600;
  font-size:.9rem;
  padding: .65rem 1.3rem;
  border-radius: 999px;
  text-decoration:none;
  white-space:nowrap;
  box-shadow: 0 8px 20px -8px rgba(157, 124, 240, .55);
  transition: transform .15s ease, box-shadow .15s ease;
}
.skill-hub-cta:hover{
  color:#fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px rgba(157, 124, 240, .7);
}
.skill-hub-cta i{ font-size:.85rem; transition: transform .15s ease; }
.skill-hub-cta:hover i{ transform: translateX(3px); }
.skill-hub-cta-count{
  font-family: var(--font-mono);
  font-weight:400;
  opacity:.85;
  font-size:.8rem;
}

/* ---------- Mini-grid de prévia (menos colunas que a listagem completa) ---------- */
.skill-hub-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

/* As 3 seções usam 2 colunas fixas — passivas porque passiveSkill_Badge()
   é um componente mais largo e não cabe bem em colunas estreitas; ativas
   e companheiro seguem o mesmo padrão visual por consistência */
.skill-hub-grid--2col{
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px){
  .skill-hub-grid--2col{
    grid-template-columns: 1fr;
  }
}