/* Breadcrumb — markup: app/views/partials/breadcrumb.php */

.breadcrumb { margin-bottom: var(--s-5); }

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--text-muted);
}
.breadcrumb__item a { transition: color var(--dur) var(--ease); }
.breadcrumb__item a:hover { color: var(--c-gold); }
.breadcrumb__item .icon { opacity: .5; }
.breadcrumb__item [aria-current] { color: var(--c-gold); font-weight: 600; }

/* Touch: the links are ~20px tall, too small to hit reliably on a phone. */
@media (max-width: 767px) {
    .breadcrumb__list { gap: var(--s-1) var(--s-2); }
    .breadcrumb__item a,
    .breadcrumb__item [aria-current] {
        display: inline-block;
        padding-block: var(--s-3);
    }
}