/* ========== Post Navigation ========== */
.post-nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 32px;
}

@media (min-width: 768px) {
  .post-nav-links {
    gap: 16px;
    margin-top: 40px;
  }
}

.post-nav-links a {
  display: block;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: var(--shadow-sm);
  background: var(--surface-1);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.post-nav-links a:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.post-nav-links .nav-subtitle {
  display: block;
  font-size: 12px;
  color: var(--color-ink-4);
  margin-bottom: 4px;
}

.post-nav-links .nav-title {
  font-weight: 700;
  color: var(--color-ink);
}

.post-navigation,
.navigation.post-navigation {
  margin-top: 40px;
}

.post-navigation .nav-links,
.navigation.post-navigation .nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .post-navigation .nav-links,
  .navigation.post-navigation .nav-links {
    gap: 16px;
  }
}

.post-navigation a,
.navigation.post-navigation a {
  display: block;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background: var(--surface-2);
  transition: border-color 0.2s;
}

.post-navigation a:hover,
.navigation.post-navigation a:hover {
  border-color: var(--color-primary);
}


/* ===== Utility card classes (unified in card-primitives.css) ===== */
.mt-3 {
    margin-top: 16px;
}