/* assets/styles/front/27-rework-detail-foundation.css */

.front-rework-detail-page
    .rework-detail-page {
    width: 100%;
    min-width: 0;
    min-height: 60vh;
}

/* Breadcrumb */

.front-rework-detail-page
    .rework-detail-breadcrumb {
    display: flex;
    width: min(
        calc(100% - 2.25rem),
        108rem
    );
    margin: 0 auto;
    padding:
        1.35rem
        0;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;

    color: var(--codex-muted);

    font-family: var(--codex-font-body);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.5;
}

.front-rework-detail-page
    .rework-detail-breadcrumb a {
    color: var(--codex-muted);
    text-decoration: none;

    transition:
        color 160ms ease;
}

.front-rework-detail-page
    .rework-detail-breadcrumb a:hover {
    color: var(--codex-cyan);
}

.front-rework-detail-page
    .rework-detail-breadcrumb a:focus-visible {
    border-radius: 0;
    outline:
        2px solid
        var(--codex-cyan);
    outline-offset: 0.2rem;
}

.rework-detail-breadcrumb__separator {
    color:
        rgb(167 157 191 / 44%);
    user-select: none;
}

.front-rework-detail-page
    .rework-detail-breadcrumb__current {
    color: var(--codex-paper);
    font-weight: 600;
}

/* Tablet */

@media (min-width: 48rem) {
    .front-rework-detail-page
        .rework-detail-breadcrumb {
        width: min(
            calc(100% - 8vw),
            108rem
        );
        padding:
            1.65rem
            0;
        gap: 0.55rem;

        font-size: 0.74rem;
    }
}

/* Desktop */

@media (min-width: 75rem) {
    .front-rework-detail-page
        .rework-detail-breadcrumb {
        padding:
            1.85rem
            0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .front-rework-detail-page
        .rework-detail-breadcrumb a {
        transition: none;
    }
}