/* Мобильные стили */
@media screen and (max-width: 768px) {
    /* Общие стили */
    .container {
        padding: 0 15px;
    }
    
    /* Убираем только логотип музея */
    .logo-img {
        display: none !important;
    }
    
    .logo-text {
        max-width: 200px;
    }
    
    .logo-text h1 {
        font-size: 1.2rem !important;
        line-height: 1.3;
        margin-bottom: 3px !important;
    }
    
    .logo-text p {
        font-size: 0.8rem !important;
        line-height: 1.2;
    }
    
    /* Шапка */
    .header-top {
        padding: 10px 0;
    }
    
    .header-contacts {
        display: none;
    }
    
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 5px;
        z-index: 1002;
    }
    
    /* Навигация - скрыта по умолчанию */
    .nav {
        display: none;
    }
    
    /* Активированное мобильное меню - темная тема */
    .nav.active {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        z-index: 1001;
        padding: 80px 20px 30px;
        overflow-y: auto;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
    }
    
    .nav.active .nav-list {
        flex: 0 0 auto;
        flex-direction: column;
        gap: 0;
        margin-bottom: 20px;
        width: 100%;
    }
    
    .nav.active .nav-list li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .nav.active .nav-list li:last-child {
        border-bottom: none;
    }
    
    .nav.active .nav-list a {
        display: flex;
        padding: 18px 15px;
        justify-content: flex-start;
        align-items: center;
        font-size: 1.1rem;
        color: white;
        gap: 15px;
        transition: all 0.3s ease;
        border-radius: 8px;
        margin: 5px 0;
    }
    
    .nav.active .nav-list a:hover {
        background: rgba(255,255,255,0.1);
        transform: translateX(5px);
    }
    
    .nav.active .nav-list a.active {
        background: rgba(76, 117, 163, 0.2);
        border-left: 4px solid #4C75A3;
        padding-left: 11px;
    }
    
    /* Футер в мобильном меню */
    .nav.active .mobile-menu-footer {
        display: block;
        background: rgba(255,255,255,0.05);
        border-radius: 12px;
        padding: 20px;
        margin-top: auto;
        animation: slideIn 0.5s ease-out;
        border: 1px solid rgba(255,255,255,0.1);
    }
    
    .mobile-menu-footer h3 {
        font-size: 1.1rem;
        margin-bottom: 15px;
        color: white;
        font-family: 'PT Serif', serif;
        text-align: center;
    }
    
    .mobile-menu-footer .contact-info {
        margin-bottom: 15px;
    }
    
    .mobile-menu-footer p {
        font-size: 0.9rem;
        color: rgba(255,255,255,0.8);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        line-height: 1.4;
    }
    
    .mobile-menu-footer p i {
        color: #4C75A3;
        min-width: 20px;
        text-align: center;
    }
    
    .mobile-menu-footer .vk-button {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        margin-top: 10px;
        background: #4C75A3;
        border: 2px solid transparent;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(76, 117, 163, 0.2);
        min-height: 48px;
        display: flex !important;
        align-items: center !important;
    }
    
    .mobile-menu-footer .vk-button i {
        margin-right: 8px !important;
        font-size: 1.2em !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mobile-menu-footer .vk-button:hover {
        background: #3a5a80;
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(76, 117, 163, 0.3);
        border-color: rgba(255, 255, 255, 0.2);
    }
    
    .mobile-menu-footer .vk-button:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(76, 117, 163, 0.2);
    }
    
    .mobile-menu-footer .vk-button i {
        transition: transform 0.3s ease;
        font-size: 1.2em;
    }
    
    .mobile-menu-footer .vk-button:hover i {
        transform: scale(1.2);
    }
    
    /* Герой секция - ИСКЛЮЧЕНИЕ: без отступов */
    .hero {
        height: 400px;
    }
    
    .hero-slider {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .slide-content {
        padding: 25px 20px;
    }
    
    .slide-content h2 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }
    
    .slide-content p {
        font-size: 1rem;
        margin-bottom: 15px;
    }
    
    .slider-controls {
        bottom: 15px;
        right: 15px;
    }
    
    .slider-controls button {
        width: 35px;
        height: 35px;
    }
    
    /* Основной контент */
    .main-content {
        padding: 30px 25px !important; /* Отступы 25px по бокам */
    }
    
    .page-title {
        font-size: 1.8rem;
    }
    
    .page-subtitle {
        font-size: 1rem;
    }
    
    /* О музее на главной */
    .about-preview {
        padding: 0 25px !important; /* Отступы 25px по бокам */
    }
    
    .about-preview-content {
        flex-direction: column;
        gap: 25px;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    /* Экспозиции на главной */
    .exhibitions-preview {
        padding: 0 25px !important; /* Отступы 25px по бокам */
    }
    
    /* Сетки */
    .exhibitions-grid:not(.exhibitions-preview .exhibitions-grid),
    .mission-cards,
    .halls-grid,
    .additional-grid,
    .info-cards,
    .contact-details-grid,
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .exhibitions-preview .exhibitions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .exhibition-preview {
        margin-bottom: 0;
    }
    
    .exhibition-preview img {
        height: 150px;
    }
    
    .exhibition-preview h3 {
        font-size: 1rem;
        padding: 12px;
    }
    
    .exhibition-preview p {
        font-size: 0.85rem;
        padding: 0 12px 12px;
    }
    
    /* Страница О музее */
    .about-section {
        flex-direction: column;
        gap: 25px;
        margin: 30px 0;
    }
    
    .about-text h2,
    .mission-section h2,
    .halls-section h2,
    .contact-info-section h2 {
        font-size: 1.5rem;
        margin-bottom: 25px;
    }
    
    .mission-card,
    .additional-card,
    .contact-detail {
        padding: 20px;
    }
    
    .hall-card {
        flex-direction: column;
    }
    
    .hall-card img {
        width: 100%;
        height: 200px;
    }
    
    /* Кнопка ВК в контактных деталях */
    .contact-detail {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .contact-detail i {
        align-self: flex-start;
        margin-top: 0;
    }
    
    .contact-detail .vk-button {
        width: 100%;
        margin-top: 15px;
        padding: 14px 20px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .contact-detail .vk-button i {
        display: inline-block !important;
        margin-right: 8px !important;
        font-size: 1.2em !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Контактная информация на странице экспозиций */
    .contact-details p {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .contact-details .vk-button {
        width: 100%;
        margin: 10px 0;
        padding: 14px 20px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .contact-details .vk-button i {
        display: inline-block !important;
        margin-right: 8px !important;
        font-size: 1.2em !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Страница Экспозиции */
    .exhibition-card {
        flex-direction: column;
    }
    
    .exhibition-image {
        width: 100% !important;
        height: 200px !important;
    }
    
    .exhibition-content {
        padding: 20px;
    }
    
    .exhibition-content h3 {
        font-size: 1.2rem;
    }
    
    /* Кнопка ВК */
    .vk-button {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        margin: 10px 0;
        min-height: 48px;
        display: flex !important;
        align-items: center !important;
    }
    
    .vk-button i.fab.fa-vk {
        display: inline-block !important;
        margin-right: 8px !important;
        font-size: 1.2em !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Подвал */
    .footer {
        padding: 30px 25px 15px !important; /* Отступы 25px по бокам */
    }
    
    .footer-col {
        text-align: center;
    }
    
    .footer-col p {
        justify-content: center;
    }
    
    .footer-links {
        text-align: center;
    }
    
    .footer-bottom {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    /* Кнопки и ссылки */
    .btn {
        padding: 10px 25px;
        font-size: 0.95rem;
    }
    
    .section-link {
        font-size: 0.95rem;
    }
    
    /* ДОБАВЛЕННЫЕ СТИЛИ: отступы 25px для всего контента */
    .about-content,
    .all-exhibitions,
    .museum-info,
    .contact-section,
    .video-section,
    .mission-section,
    .halls-section,
    .contact-info-section,
    .about-preview,
    .exhibitions-preview {
        padding: 0 25px !important;
    }
    
    /* Стили для заголовков страниц и секций */
    .page-header,
    .section-header {
        text-align: center !important;
    }
    
    .page-title,
    .page-subtitle,
    .section-title {
        text-align: center !important;
        width: 100%;
    }
    
    .page-subtitle {
        margin-top: 10px;
        margin-bottom: 20px;
    }
    
    /* Конкретно для видео секции */
    .video-section .section-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 20px !important;
    }
    
    .video-section .section-title {
        order: 1 !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }
    
    .video-section .page-subtitle {
        order: 2 !important;
        text-align: center !important;
        font-size: 1rem !important;
    }
    
    /* ВИДЕО КОНТЕЙНЕР - ФИКСЫ ДЛЯ МОБИЛЬНЫХ */
    .video-container {
        height: 56.25vw !important; /* 16:9 соотношение */
        max-height: 60vh !important;
        padding-bottom: 0 !important;
    }
    
    .video-container video {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
    
    .video-controls {
        padding: 12px 15px !important;
        opacity: 1 !important; /* Всегда показываем контролы на мобильных */
        background: linear-gradient(transparent, rgba(0,0,0,0.7)) !important;
    }
    
    .video-controls button {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }
    
    .video-progress {
        height: 5px !important;
        margin: 0 8px !important;
    }
    
    .video-time {
        font-size: 11px !important;
        min-width: 45px !important;
    }
    
    /* ФИКС ДЛЯ ПОЛНОЭКРАННОГО РЕЖИМА */
    .video-container:fullscreen,
    .video-container:-webkit-full-screen,
    .video-container:-moz-full-screen {
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        background: #000 !important;
    }
    
    .video-container:fullscreen video,
    .video-container:-webkit-full-screen video,
    .video-container:-moz-full-screen video {
        object-fit: contain !important;
        background: #000 !important;
    }
    
    .video-container:fullscreen .video-controls,
    .video-container:-webkit-full-screen .video-controls,
    .video-container:-moz-full-screen .video-controls {
        padding: 15px 20px !important;
        background: linear-gradient(transparent, rgba(0,0,0,0.9)) !important;
        opacity: 1 !important;
    }
    
    .section-title {
        font-size: 1.5rem !important;
        text-align: center !important;
    }
    
    .page-subtitle {
        text-align: center !important;
        font-size: 1rem !important;
    }
}

/* Для очень маленьких экранов */
@media screen and (max-width: 480px) {
    .exhibitions-preview .exhibitions-grid {
        grid-template-columns: 1fr;
    }
    
    .nav.active {
        padding: 70px 15px 20px;
    }
    
    .nav.active .nav-list a {
        padding: 16px 12px;
        font-size: 1rem;
    }
    
    .mobile-menu-footer {
        padding: 15px;
    }
    
    .mobile-menu-footer h3 {
        font-size: 1rem;
    }
    
    .mobile-menu-footer p {
        font-size: 0.85rem;
    }
    
    .vk-button {
        padding: 12px 16px;
        font-size: 0.95rem;
    }
    
    /* Видео на очень маленьких экранах */
    .video-container {
        max-height: 50vh !important;
    }
    
    .video-description h3 {
        font-size: 1.2rem !important;
    }
    
    .video-controls {
        gap: 6px !important;
        padding: 10px 12px !important;
    }
    
    .video-controls button {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    
    .video-time {
        font-size: 10px !important;
        min-width: 40px !important;
    }
    
    .video-progress {
        margin: 0 5px !important;
    }
}

/* Видео для мобильных устройств - ДОПОЛНИТЕЛЬНЫЕ ФИКСЫ */
@media screen and (max-width: 768px) {
    .video-section {
        margin: 30px 0 !important;
        padding: 0 25px !important; /* Отступы 25px по бокам */
    }
    
    .video-container {
        margin-bottom: 20px !important;
    }
    
    .video-description {
        padding: 20px !important;
    }
    
    .video-info-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .video-controls {
        padding: 15px !important;
        opacity: 1 !important; /* Всегда показываем контролы на мобильных */
    }
    
    .video-controls button {
        width: 35px !important;
        height: 35px !important;
    }
    
    .section-title {
        font-size: 1.5rem !important;
        text-align: center !important;
    }
    
    .page-subtitle {
        text-align: center !important;
        font-size: 1rem !important;
    }
}

/* Для очень маленьких экранов */
@media screen and (max-width: 480px) {
    .video-description h3 {
        font-size: 1.2rem !important;
    }
    
    .video-controls {
        gap: 10px !important;
    }
    
    .video-controls button {
        width: 30px !important;
        height: 30px !important;
    }
}