/* ==========================================================================
   BREADCRUMB COMPONENT
   Composant reutilisable pour fil d'Ariane.
   ========================================================================== */

.breadcrumb {
    margin-bottom: var(--sp-5);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-width: 0;
}

.breadcrumb-item a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--ease-fast);
    white-space: nowrap;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible {
    color: var(--primary);
    text-decoration: underline;
}

.breadcrumb-item--active span[aria-current] {
    color: var(--text-secondary);
    font-weight: var(--weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40ch;
    display: inline-block;
    vertical-align: bottom;
}

/* Chevron separator */
.breadcrumb-separator {
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0.5;
    margin: 0 var(--sp-1);
}

/* ==========================================================================
   MOBILE: truncate long breadcrumbs
   ========================================================================== */

@media (max-width: 600px) {
    .breadcrumb {
        font-size: var(--text-xs);
    }

    .breadcrumb-item--active span[aria-current] {
        max-width: 22ch;
    }
}

/* ==========================================================================
   PRINT: hide breadcrumbs
   ========================================================================== */

@media print {
    .breadcrumb {
        display: none;
    }
}