/* Modes page specific styles - minimal, extending base.css without duplicating */
.page-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.page-hero .hero-content p { max-width: 60ch; }
.page-hero .hero-ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.page-hero .hero-media img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 1024px) {
  .page-hero { grid-template-columns: 1fr; }
}

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

/* Breadcrumb */
.breadcrumb { margin: var(--space-6) 0 var(--space-4); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.breadcrumb a { color: var(--color-text-secondary); }
.breadcrumb li { color: var(--color-text-muted); }
.breadcrumb li+li::before { content: "/"; color: var(--color-neutral-500); margin: 0 var(--space-2); }

/* Media inside cards */
.media img { border-radius: var(--radius-base); }

/* Table */
.table-responsive { overflow-x: auto; border-radius: var(--radius-base); }
.modes-table { width: 100%; min-width: 720px; }
.modes-table th, .modes-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-neutral-700);
}
.modes-table thead th { color: var(--color-primary-light); font-family: var(--font-heading); }
.modes-table tbody tr:hover { background-color: var(--color-background-overlay); }

/* Lists */
.list { display: grid; gap: var(--space-2); }

/* Focus enhancements for scrollable regions */
.table-responsive:focus { box-shadow: 0 0 0 3px var(--color-accent-glow); }