<!-- Breadcrumb Navigation -->
<nav class="breadcrumb border-b border-slate-200 py-2 px-3 md:py-4 md:px-6 lg:px-8" aria-label="Breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
  <ol class="flex flex-wrap items-center space-x-1 md:space-x-2 text-xs sm:text-sm md:text-base leading-relaxed">
    
    <!-- Home -->
    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="{{ "/" | relLangURL }}" itemprop="item" title="Home" class="text-slate-600 hover:text-blue-600 transition-colors flex items-center">
        <i class="fas fa-home text-[10px] sm:text-xs md:text-sm mr-1"></i>
        <span itemprop="name" class="hidden sm:inline">Home</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    
    <!-- Category -->
    {{ if or .Params.categories .Section }}
      {{ $category := "" }}
      {{ $categorySlug := "" }}
      {{ $categoryUrl := "" }}
      
      {{ if .Params.categories }}
        {{ $category = index .Params.categories 0 }}
        {{ $categorySlug = anchorize $category }}
        {{ $categoryUrl = printf "/categories/%s" $categorySlug }}
      {{ else if .Section }}
        {{ $category = humanize .Section }}
        {{ $categorySlug = .Section }}
        {{ $categoryUrl = printf "/%s" .Section }}
      {{ end }}
      
      {{ if $category }}
        <li class="breadcrumb-divider text-slate-400 px-0.5">/</li>
        <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
          <a href="{{ $categoryUrl | relLangURL }}" itemprop="item" title="{{ $category }}" class="text-slate-600 hover:text-blue-600 transition-colors line-clamp-1 max-w-[120px] sm:max-w-none">
            <span itemprop="name">{{ $category }}</span>
          </a>
          <meta itemprop="position" content="2" />
        </li>
      {{ end }}
    {{ end }}
    
    <!-- Current Page -->
    {{ if .Title }}
      <li class="breadcrumb-divider text-slate-400 px-0.5">/</li>
      <li class="breadcrumb-item active" aria-current="page" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <span itemprop="name" class="text-blue-600 font-medium line-clamp-1 max-w-[100px] sm:max-w-[200px] md:max-w-none">{{ .Title }}</span>
        <meta itemprop="position" content="{{ if or .Params.categories .Section }}3{{ else }}2{{ end }}" />
      </li>
    {{ end }}
    
  </ol>
</nav>

<!-- Fallback for pages without title -->
{{ if not .Title }}
  <nav class="breadcrumb border-t border-b border-slate-200 py-2 px-3 md:py-4 md:px-6 lg:px-8 my-2 md:my-4" aria-label="Breadcrumb">
    <ol class="flex flex-wrap items-center space-x-1 md:space-x-2 text-xs sm:text-sm md:text-base leading-relaxed">
      <li class="breadcrumb-item">
        <a href="{{ "/" | relLangURL }}" class="text-slate-600 hover:text-blue-600 transition-colors flex items-center">
          <i class="fas fa-home text-[10px] sm:text-xs md:text-sm mr-1"></i>
          <span>Home</span>
        </a>
      </li>
    </ol>
  </nav>
{{ end }}
