/* ==========================================================================
   Мобильная адаптация (max-width: 800px)
   ========================================================================== */

@media screen and (max-width: 800px) {

    /* 1. Центрируем весь контент и обеспечиваем 100% ширину */
    .site, .main-content-layout, .video-container-left, .gallery-container-right, .video-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important; 
        box-sizing: border-box;
        padding: 0; 
    }
    .site {
        padding: 0 10px; /* Отступы по краям экрана */
    }

    /* 2. Делаем макет вертикальным и добавляем отступ между контейнерами портфолио */
    .main-content-layout {
        flex-direction: column; 
        align-items: center; 
        position: relative; 
        padding-bottom: 0 !important; /* Убираем лишний отступ внутри контейнера */
        margin-bottom: 40px !important; /* Отступ между разными блоками портфолио */
    }
    
    /* 3. Галерея миниатюр должна занимать всю ширину */
    .image-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
        width: 100%;
        margin-top: 20px; 
    }
    
    /* 4. Убираем конфликтующие стили с колонки галереи и видео */
    .gallery-container-right, .video-container-left {
        border: none !important; 
        padding: 0 !important;   
    }
    
    /* 5. Центрирование текста "C9 production" */
    .contact-info {
        margin: 20px auto 0 auto; 
        width: 100%;
        text-align: center;
    }
    .contact-info a.email {
        word-break: break-word;   
        display: block;           
    }
    
    /* 6. Адаптация меню и кнопки закрытия модалки */
    .main-navigation ul{ display: none; }
    .menu-toggle, .main-navigation.toggled ul{ display: block; }
    .close-button { top: -40px; right: 10px; }
	
	/* 7. Принудительно скрываем вертикальную линию в мобильной версии */
    .vertical-separator-guaranteed {
        display: none !important;
    }
/*=================================================================================================================	
	 /* --- 1. Расположение логотипа и кнопки меню на одной линии --- */
    .site-header {
        display: flex !important;
        justify-content: space-between !important; 
        align-items: center !important;
        padding: 10px 10px !important; 
    }
    .site-branding {
        text-align: left !important;
        max-width: 60% !important; 
    }
    .menu-toggle {
        display: block !important; 
        background-color: transparent !important;
        color: #fff !important; 
        border: none !important;
        cursor: pointer !important;
        font-size: 16px !important;
    }
    /* --- 2. Стилизация самого раскрывающегося меню --- */
    .main-navigation ul {
        display: none !important; /* Скрываем по умолчанию */
        position: absolute !important;
        top: 60px !important; /* Позиция под шапкой */
        left: 0 !important; /* ПЕРЕОПРЕДЕЛЯЕМ desktop left:-999em */
        width: 100% !important;
        background-color: #2a2a2a !important; /* Темный фон меню */
        box-sizing: border-box !important;
        padding: 0 !important; 
        z-index: 100 !important;
        flex-direction: column !important; 
        list-style: none !important;
        margin: 0 !important;
		
		/* Добавляем обводку и скругление углов для всего контейнера меню: */
    border: 1px solid #555 !important; /* Серая обводка толщиной 1px */
    border-radius: 0 0 5px 5px !important; /* Скругление только нижних углов */
		
		/* Добавляем тень к меню: */
    /* Синтаксис: смещение по X, смещение по Y, размытие, цвет */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.4) !important; 
		
    }
    /* Когда меню активно (класс toggled), оно отображается */
    .main-navigation.toggled ul {
        display: flex !important;
    }
    /* --- 3. Центрирование и стилизация кнопок по ширине экрана --- */
    .main-navigation li {
        width: 100% !important;
        text-align: center !important; /* Центрируем текст кнопок */
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; 
    }
/* --- 4. Логика для выпадающих списков (подменю) --- */
    /* ГАРАНТИРОВАННО СКРЫВАЕМ подменю по умолчанию на мобильных */
    .main-navigation ul ul {
        display: none !important; 
        position: static !important; /* Делаем подменю частью потока, а не абсолютным */
        left: auto !important; /* ПЕРЕОПРЕДЕЛЯЕМ desktop left:-999em */
        background-color: transparent !important; 
        padding: 0 10px !important; 
    }
    /* Стилизация вложенных кнопок (как на вашем скрине) */
    .main-navigation ul ul li {
        margin-top: 5px !important;
        border: 1px solid #000 !important; 
        background-color: #000 !important; 
        display: block !important; /* Убеждаемся, что они в столбик */
    }
    /* При активном классе 'active' (добавляется JS) показываем подменю */
    .main-navigation li.active > ul {
        display: block !important; 
    }
    /* Убираем стрелки, если они не нужны */
    .menu-item-has-children > a:after {
        content: "" !important; 
    }
	/* Центрирование текста основных пунктов меню (О нас, Направления, FAQ) */
    .main-navigation li {
        text-align: center !important;
    }
    /* Центрирование текста вложенных пунктов меню (Ретушь, Дизайн, Что такое...) */
    .main-navigation ul ul li {
        text-align: center !important;
    }
    /* Если у вас есть заголовки разделов без ссылок (О НАС, НУЖНО ЗНАТЬ) */
    .main-navigation .menu-item-type-custom, 
    .main-navigation .menu-item a {
        text-align: center !important;
    }
