/* =========================================================
   components/layout-cards-buttons.css
   ---------------------------------------------------------
   Shared layout helpers, card styles and button primitives.
   ========================================================= */

/* =========================================================
   4) GRID HELPERS, CARDS & BUTTONS
   --------------------------------------------------------- */

.nn-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-m);
  margin-top: var(--space-m);
}

.nn-grid--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
  margin-top: var(--space-m);
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-m);
  box-shadow: var(--shadow);
}

.card + .card {
  margin-top: var(--space-m);
}

.btn {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.05s ease;
}

.btn:hover {
  opacity: 0.8;
  text-decoration: none;
  color: #fff;
}

.btn:active {
  transform: translateY(1px);
}

.btn--sm {
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
}