/* 
   Дополнительные стили для мобильной версии сайта
   Путь: /assets/css/mobile.css
*/

/* Общие стили для мобильных устройств */
@media (max-width: 768px) {
    /* Улучшение шрифтов и их читаемости на мобильных */
    body {
        font-size: 16px;
        line-height: 1.6;
    }
    
    h1, .h1 {
        font-size: 1.8rem !important;
        line-height: 1.2;
    }
    
    h2, .h2 {
        font-size: 1.5rem !important;
        line-height: 1.3;
    }
    
    h3, .h3 {
        font-size: 1.3rem !important;
    }
    
    /* Улучшение отступов и полей для лучшей читаемости */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Увеличение размера кликабельных элементов */
    button, 
    .button, 
    a.button, 
    input[type="button"], 
    input[type="submit"] {
        min-height: 44px;
        padding: 10px 20px;
        font-size: 16px;
    }
    
    /* Улучшение отображения навигации */
    .main-navigation {
        width: 100%;
    }
    
    /* Улучшение отображения карточек товаров и услуг */
    .service-card, 
    .product-card {
        margin-bottom: 20px;
        padding: 15px;
    }
    
    /* Увеличение размера шрифта в формах */
    input, 
    textarea, 
    select {
        font-size: 16px !important; /* Предотвращает автоматическое масштабирование на iOS */
        padding: 12px !important;
    }
    
    /* Настройка изображений в мобильном режиме */
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Улучшение отображения колонок и таблиц */
    .grid-col-2, 
    .grid-col-3, 
    .grid-col-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* Улучшение отображения таблиц */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Специфические стили для шапки сайта */
    .site-header {
        padding: 10px 0;
    }
    
    /* Модальные окна для мобильных */
    .modal-content {
        width: 95% !important;
        padding: 15px !important;
    }
    
    /* Улучшение отображения слайдеров */
    .slider {
        height: auto !important;
    }
    
    .slider-item {
        height: 300px !important;
    }
    
    /* Улучшение отображения текста поверх изображений */
    .overlay-text {
        padding: 15px !important;
    }
    
    /* Улучшение формы поиска */
    .search-form {
        width: 100%;
    }
    
    /* Улучшение отображения кнопок социальных сетей */
    .social-icons {
        justify-content: center;
        margin-top: 15px;
    }
    
    .social-icons a {
        margin: 0 8px;
    }
    
    /* Стили для хлебных крошек */
    .breadcrumbs {
        font-size: 14px;
        padding: 8px 0;
        margin-bottom: 15px;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Стили для футера */
    footer {
        text-align: center;
    }
    
    footer .widget {
        margin-bottom: 20px;
    }
}

/* Специфические стили для очень маленьких экранов */
@media (max-width: 480px) {
    h1, .h1 {
        font-size: 1.6rem !important;
    }
    
    h2, .h2 {
        font-size: 1.4rem !important;
    }
    
    /* Еще более компактное отображение навигации */
    .site-navigation ul li {
        margin: 0 5px;
    }
    
    /* Улучшение отображения логотипа */
    .site-logo img {
        max-height: 40px;
    }
    
    /* Улучшение отображения контактной информации */
    .contact-info {
        flex-direction: column;
    }
    
    .contact-item {
        margin-bottom: 10px;
    }
    
    /* Кнопки сделать шире для удобного касания */
    .button, a.button {
        width: 100%;
        text-align: center;
    }
    
    /* Улучшение отображения галереи */
    .gallery-item {
        width: 100% !important;
    }
    
    /* Модальное окно на мобильных устройствах */
    #modal .bg-white {
        margin: 0.5rem;
        max-height: 95vh;
        border-radius: 0.5rem;
    }
    
    #modal .p-6 {
        padding: 1rem;
    }
    
    /* Формы на мобильных */
    #contactForm input,
    #contactForm select,
    #contactForm textarea {
        font-size: 16px; /* Предотвращает зум на iOS */
        min-height: 44px;
    }
    
    #contactForm button[type="submit"] {
        min-height: 48px;
        font-size: 16px;
        font-weight: 600;
    }
    
    /* Улучшение отображения заголовков модального окна */
    #modal h3 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    /* Кнопка закрытия модального окна */
    #closeModal {
        top: 0.75rem;
        right: 0.75rem;
        padding: 0.25rem;
        min-width: 32px;
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}