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

.breadcrumb-section {
    --breadcrumb-max-width: var(--site-content-max-width, 1200px);
    --breadcrumb-padding-inline: 1rem;
    --breadcrumb-padding-block-start: 1rem;
    --breadcrumb-padding-block-end: 1rem;
    --breadcrumb-trail-gap: 0.5rem;
    --breadcrumb-icon-gap: 0.375rem;
    --breadcrumb-separator-padding-inline: 0rem;
    --breadcrumb-font-size: 0.875rem;
    --breadcrumb-z-index: 35;

    position: relative;
    z-index: var(--breadcrumb-z-index);
    width: 100%;
    max-width: var(--breadcrumb-max-width);
    margin-left: auto;
    margin-right: auto;
    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: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

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

.breadcrumb-item,
.breadcrumb-link,
.breadcrumb-active {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    flex-shrink: 0;
    gap: var(--breadcrumb-icon-gap);
    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);
    opacity: 1;
}

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

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

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

.breadcrumb-icon {
    flex-shrink: 0;
    line-height: 1;
}

.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: calc(var(--breadcrumb-separator-size, 0.75rem) / var(--breadcrumb-font-size, 0.875rem) * 1em);
    line-height: 1;
    padding-inline: var(--breadcrumb-separator-padding-inline);
    pointer-events: none;
    user-select: none;
}

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

/* Desktop/tablet: explicit flex wrappers (safe with Tailwind; avoids display:contents collapse) */
@media (min-width: 641px) {
    .breadcrumb-section {
        --breadcrumb-font-size-desktop: clamp(
            1rem,
            calc(var(--breadcrumb-font-size, 0.875rem) * 1.143),
            1.125rem
        );
    }

    .breadcrumb-section .breadcrumb__trail,
    .breadcrumb-section .breadcrumb-nav {
        font-size: var(--breadcrumb-font-size-desktop);
    }

    .breadcrumb-section .breadcrumb-separator {
        font-size: 0.75em;
    }

    .breadcrumb-section .breadcrumb__prefix,
    .breadcrumb-section .breadcrumb__label-marquee,
    .breadcrumb-section .breadcrumb__label-track {
        display: inline-flex;
        align-items: center;
    }

    .breadcrumb-section .breadcrumb__prefix {
        flex: 0 0 auto;
        flex-shrink: 0;
        flex-wrap: wrap;
        gap: var(--breadcrumb-trail-gap);
        max-width: 100%;
    }

    .breadcrumb-section .breadcrumb__label-marquee {
        flex: 1 1 auto;
        min-width: 3.5rem;
        overflow: visible;
    }

    .breadcrumb-section .breadcrumb__label-track {
        flex: 0 0 auto;
        min-width: max-content;
        white-space: nowrap;
    }
}

/* Style presets — bar, crumb shape, and separator presentation */
.breadcrumb-section--pills,
.breadcrumb-section--inline,
.breadcrumb-section--contained,
.breadcrumb-section--path {
    --breadcrumb-chip-padding-block: 0.35em;
    --breadcrumb-chip-padding-inline: 0.75em;
}

