/* ========================================
   Breadcrumb surface (layout + responsive)
   Theme colors/tokens: breadcrumb-dynamic.css.php
   ======================================== */

.breadcrumb-section {
    --breadcrumb-inner-max-width: 1200px;
    --breadcrumb-padding-inline: 1rem;
    --breadcrumb-padding-block-start: 1rem;
    --breadcrumb-padding-block-end: 1rem;
    --breadcrumb-nav-min-height: 1.5rem;
    --breadcrumb-gap: 0.5rem;
    --breadcrumb-font-size: 0.875rem;
    --breadcrumb-z-index: 35;

    position: relative;
    z-index: var(--breadcrumb-z-index);
    width: 100%;
    box-sizing: border-box;
    background: var(--breadcrumb-bg, #f3f4f6);
    color: var(--breadcrumb-text, #6b7280);
    padding: var(--breadcrumb-padding-block-start) var(--breadcrumb-padding-inline)
        var(--breadcrumb-padding-block-end);
    opacity: 1;
}

.breadcrumb__inner,
.breadcrumb-section .breadcrumb__inner {
    width: 100%;
    max-width: var(--breadcrumb-inner-max-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.breadcrumb__trail,
.breadcrumb-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--breadcrumb-gap);
    min-height: var(--breadcrumb-nav-min-height);
    font-size: var(--breadcrumb-font-size);
    line-height: 1.4;
    justify-content: var(--breadcrumb-justify, flex-start);
    overflow: visible;
    width: 100%;
}

.breadcrumb-item,
.breadcrumb-link,
.breadcrumb-active {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    flex-shrink: 0;
    max-width: none;
    min-width: max-content;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.breadcrumb-item {
    color: var(--breadcrumb-text, #6b7280);
}

.breadcrumb-link {
    color: var(--breadcrumb-link, #2563eb);
    text-decoration: none;
}

.breadcrumb-link:hover {
    color: var(--breadcrumb-link-hover, #1d4ed8);
}

.breadcrumb-active {
    color: var(--breadcrumb-active, #4b5563);
    font-weight: 500;
}

.breadcrumb-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    flex-shrink: 0;
    color: var(--breadcrumb-separator, #9ca3af);
    font-size: var(--breadcrumb-separator-size, 0.75rem);
    line-height: 1;
    margin: 0 calc(var(--breadcrumb-gap) / 2);
    pointer-events: none;
    user-select: none;
}

.breadcrumb-separator i {
    font-size: inherit;
    color: inherit;
    font-style: normal;
    line-height: 1;
}

.breadcrumb-icon {
    margin-right: var(--breadcrumb-icon-spacing, 0.375rem);
}

.breadcrumb-icon-after {
    margin-right: 0;
    margin-left: var(--breadcrumb-icon-spacing, 0.375rem);
}

.breadcrumb__prefix,
.breadcrumb__label-marquee,
.breadcrumb__label-track {
    display: contents;
}

/* Preset modifiers (tokens may also be set in dynamic CSS) */
.breadcrumb-section--modern {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.breadcrumb-section--gradient {
    background: linear-gradient(
        90deg,
        var(--breadcrumb-bg, #f3f4f6) 0%,
        var(--breadcrumb-gradient-accent, rgba(37, 99, 235, 0.12)) 100%
    );
}

.breadcrumb-section--fluent {
    backdrop-filter: blur(10px);
}

.breadcrumb-section--minimal {
    background: transparent;
    border-bottom: 1px solid var(--breadcrumb-separator, #9ca3af);
}

.breadcrumb-section--modern .breadcrumb-item,
.breadcrumb-section--modern .breadcrumb-link {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.breadcrumb-section--modern .breadcrumb-link:hover {
    background: rgba(0, 0, 0, 0.05);
}

.breadcrumb-section--fluent .breadcrumb-item,
.breadcrumb-section--fluent .breadcrumb-link {
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
}

.breadcrumb-section--fluent .breadcrumb-link:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Motion / reveal safeguards */
@media (prefers-reduced-motion: reduce) {
    .breadcrumb-section,
    .breadcrumb-section .breadcrumb-nav,
    .breadcrumb-section .breadcrumb__trail {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

section.breadcrumb-section.dv2-reveal,
section.breadcrumb-section.dv2-reveal.dv2-reveal--visible {
    opacity: 1 !important;
    transform: none !important;
}

body.listing-archive-motion-none .breadcrumb-section,
body.listing-archive-motion-none .breadcrumb-section .breadcrumb-nav,
body.listing-archive-motion-none .breadcrumb-section .breadcrumb__trail {
    animation: none !important;
}

/* Mobile: fixed prefix + scrolling current label */
@media (max-width: 640px) {
    .breadcrumb-section[data-mobile-visible="false"] {
        display: none;
    }

    .breadcrumb-section {
        --breadcrumb-padding-block-start: 0.625rem;
        --breadcrumb-padding-block-end: 0.625rem;
        --breadcrumb-fade-width: 1rem;
        --breadcrumb-fade-bg: var(--breadcrumb-bg, #f3f4f6);
    }

    .breadcrumb-section[data-mobile-layout="horizontal"] .breadcrumb__prefix,
    .breadcrumb-section[data-mobile-layout="horizontal"] .breadcrumb__label-marquee,
    .breadcrumb-section[data-mobile-layout="horizontal"] .breadcrumb__label-track {
        display: inline-flex;
        align-items: center;
        min-height: var(--breadcrumb-nav-min-height);
    }

    .breadcrumb-section[data-mobile-layout="horizontal"] .breadcrumb-nav,
    .breadcrumb-section[data-mobile-layout="horizontal"] .breadcrumb__trail {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.375rem;
        max-width: 100%;
        overflow: hidden;
    }

    .breadcrumb-section[data-mobile-layout="horizontal"] .breadcrumb__prefix {
        flex: 0 0 auto;
        flex-shrink: 0;
        gap: 0.375rem;
        min-width: max-content;
    }

    .breadcrumb-section[data-mobile-layout="horizontal"] .breadcrumb__label-marquee {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        position: relative;
        touch-action: pan-x;
    }

    .breadcrumb-section[data-mobile-layout="horizontal"] .breadcrumb__label-track {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        min-width: max-content;
        white-space: nowrap;
        will-change: transform;
        transition: none;
    }

    .breadcrumb-section[data-mobile-layout="horizontal"] .breadcrumb__label-track .breadcrumb-item,
    .breadcrumb-section[data-mobile-layout="horizontal"] .breadcrumb__label-track .breadcrumb-link,
    .breadcrumb-section[data-mobile-layout="horizontal"] .breadcrumb__label-track .breadcrumb-active {
        min-width: max-content;
        max-width: none;
    }

    .breadcrumb-section[data-mobile-layout="horizontal"][data-label-overflows="true"] .breadcrumb__label-marquee {
        cursor: grab;
    }

    .breadcrumb-section[data-mobile-layout="horizontal"][data-label-overflows="true"].breadcrumb-section--marquee-active .breadcrumb__label-marquee,
    .breadcrumb-section[data-mobile-layout="horizontal"][data-label-overflows="true"] .breadcrumb__label-marquee:active {
        cursor: grabbing;
    }

    .breadcrumb-section[data-mobile-layout="horizontal"][data-label-overflows="true"] .breadcrumb__label-marquee::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: var(--breadcrumb-fade-width);
        pointer-events: none;
        background: linear-gradient(to left, var(--breadcrumb-fade-bg), rgba(255, 255, 255, 0));
        opacity: 1;
        transition: opacity 0.2s ease;
    }

    .breadcrumb-section[data-mobile-layout="horizontal"][data-label-overflows="true"].breadcrumb-section--label-at-end .breadcrumb__label-marquee::after {
        opacity: 0;
    }

    .breadcrumb-section[data-mobile-layout="vertical"] .breadcrumb-nav,
    .breadcrumb-section[data-mobile-layout="vertical"] .breadcrumb__trail {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 0.5rem;
        overflow: visible;
    }

    .breadcrumb-section[data-mobile-layout="vertical"] .breadcrumb-separator {
        display: none;
    }

    .breadcrumb-section[data-mobile-layout="vertical"][data-truncate-mobile="true"] .breadcrumb-item {
        max-width: var(--breadcrumb-mobile-max-width, 150px);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .breadcrumb-section .breadcrumb-separator {
        opacity: 0.75;
        min-width: 0.75rem;
    }
}

/* Tablet / small desktop: optional ellipsis, never zero-width collapse */
@media (min-width: 641px) and (max-width: 1023px) {
    .breadcrumb-section[data-compact-trail="true"] .breadcrumb-item,
    .breadcrumb-section[data-compact-trail="true"] .breadcrumb-link,
    .breadcrumb-section[data-compact-trail="true"] .breadcrumb-active {
        max-width: 14rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Large viewports: full trail */
@media (min-width: 1024px) {
    .breadcrumb-section .breadcrumb-nav,
    .breadcrumb-section .breadcrumb__trail {
        flex-wrap: wrap;
        overflow: visible;
    }

    .breadcrumb-section .breadcrumb-item,
    .breadcrumb-section .breadcrumb-link,
    .breadcrumb-section .breadcrumb-active {
        flex-shrink: 0;
        max-width: none;
        min-width: max-content;
        overflow: visible;
    }
}