/* ══════════════════════════════════════════════════════
   BREADCRUMBS — single visual component, single source of truth.
   Markup produced by api.py's render_breadcrumbs() helper:

   <nav class="breadcrumbs" aria-label="Breadcrumb">
     <ol>
       <li><a href="/">Home</a></li>
       <li><a href="/jobs">Jobs</a></li>
       <li aria-current="page">Senior Backend Engineer</li>
     </ol>
   </nav>
══════════════════════════════════════════════════════ */

.breadcrumbs { max-width: 1100px; margin: 0 auto; padding: 14px 24px 0; }
.breadcrumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted, #8A8A9A);
}
.breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.breadcrumbs li:not(:last-child)::after {
  content: "/"; color: var(--border, #ECECF4); font-weight: 400;
}
.breadcrumbs a { color: var(--muted, #8A8A9A); text-decoration: none; transition: color 0.15s ease; }
.breadcrumbs a:hover { color: var(--accent, #4F46E5); }
.breadcrumbs li[aria-current="page"] {
  color: var(--navy, #1A1A2E); font-weight: 600;
  max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 600px) {
  .breadcrumbs { padding: 12px 20px 0; }
  .breadcrumbs li[aria-current="page"] { max-width: 180px; }
}