/* Cards, chips and badges (08 §7.2). */
.card {
  display: block; padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: inherit; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease);
}
a.card:hover { border-color: var(--color-border-strong); }
.card__icon { width: var(--icon-md); height: var(--icon-md); color: var(--color-primary); margin-bottom: var(--space-3); }
.card__title { font-size: var(--text-h3); font-weight: 600; line-height: 1.35; }
.card__text { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-small); }

.chip {
  display: inline-flex; align-items: center; min-height: var(--control-h-sm); padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  color: var(--color-text); font-size: var(--text-small); text-decoration: none;
}
.chip:hover { border-color: var(--color-text); }
.chip[aria-current="page"], .chip--selected { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

.badge {
  display: inline-flex; align-items: center; padding: 2px var(--space-2);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  font-size: var(--text-tiny); font-weight: 600; line-height: 1.4; color: var(--color-text-muted);
}

/* Guide card (blog lists, related guides, home) */
.post-card { display: grid; gap: var(--space-2); align-content: start; }
.post-card .badge { justify-self: start; }
.post-card .card__title { font-size: var(--text-h3); }
.post-card__meta { font-size: var(--text-small); color: var(--color-text-muted); }