/* ============================================
   BREADCRUMBS COMPONENT
   Consistent breadcrumb navigation for all pages
   ============================================ */

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md) 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    flex-wrap: wrap;
}

.breadcrumbs .container {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.breadcrumb-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.breadcrumb-separator {
    color: var(--color-gray-500);
    user-select: none;
}

.breadcrumb-current {
    color: #333333;
    font-weight: var(--font-weight-medium);
}

/* Responsive */
@media (max-width: 767px) {
    .breadcrumbs {
        font-size: var(--font-size-xs);
        padding: var(--space-sm) 0;
    }
}