/* Mechanics Page Specific Styles - minimal, leveraging base.css */
.hero {
  background: linear-gradient(180deg, rgba(0, 255, 136, 0.06), rgba(0, 212, 255, 0.04));
  border: 1px solid var(--color-neutral-700);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}

.intro {
  color: var(--color-text-muted);
  max-width: 70ch;
}

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

.breadcrumbs {
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
}

.breadcrumb-link {
  color: var(--color-neutral-300);
}

.breadcrumb-link:hover,
.breadcrumb-link:focus {
  color: var(--color-primary);
}

.breadcrumb-sep {
  color: var(--color-neutral-500);
}

.breadcrumb-current {
  color: var(--color-neutral-300);
}

.figure {
  border: 1px solid var(--color-neutral-700);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-background-card);
  box-shadow: var(--shadow-md);
}

.figure img {
  width: 100%;
  height: auto;
  display: block;
}

.figure figcaption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.06), rgba(0, 212, 255, 0.06));
}

/* Link cards in "Zobacz także" act like interactive tiles */
.card[href] {
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 767px) {
  .hero {
    padding: var(--space-6);
  }
}