/* Mechanics Page Styles - tailored, minimal, leveraging base.css */
.hero.mechanics-hero {
  background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-secondary-light) 100%);
  padding: var(--space-16) 0 var(--space-12);
}
.hero .hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.hero h1 {
  color: var(--color-text-primary);
}
.hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 65ch;
}
.hero-ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.breadcrumbs { margin-bottom: var(--space-6); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; color: var(--color-text-light); }
.breadcrumbs li { font-size: var(--font-size-sm); }
.breadcrumbs li+li::before { content: "/"; margin: 0 var(--space-2); color: var(--color-text-light); }

.section-intro, .section-grid, .section-outro { padding: var(--space-12) 0; }

.media-figure { margin-top: var(--space-4); }
.media-figure img { border-radius: var(--radius-xl); box-shadow: var(--shadow-base); }
.media-figure figcaption { font-size: var(--font-size-sm); color: var(--color-text-light); margin-top: var(--space-2); }

.list-tips { display: grid; gap: var(--space-3); padding-left: 1rem; }
.list-tips li { list-style: disc; margin-left: 1rem; }

/* Responsive tweaks */
@media (max-width: 768px) {
  .hero.mechanics-hero { padding: var(--space-12) 0 var(--space-10); }
}