.breadcrumb-section--pills .breadcrumb-link,
.breadcrumb-section--pills .breadcrumb-active,
.breadcrumb-section--contained .breadcrumb-active,
.breadcrumb-section--path .breadcrumb-active {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Pills: rounded chip on every segment */
.breadcrumb-section--pills {
    background: transparent;
    --breadcrumb-fade-bg: var(--breadcrumb-bg, #f3f4f6);
}

.breadcrumb-section--pills .breadcrumb-separator {
    display: none;
}

.breadcrumb-section--pills .breadcrumb-link {
    padding: var(--breadcrumb-chip-padding-block) var(--breadcrumb-chip-padding-inline);
    border-radius: 999px;
    background: color-mix(in srgb, var(--breadcrumb-bg, #f3f4f6) 90%, var(--breadcrumb-text, #6b7280));
    color: var(--breadcrumb-link, #2563eb);
    text-decoration: none;
}

.breadcrumb-section--pills .breadcrumb-link:hover {
    background: color-mix(in srgb, var(--breadcrumb-link, #2563eb) 16%, var(--breadcrumb-bg, #f3f4f6));
    text-decoration: none;
}

.breadcrumb-section--pills .breadcrumb-active {
    padding: var(--breadcrumb-chip-padding-block) var(--breadcrumb-chip-padding-inline);
    border-radius: 999px;
    background: var(--breadcrumb-link, #2563eb);
    color: #fff;
    font-weight: 600;
}

/* Inline: no bar, slash separators */
.breadcrumb-section--inline {
    background: transparent;
    box-shadow: none;
    --breadcrumb-fade-bg: transparent;
}

.breadcrumb-section--inline .breadcrumb-link {
    color: var(--breadcrumb-text, #6b7280);
    text-decoration: none;
}

.breadcrumb-section--inline .breadcrumb-link:hover {
    color: var(--breadcrumb-link, #2563eb);
}

.breadcrumb-section--inline .breadcrumb-active {
    color: var(--breadcrumb-link, #2563eb);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.breadcrumb-section--inline .breadcrumb-separator {
    color: color-mix(in srgb, var(--breadcrumb-separator, #9ca3af) 70%, transparent);
}

.breadcrumb-section--inline .breadcrumb-separator i {
    display: none;
}

.breadcrumb-section--inline .breadcrumb-separator::before {
    content: "/";
    font-size: 0.85em;
    font-weight: 400;
    line-height: 1;
}

/* Contained: floating card trail */
.breadcrumb-section--contained {
    background: transparent;
    --breadcrumb-fade-bg: var(--breadcrumb-bg, #f3f4f6);
}

.breadcrumb-section--contained .breadcrumb__inner {
    background: var(--breadcrumb-bg, #f3f4f6);
    border-radius: 0.75rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    padding: 0.625rem 1rem;
    box-sizing: border-box;
}

.breadcrumb-section--contained .breadcrumb-separator {
    opacity: 0.45;
}

.breadcrumb-section--contained .breadcrumb-active {
    padding: 0.2em 0.5em;
    border-radius: 0.375rem;
    background: color-mix(in srgb, var(--breadcrumb-link, #2563eb) 12%, var(--breadcrumb-bg, #f3f4f6));
    font-weight: 600;
}

/* Path: muted trail, badge on current page */
.breadcrumb-section--path {
    background: linear-gradient(
        90deg,
        var(--breadcrumb-bg, #f3f4f6) 0%,
        color-mix(in srgb, var(--breadcrumb-link, #2563eb) 10%, var(--breadcrumb-bg, #f3f4f6)) 100%
    );
    --breadcrumb-fade-bg: var(--breadcrumb-bg, #f3f4f6);
}

.breadcrumb-section--path .breadcrumb-link {
    color: color-mix(in srgb, var(--breadcrumb-text, #6b7280) 82%, transparent);
}

.breadcrumb-section--path .breadcrumb-link:hover {
    color: var(--breadcrumb-link, #2563eb);
}

.breadcrumb-section--path .breadcrumb-separator {
    opacity: 0.4;
}

.breadcrumb-section--path .breadcrumb-active {
    padding: var(--breadcrumb-chip-padding-block) 0.65em;
    border-radius: 0.375rem;
    border: 1px solid color-mix(in srgb, var(--breadcrumb-link, #2563eb) 35%, transparent);
    background: color-mix(in srgb, var(--breadcrumb-link, #2563eb) 12%, var(--breadcrumb-bg, #f3f4f6));
    color: var(--breadcrumb-active, #4b5563);
    font-weight: 600;
}

/* 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,
body.listing-archive-motion-none .breadcrumb-section .breadcrumb-item,
body.listing-archive-motion-none .breadcrumb-section .breadcrumb-link,
body.listing-archive-motion-none .breadcrumb-section .breadcrumb-active,
body.listing-archive-motion-none .breadcrumb-section .breadcrumb-separator {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Always-visible trail text (wins over interrupted section fade animations) */
.breadcrumb-section .breadcrumb-item,
.breadcrumb-section .breadcrumb-link,
.breadcrumb-section .breadcrumb-active,
.breadcrumb-section .breadcrumb-separator {
    opacity: 1;
    visibility: visible;
}

/* 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;
    }

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

    .breadcrumb-section[data-mobile-layout="horizontal"] .breadcrumb__prefix {
        flex: 0 0 auto;
        flex-shrink: 0;
        gap: var(--breadcrumb-trail-gap);
        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: var(--breadcrumb-trail-gap);
        overflow: visible;
    }

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

    .breadcrumb-section[data-mobile-layout="vertical"] .breadcrumb__prefix,
    .breadcrumb-section[data-mobile-layout="vertical"] .breadcrumb__label-marquee,
    .breadcrumb-section[data-mobile-layout="vertical"] .breadcrumb__label-track {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--breadcrumb-trail-gap);
        width: 100%;
    }

    .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, single-row flattening */
@media (min-width: 1024px) {
    .breadcrumb-section .breadcrumb-nav,
    .breadcrumb-section .breadcrumb__trail {
        flex-wrap: wrap;
        overflow: visible;
    }

    .breadcrumb-section .breadcrumb__prefix,
    .breadcrumb-section .breadcrumb__label-marquee,
    .breadcrumb-section .breadcrumb__label-track {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    .breadcrumb-section .breadcrumb__prefix {
        flex-wrap: wrap;
    }

    .breadcrumb-section .breadcrumb__label-marquee {
        min-width: max-content;
        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;
    }
}