/* ==========================================================================
   components.css — Componentes reutilizáveis (botões, cards, badges)
   © @JottaCyber
   ========================================================================== */

/* ---- Botões ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1;
  padding: 12px 20px; border-radius: 11px; cursor: pointer; border: 1px solid transparent;
  transition: transform .08s, background .12s, border-color .12s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { background: var(--accent-ink); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Cards ---- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.card-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* card clicável (leva a outra página) */
a.card { color: inherit; display: block; }
a.card:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); transition: transform .12s, border-color .12s; }

/* ---- Badges / tags ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }

/* ---- Divisor de seção ---- */
.section-head { margin-bottom: 28px; }
.section-head .eyebrow { margin-bottom: 8px; }
.section-head p { color: var(--muted); max-width: 60ch; margin-bottom: 0; }