/* ============================================
   Reusable Components
   ============================================ */

/* ── Buttons ── */
.btn-blue {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--blue); color: var(--white);
  padding: 0.8rem 1.75rem; border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.9rem; font-weight: 600;
  text-decoration: none; transition: all 0.2s;
}
.btn-blue:hover { background: #154068; }

.btn-outline {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--white); color: var(--body-text);
  padding: 0.8rem 1.75rem; border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.9rem; font-weight: 600;
  text-decoration: none; transition: all 0.2s;
  border: 1.5px solid var(--rule);
}
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }

.btn-card-outline {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 0.7rem 1.5rem; border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.85rem; font-weight: 600;
  color: var(--ink); background: var(--white);
  border: 1.5px solid var(--rule);
  text-decoration: none; transition: all 0.2s;
}
.btn-card-outline:hover {
  border-color: var(--blue); color: var(--blue);
}