/**
 * Dorset Realty - Breadcrumbs Styles
 * 
 * Based on design system
 * 
 * @package DorsetRealty
 */

/* ============================================
   Breadcrumbs Container
   
   Padding matches header container
   ============================================ */
.dr-breadcrumbs {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--spacing-lg) var(--container-padding-desktop);
}

@media (max-width: 768px) {
    .dr-breadcrumbs {
        padding: var(--spacing-lg) var(--container-padding-mobile);
    }
}

@media screen and (min-width: 1280px) {
    .dr-breadcrumbs {
        padding: var(--spacing-lg) 2.5vw;
    }
}

.dr-breadcrumbs-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--drpm-space-1);  /* 4px - design system spec */
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

/* ============================================
   Breadcrumb Items
   ============================================ */
.dr-breadcrumbs-item {
    display: flex;
    align-items: center;
}

/* Breadcrumb links */
.dr-breadcrumbs-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;  /* design system spec */
    padding: var(--drpm-space-1) var(--drpm-space-2);  /* 4px 8px */
    
    font-weight: var(--drpml-fw-semibold);  /* 600 */
    font-size: 0.875rem;  /* 14px - text-sm */
    line-height: 1.25rem;  /* 20px */
    color: var(--drpml-color-gray-500);  /* #717680 - design system */
    
    text-decoration: none;
    border-radius: var(--drpm-radius-md);  /* 6px */
    transition: all var(--drpml-duration-normal) var(--drpml-ease-standard);
}

.dr-breadcrumbs-link:hover {
    color: var(--drpml-color-gray-700);
    background-color: var(--drpml-color-gray-50);
}

/* Home link (только иконка) */
.dr-breadcrumbs-link.is-home {
    padding: var(--drpm-space-1);  /* 4px - квадратный для иконки */
    width: 28px;
}

/* Current page (not clickable) */
.dr-breadcrumbs-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: var(--drpm-space-1) var(--drpm-space-2);  /* 4px 8px */
    
    font-weight: var(--drpml-fw-semibold);  /* 600 */
    font-size: 0.875rem;  /* 14px */
    line-height: 1.25rem;  /* 20px */
    color: var(--drpml-color-gray-700);  /* #414651 - darker for current */
    
    background-color: var(--drpml-color-gray-50);  /* #FAFAFA - design system */
    border-radius: var(--drpm-radius-md);  /* 6px */
}

/* ============================================
   Separator (Slash Icon)
   ============================================ */
.dr-breadcrumbs-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ============================================
   Icons
   ============================================ */
.dr-breadcrumbs-icon-home {
    width: 20px;
    height: 20px;
    color: var(--drpml-color-gray-400);  /* #A4A7AE - design system */
    transition: color var(--drpml-duration-normal) var(--drpml-ease-standard);
    flex-shrink: 0;
}

.dr-breadcrumbs-link:hover .dr-breadcrumbs-icon-home {
    color: var(--drpml-color-gray-600);
}

.dr-breadcrumbs-icon-separator {
    width: 16px;
    height: 16px;
    color: var(--drpml-color-gray-400);  /* #A4A7AE - design system */
    flex-shrink: 0;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .dr-breadcrumbs-list {
        gap: var(--drpm-space-0_5);  /* 2px на мобилке */
    }
    
    .dr-breadcrumbs-link,
    .dr-breadcrumbs-current {
        font-size: 0.75rem;  /* 12px на мобилке */
        line-height: 1.125rem;  /* 18px */
        padding: var(--drpm-space-0_5) var(--drpm-space-1_5);  /* 2px 6px */
        height: 24px;
    }
    
    .dr-breadcrumbs-link.is-home {
        width: 24px;
        padding: var(--drpm-space-0_5);
    }
    
    .dr-breadcrumbs-icon-home {
        width: 16px;
        height: 16px;
    }
    
    .dr-breadcrumbs-icon-separator {
        width: 12px;
        height: 12px;
    }
}