/* ============================================================
   CARDS — Reusable card component and grid layout
   ============================================================ */

/* --- Grid Layouts --- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.grid-2-narrow { grid-template-columns: 55% 45%; }

/* --- Card Shell --- */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  animation: fadeInUp 0.5s ease both;
  animation-delay: 0.3s;
}

/* --- Card Header --- */
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border);
}

.card-title       { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card-title .icon { font-size: 15px; }

.card-link  { font-size: 12px; color: var(--accent); cursor: pointer; }
.card-link:hover { text-decoration: underline; }

.card-menu { color: var(--text3); cursor: pointer; font-size: 16px; letter-spacing: 2px; }

/* --- Card Body --- */
.card-body { padding: 16px 18px; }