/* ============================================
   МОБИЛЬНАЯ ВЕРСИЯ ДЛЯ ВСЕХ СТРАНИЦ (ФИНАЛЬНАЯ)
   ============================================ */

/* ПРИНУДИТЕЛЬНО для всех экранов меньше 768px */
@media only screen and (max-width: 768px) {
    
    /* === 1. Убираем горизонтальный скролл === */
    body, html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* === 2. Шапка: логотип СЛЕВА, меню СНИЗУ === */
    .nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    /* ЛОГОТИП — СЛЕВА И ПО ЦЕНТРУ ВЕРТИКАЛИ */
    .logo {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .logo a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        text-decoration: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .logo-img {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
        border-radius: 12px !important;
        display: block !important;
    }
    
    .logo-text {
        font-size: 1.3rem !important;
        letter-spacing: 1px !important;
        white-space: nowrap !important;
        display: inline-block !important;
        line-height: 1.2 !important;
    }
    
    /* === 3. МЕНЮ — КРУПНОЕ, С АВТОПЕРЕНОСОМ === */
    .nav-links {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 12px 24px !important;
        width: 100% !important;
        padding: 10px 0 5px 0 !important;
        border-top: 1px solid rgba(198, 165, 106, 0.2) !important;
        list-style: none !important;
        margin: 0 !important;
    }
    
    .nav-links li {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .nav-links a {
        font-size: 1rem !important;
        letter-spacing: 0.5px !important;
        padding: 6px 0 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        display: inline-block !important;
        font-weight: 500 !important;
        color: #EAE7E1 !important;
    }
    
    .nav-links a:hover,
    .nav-links a.active {
        color: #C6A56A !important;
    }
    
    /* === 4. ПЕРЕСТАНОВКА ФОТО НА ГЛАВНОЙ (me.jpg) === */
    /* Основной контейнер — колонкой */
    .about-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    /* Текст идёт первым */
    .about-text {
        order: 1 !important;
    }
    
    /* Фото me.jpg идёт вторым (после текста) */
    .about-image {
        order: 2 !important;
    }
    
    /* Вторая картинка (1.png) остаётся третьей */
    .secondary-image {
        order: 3 !important;
    }
    
    /* === 5. НОРМАЛЬНОЕ ФОРМАТИРОВАНИЕ ИЗОБРАЖЕНИЙ === */
    .about-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 20px !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
        border: 1px solid rgba(198, 165, 106, 0.2) !important;
        display: block !important;
    }
    
    .secondary-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 20px !important;
        border: 1px solid rgba(198, 165, 106, 0.2) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
        margin-top: 20px !important;
        display: block !important;
    }
    
    .image-caption {
        text-align: center !important;
        margin-top: 10px !important;
        font-size: 0.8rem !important;
        color: #C6A56A !important;
        letter-spacing: 1px !important;
    }
    
    /* === 6. ВСЕ ОСТАЛЬНЫЕ СТИЛИ === */
    
    /* Карточки постов */
    .posts-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .post-img {
        height: 200px !important;
        width: 100% !important;
        object-fit: cover !important;
    }
    
    /* Модальное окно */
    .modal-content {
        margin: 20px !important;
        padding: 20px !important;
    }
    
    .modal-header h2 {
        font-size: 1.3rem !important;
    }
    
    .modal-body p {
        font-size: 0.95rem !important;
    }
    
    .modal-images img {
        max-width: 100% !important;
        max-height: 300px !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Карточки на главной */
    .about-text h1 {
        font-size: 2rem !important;
    }
    
    .about-text p {
        font-size: 0.95rem !important;
    }
    
    /* Блок контактов на главной */
    .contact-card {
        grid-template-columns: 1fr !important;
        padding: 20px !important;
        gap: 15px !important;
    }
    
    .contact-item {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }
    
    .contact-divider {
        display: none !important;
    }
    
    /* Страница контактов */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .info-card {
        padding: 25px !important;
    }
    
    .info-card h2 {
        font-size: 1.5rem !important;
    }
    
    .contact-detail {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }
    
    .contact-detail i {
        width: auto !important;
        font-size: 1.5rem !important;
    }
    
    .map iframe {
        height: 250px !important;
        width: 100% !important;
    }
    
    .contact-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 20px !important;
        display: block !important;
    }
    
    /* Страница областей деятельности */
    .cards-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .card {
        padding: 25px !important;
    }
    
    .image-row {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .image-row img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 16px !important;
        border: 1px solid rgba(198,165,106,0.3) !important;
        display: block !important;
    }
    
    /* Футер */
    .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 25px !important;
    }
    
    .footer-brand p {
        max-width: 100% !important;
    }
    
    .footer-social {
        justify-content: center !important;
    }
    
    .footer-links ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
        padding: 0 !important;
        list-style: none !important;
    }
    
    .footer-links ul li {
        margin-bottom: 0 !important;
    }
    
    /* Админ-панель */
    .admin-container {
        padding: 20px !important;
        margin: 15px !important;
    }
    
    .login-container {
        padding: 20px !important;
        margin: 15px !important;
    }
    
    .header-buttons {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    
    .header-buttons button {
        font-size: 0.7rem !important;
        padding: 6px 12px !important;
    }
    
    .post-item {
        padding: 15px !important;
    }
    
    .post-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .post-actions button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }
    
    .toolbar-buttons {
        gap: 5px !important;
        flex-wrap: wrap !important;
    }
    
    .toolbar-btn {
        font-size: 0.65rem !important;
        padding: 4px 8px !important;
    }
    
    .title-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    .refresh-btn {
        margin-left: 0 !important;
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
    }
}

/* Для очень маленьких экранов (до 480px) */
@media only screen and (max-width: 480px) {
    .logo-text {
        font-size: 1rem !important;
    }
    
    .logo-img {
        width: 34px !important;
        height: 34px !important;
    }
    
    .nav-links a {
        font-size: 0.85rem !important;
        padding: 4px 0 !important;
    }
    
    .nav-links {
        gap: 8px 16px !important;
    }
    
    h1 {
        font-size: 1.8rem !important;
    }
    
    .about-text h1 {
        font-size: 1.6rem !important;
    }
    
    .highlight-box {
        padding: 12px 15px !important;
    }
    
    .modal-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    .modal-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    
    .share-btn {
        font-size: 0.7rem !important;
        padding: 6px 12px !important;
    }
}