/* Levels page styles - minimal and complementary to base.css */
.hero {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-accent) 100%);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-8);
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
}

.hero-content .hero-lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}

.hero-actions { margin-top: var(--space-4); }

.hero-figure img {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.breadcrumbs { margin-top: var(--space-6); margin-bottom: var(--space-4); }
.breadcrumbs-list { display: flex; gap: var(--space-2); align-items: center; font-size: var(--font-size-sm); color: var(--color-text-light); }
.breadcrumbs-list li+li::before { content: "/"; margin: 0 var(--space-2); color: var(--color-gray-400); }
.breadcrumbs a { color: var(--color-primary); }

.section { margin-top: var(--space-8); }

.cta-wrap { margin-top: var(--space-12); background: linear-gradient(135deg, var(--color-secondary-light) 0%, var(--color-secondary) 100%); }

/* Fine-tune card images */
.card figure { margin-top: var(--space-4); }
.card img { width: 100%; height: auto; }