/* Mechanics page specific styles (kept minimal; builds on base.css) */

.breadcrumbs {
  background-color: var(--color-surface-secondary);
  border-bottom: 1px solid var(--color-gray-200);
}

.breadcrumbs-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.breadcrumbs-list li {
  color: var(--color-text-secondary);
}

.breadcrumbs-list li + li::before {
  content: "/";
  margin: 0 var(--space-2);
  color: var(--color-gray-400);
}

.hero {
  background-color: var(--color-primary-subtle);
}

.hero .img-wrapper {
  box-shadow: var(--shadow-base);
}

.card img {
  border-radius: var(--radius-lg);
}