/**
 * Poupex Play 4.0 — Cabeçalho de seção
 * Namespace: .pp4-sec*
 *
 * Sprint 11 do redesign.
 *
 * Nasceu dentro de `games.css` no Sprint 10 como `.pp4-games-section`.
 * Não tem nada de jogos: é "título de faixa, com contagem opcional e um
 * complemento à direita" — o Hub de Mini Apps precisava exatamente do
 * mesmo, e essa seria a segunda cópia. Já vimos esse filme três vezes
 * nesta migração (abas, `_page_header.php`, modal de comprovante), então
 * desta vez o componente sai do arquivo de tela antes de duplicar.
 *
 * Marcação:
 *
 *   <header class="pp4-sec__head">
 *     <h2 class="pp4-sec__title">
 *       Título <span class="pp4-sec__count">6</span>
 *     </h2>
 *     <p class="pp4-sec__sub">complemento</p>
 *   </header>
 *
 * `.pp4-sec` é o invólucro da faixa inteira (cabeçalho + conteúdo).
 */

.pp4-sec {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-4);
  min-width: 0;
}

.pp4-sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pp4-space-3);
  flex-wrap: wrap;
}

/* `.shell--app h2` = 0,1,1 em brand-theme.css:482. Aqui 0,1,0 + o
   seletor com `html[data-theme]` (0,1,1) para empatar e vencer por
   ordem — este arquivo carrega depois. */
.pp4-sec__title,
html[data-theme] .pp4-sec__title {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-2);
  margin: 0 !important;
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-lg);
  font-weight: var(--pp4-weight-bold);
  letter-spacing: -0.01em;
}

.pp4-sec__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-surface-3);
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-bold);
}

.pp4-sec__sub,
html[data-theme] .pp4-sec__sub {
  margin: 0 !important;
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-sm);
}