/* Project Breadcrumbs */
.breadcrumb { display:flex; align-items:center; gap: var(--spacing-sm); font-size: var(--font-size-md); }
.breadcrumb-link { color: var(--color-text-light); text-decoration:none; transition: color var(--transition-fast); }
.breadcrumb-link:hover { color: var(--color-primary); }
.breadcrumb-separator { color: var(--color-text-muted); }
.breadcrumb-current { color: var(--color-primary); font-weight: var(--font-weight-bold); }


/* Breadcrumb */
.breadcrumb-section {
    background-color: var(--color-background-white);
    padding: var(--spacing-md) 0; /* normalized vertical padding */
    border-bottom: 1px solid var(--color-border);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-md);
}

.breadcrumb-link {
    color: var(--color-text-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
    color: var(--color-primary);
}

.breadcrumb-separator {
    color: var(--color-text-muted);
}

.breadcrumb-current {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

/* Ensure consistent gap after breadcrumb on pages using a hero section */
.breadcrumb-section + .project-hero { margin-top: var(--spacing-lg); }

/* Normalize when used via parent Shortcode Manager
   Markup: <section id="shortcode-plugin_project_breadcrumbs" class="shortcode-section section"><div class="shortcode-container"> ... */
#shortcode-plugin_project_breadcrumbs.shortcode-section {
    background-color: var(--color-background-white);
    padding: var(--spacing-md) 0; /* match .breadcrumb-section */
    border-bottom: 1px solid var(--color-border);
}
#shortcode-plugin_project_breadcrumbs .shortcode-container {
    /* Align to theme container width; fallback to parent var if child var not present */
    max-width: var(--container-xl, var(--lubinik-container-width));
    margin: 0 auto;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

/* Mobile breadcrumb: compact text, but same band height and border as desktop */
@media (max-width: 768px) {
    .breadcrumb-section { padding: var(--spacing-md) 0; border-bottom: 1px solid var(--color-border); }
    .breadcrumb { font-size: var(--font-size-sm); gap: var(--spacing-xs); white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .breadcrumb-section + .project-hero { margin-top: var(--spacing-md); }
    /* Mobile: same band height and container padding when rendered by shortcode manager */
    #shortcode-plugin_project_breadcrumbs.shortcode-section { padding: var(--spacing-md) 0; border-bottom: 1px solid var(--color-border); }
    #shortcode-plugin_project_breadcrumbs .shortcode-container { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
}