/* 
 * Общие стили для page-header на всех страницах
 * Этот файл подключается в базовых шаблонах страниц, 
 * где требуется верхний заголовок с градиентным фоном
 */

/* Page header - базовый стиль */
.page-header {
    background: linear-gradient(to right, rgba(15, 76, 129, 0.9), rgba(95, 75, 139, 0.8)), url('/api/placeholder/1200/600') center/cover;
    color: white;
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
}

/* Варианты фоновых изображений для разных разделов */
.page-header.header-team {
    background: linear-gradient(to right, rgba(15, 76, 129, 0.9), rgba(95, 75, 139, 0.8)), url('/static/images/header-team.jpg') center/cover;
}

.page-header.header-gallery {
    background: linear-gradient(to right, rgba(15, 76, 129, 0.9), rgba(95, 75, 139, 0.8)), url('/static/images/header-gallery.jpg') center/cover;
}

.page-header.header-contact {
    background: linear-gradient(to right, rgba(15, 76, 129, 0.9), rgba(95, 75, 139, 0.8)), url('/static/images/header-contact.jpg') center/cover;
}

.page-header::after {
    content: "";
    position: absolute;
    bottom: -5vw;
    left: 0;
    width: 100%;
    height: 10vw;
    background-color: var(--light-bg);
    transform: rotate(-2deg);
}

.page-header-content {
    position: relative;
    z-index: 10;
}

/* Стили для хлебных крошек */
.breadcrumb {
    background-color: transparent;
    margin-bottom: 0;
    padding: 0;
}

.breadcrumb-item a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
}

.breadcrumb-item a:hover {
    color: white;
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: white;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.6);
    content: "/";
}

/* Адаптивность для мобильных устройств */
@media (max-width: 767px) {
    .page-header {
        padding: 80px 0 60px;
    }
    
    .page-header h1 {
        font-size: 2rem;
    }
}