/* ============================================
   ФАЙЛ: content.css
   ОПИСАНИЕ: Стили для основного контента страниц
   ============================================ */

/* ========== ОСНОВНОЙ КОНТЕНТ ========== */

/* Секция основного контента */
.main-content {
    padding: var(--spacing-xxl) 0;           /* Большие вертикальные отступы */
    min-height: 60vh;                         /* Минимальная высота 60% экрана */
}

/* Статья контента */
.content-article {
    line-height: var(--line-height-loose);    /* Свободная высота строки для читаемости */
    font-size: var(--font-size-lg);          /* Увеличенный размер шрифта */
    color: var(--text-color);                 /* Основной цвет текста */
    padding: var(--spacing-xl) 0;            /* Вертикальные отступы */
}

/* Параграфы в статье */
.content-article p {
    margin-bottom: var(--spacing-lg);        /* Отступ между параграфами */
    text-align: justify;                      /* Выравнивание по ширине */
}

/* Заголовки в статье */
.content-article h1,
.content-article h2,
.content-article h3,
.content-article h4,
.content-article h5,
.content-article h6 {
    margin-top: var(--spacing-xl);           /* Отступ сверху */
    margin-bottom: var(--spacing-md);        /* Отступ снизу */
    color: var(--dark-color);                 /* Темный цвет заголовков */
    font-weight: var(--font-weight-bold);    /* Жирный шрифт */
}

/* Изображения в статье */
.content-article img {
    max-width: 100%;                          /* Максимальная ширина */
    height: auto;                             /* Автоматическая высота */
    border-radius: var(--border-radius-md);   /* Среднее скругление */
    margin: var(--spacing-lg) 0;             /* Вертикальные отступы */
    box-shadow: var(--box-shadow);            /* Стандартная тень */
    display: block;                           /* Блочный элемент */
    margin-left: auto;                        /* Автоматический отступ слева */
    margin-right: auto;                       /* Автоматический отступ справа */
}

/* Списки в статье */
.content-article ul,
.content-article ol {
    margin-bottom: var(--spacing-lg);        /* Отступ снизу */
    padding-left: var(--spacing-xl);         /* Отступ слева */
}

/* Элементы списка в статье */
.content-article li {
    margin-bottom: var(--spacing-sm);        /* Отступ между элементами */
    line-height: var(--line-height-relaxed);  /* Расслабленная высота строки */
}

/* Ссылки в статье */
.content-article a {
    color: var(--primary-color);              /* Основной цвет ссылок */
    text-decoration: underline;               /* Подчеркивание */
    transition: var(--transition);           /* Плавный переход */
}

/* Состояние наведения на ссылку в статье */
.content-article a:hover {
    color: var(--secondary-color);            /* Вторичный цвет при наведении */
    text-decoration: none;                    /* Убираем подчеркивание */
}

/* ========== КОНТАКТНАЯ ИНФОРМАЦИЯ ========== */

/* Секция контактной информации */
.contact-info {
    padding: var(--spacing-xl) 0;            /* Вертикальные отступы */
}

.contact-item {
    padding: var(--spacing-lg);             /* Внутренние отступы */
    transition: var(--transition);          /* Плавный переход */
    text-align: center;                     /* Выравнивание по центру */
    border-radius: var(--border-radius-md); /* Среднее скругление */
    background: var(--bg-card);             /* Цвет фона */
    border: var(--border-width-thin) solid var(--border-color); /* Тонкая рамка */
    height: 100%;                           /* Высота 100% */
    display: flex;                          /* Flexbox для выравнивания */
    flex-direction: column;                 /* Вертикальное направление */
    align-items: center;                      /* Горизонтальное выравнивание */
    justify-content: center;                  /* Вертикальное выравнивание */
}

/* Состояние наведения на элемент контакта */
.contact-item:hover {
    transform: translateY(-5px);            /* Смещение вверх */
    background: #e9ecef;                      /* Светло-серый фон */
    box-shadow: var(--box-shadow-md);        /* Средняя тень */
    border-color: var(--primary-color);       /* Граница основного цвета */
}

/* Заголовок в элементе контакта */
.contact-item h5 {
    color: var(--dark-color);                 /* Темный цвет текста */
    margin-bottom: var(--spacing-md);        /* Отступ снизу */
    font-weight: var(--font-weight-semibold); /* Полужирный шрифт */
    font-size: var(--font-size-lg);          /* Увеличенный размер */
}

/* Параграф в элементе контакта */
.contact-item p {
    color: var(--text-muted);                 /* Приглушенный цвет текста */
    margin-bottom: var(--spacing-sm);        /* Отступ снизу */
    font-size: var(--font-size-base);        /* Базовый размер шрифта */
}

/* ========== ХЛЕБНЫЕ КРОШКИ ========== */

/* Контейнер хлебных крошек */
.breadcrumb {
    background-color: transparent;           /* Прозрачный фон */
    padding: var(--spacing-md) 0;           /* Вертикальные отступы */
    margin-bottom: var(--spacing-lg);        /* Отступ снизу */
}

/* Элемент хлебных крошек */
.breadcrumb-item {
    font-size: var(--font-size-sm);          /* Маленький размер шрифта */
}

/* Ссылка в хлебных крошках */
.breadcrumb-item a {
    color: var(--text-muted);                 /* Приглушенный цвет ссылки */
    text-decoration: none;                    /* Убираем подчеркивание */
    transition: var(--transition);           /* Плавный переход */
}

/* Состояние наведения на ссылку в хлебных крошках */
.breadcrumb-item a:hover {
    color: var(--primary-color);              /* Основной цвет при наведении */
    text-decoration: underline;               /* Подчеркивание при наведении */
}

/* Активный элемент хлебных крошек */
.breadcrumb-item.active {
    color: #495057;                          /* Темно-серый цвет */
    font-weight: var(--font-weight-medium);  /* Средний вес шрифта */
}

/* Разделитель в хлебных крошках */
.breadcrumb-item + .breadcrumb-item::before {
    content: "/";                             /* Символ разделителя */
    color: var(--text-muted);                 /* Приглушенный цвет */
    padding: 0 var(--spacing-sm);           /* Горизонтальные отступы */
}

/* ========== АДАПТИВНЫЕ СТИЛИ ========== */

/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
    /* Основной контент на мобильных */
    .main-content {
        padding: var(--spacing-lg) 0;        /* Уменьшенные отступы */
    }
    
    /* Статья контента на мобильных */
    .content-article {
        font-size: var(--font-size-base);     /* Базовый размер шрифта */
        padding: var(--spacing-md) 0;        /* Уменьшенные отступы */
    }
    
    /* Заголовок секции на мобильных */
    .content-section h2 {
        font-size: 1.75rem;                   /* Уменьшенный размер */
        text-align: center;                   /* Центрирование */
        margin-bottom: var(--spacing-lg);     /* Уменьшенный отступ */
    }
    
    /* Тело карточки преимущества на мобильных */
    .content-section .card-body {
        padding: var(--spacing-lg);           /* Уменьшенные отступы */
    }
    
    /* Иконка в карточке на мобильных */
    .content-section .card-body i {
        font-size: 2.5rem;                    /* Уменьшенный размер иконки */
    }
}