/*=================================================================================================================	*/
	
	
	/* НОВЫЕ СТИЛИ ДЛЯ ГЛАВНОЙ СТРАНИЦЫ: */

    /* 1. Родительский контейнер: Делаем вертикальный стек */
    .slider-wrap {
        display: flex !important;
        flex-direction: column !important; /* Элементы располагаются вертикально */
        width: 100% !important;
        gap: 20px; /* Добавляет отступ между карточками */
    }

    /* 2. Отдельные карточки: Делаем их пропорциональными и нужной высоты */
.item {
    width: 95% !important;
    height: 400px !important; /* Достаточная высота для читаемости */
    
    /* Добавляем Flexbox для центрирования и растягивания текста: */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background-size: cover !important; /* Сохраняет пропорции изображения */
    background-position: center !important;
    box-sizing: border-box !important;
}

    /* 3. Центрирование текста заголовка на главной */
    .home-question h2 {
        text-align: center !important;
        padding: 0 10px !important;
		 font-size: 18px !important; /* <-- Установите нужный размер шрифта, например, 18px */
    }

    /* 4.Определяет селектор для псевдо-элемента ::before внутри элемента */
    #slider-container a.item::before {
        content: ""; /* — обязательное свойство для псевдо-элементов, в данном случае слой пустой (не содержит текста) */
        position: absolute; /* позиционирует слой абсолютно внутри родительского элемента, который должен иметь position: relative; */
        top: 0; bottom: 0; left: 0; right: 0;/* растягивает слой на всю площадь родительской карточки. */
        background-color: rgba(0, 0, 0, 0.6); /* устанавливает полупрозрачный черный цвет для слоя (60% непрозрачности) */
        z-index: 1; /* устанавливает полупрозрачный черный цвет для слоя (60% непрозрачности) */
        display: block; /* Убеждаемся, что слой виден */
    }

    /* 5. Делаем селекторы текста ОЧЕНЬ специфичными, чтобы не затрагивать другие h2 */
    /* Эти стили применяются ТОЛЬКО к тексту внутри карточек слайдера */
    #slider-container a.item .card-title, 
    #slider-container a.item h2 {
        z-index: 2; /* Текст поверх слоя затемнения */
        position: relative; 
        
        /* Возвращаем стили текста */
        color: #fff;       
        padding: 10px;     
        margin: 0;         
        
        /* Убираем черный фон у самого текста, так как затемнение делает фон темным */
        background-color: transparent !important; 
        
        /* Убираем растягивание текста на 100% ширины/высоты, 
           чтобы он не перекрывал другие элементы */
        width: auto;
        height: auto;
    }

    /* Убираем эффект приближения на мобильных */
    #slider-container a.item:hover {
         background-size: 100%;
    }
/*=================================================================================================================	*/

	
/*=====================================Страница Ретушь фотографий=====================================================	*/
	
	   /* Добавляем новый пункт или просто вставляем этот код внутри блока media query: */
    .text-block-h2-wrapper h2 {
        font-size: 18px;
        /* Рекомендую добавить центрирование, если оно еще не задано */
        text-align: center; 
    }
		/* Добавляем стиль для заголовка на слайдере */
    .slider-title-wrapper h1 {
        font-size: 30px; /* Установите желаемый размер, например, 24px */
        /* Возможно, потребуется также уменьшить отступы для лучшего расположения */
        padding: 10px; 
    }
/*=================================================================================================================	*/
	
/*=====================================Страница Контакты=====================================================	*/	
	/* Убедитесь, что контейнер кнопок использует всю доступную ширину */
    #main-contact-info {
        width: 100%;
        max-width: 100%;
        display: block; 
    }

    /* Адаптация для мобильных устройств (менее 800px) */
    .contact-buttons {
        flex-direction: column; 
        align-items: center; /* Центрирует элементы списка */
    }

    .contact-buttons li {
        margin-bottom: 15px; 
    }
    
    .contact-buttons li:last-child {
        margin-bottom: 0;
    }
    
    .contact-btn {
        /* Удаляем width: 80% !important; и используем фиксированный размер 180px */
        width: 180px; /* Используем тот же фиксированный размер, что и на десктопе */
        margin: 0 auto;        
    }
/*=====================================Сервис Страница=====================================================	*/	
/* Уменьшаем размер шрифта для сервисной страницы на мобильных */
.service-page-container {
    font-size: 1em; /* Или 16px, если вам нужен конкретный размер */
}	
/*===================================== Конец. Сервис Страница=====================================================	*/	
	
/* ========================= Страница Обтравка. ========================================================================== */
/* Мобильная адаптация: на маленьких экранах изображения будут в столбец */
.gallery-row {
    flex-direction: column; /* На мобильных картинки станут вертикальными */
    gap: 15px;
}
.gallery-row img {
    width: 100%; /* Займут всю ширину экрана */
/* Уменьшаем размер шрифта для всего текста страницы на мобильных устройствах */
.entry-content p, 
.entry-content ul, 
.entry-content li,
.content-block p {
    font-size: 1em; /* Стандартный размер шрифта (например, 16px) */
}	
}	
/* ========================= Конец. Страница Обтравка. ========================================================================== */
}