/* Mobile Responsive Styles */
@media (max-width: 768px) {
    :root {
        --container: calc(100% - 32px);
    }

    .container {
        padding: 0 16px;
    }

    /* Header */
    .site-header__inner {
        flex-wrap: wrap;
        gap: 12px;
        padding: 0 16px !important;
        align-items: center;
    }

    .brand {
        max-width: 200px;
    }

    .menu-toggle {
        margin-left: auto;
    }

    /* Info Card - Official Tour Operator Badge */
    .split-grid > div > div[style*="display: flex"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px !important;
    }

    .split-grid > div > div[style*="display: flex"] img {
        height: 40px !important;
    }

    .split-grid > div > div[style*="display: flex"] .eyebrow {
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
        margin: 0 auto;
    }

    /* Tour Card Footer */
    .tour-card__footer {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .tour-card__price,
    .tour-card__dates,
    .tour-card__actions {
        width: 100% !important;
    }

    .tour-card__dates {
        justify-content: space-between !important;
    }

    .tour-card__actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Tours Slider for Mobile */
    .tours-slider-grid {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding: 0 16px 16px;
        margin: 0 -16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(17, 72, 63, 0.3) transparent;
        grid-template-columns: none !important;
        position: relative;
    }

    .tours-slider-grid::-webkit-scrollbar {
        height: 4px;
    }

    .tours-slider-grid::-webkit-scrollbar-track {
        background: transparent;
    }

    .tours-slider-grid::-webkit-scrollbar-thumb {
        background: rgba(17, 72, 63, 0.3);
        border-radius: 4px;
    }

    .tours-slider-grid .tour-card {
        flex: 0 0 85vw;
        scroll-snap-align: start;
        min-width: 85vw;
        max-width: 320px;
    }
    
    .site-nav {
        order: 3;
        width: 100%;
        display: none;
    }
    .hero-image {
        display: none;
    }
    .mobile-menu {
        display: none;
    }
    .mobile-menu.active {
        display: block;
    }
    .mobile-nav {
        display: block;
    }
    .mobile-nav li {
        gap: 10px;
        margin-block: 5px;
    }
/* Вместо текущих стилей для mobile-menu */
.mobile-menu {
    position: absolute;
    top: var(--scroll-y, 0px);
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}

.mobile-menu.active {
    display: block;
}

.mobile-menu__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    overflow-y: auto;
    min-height: 100dvh;
    height: 100dvh;
}

.section {
    padding: 35px 0;
}

    
    .site-nav.active {
        display: flex;
        flex-direction: column;
        background: white;
        padding: 16px;
        border-radius: 16px;
        box-shadow: var(--shadow-md);
    }
    
    /* Hero Section */
    .hero {
        padding: 150px 0 60px;
    }

    .hero-content {
        margin-top: 0 !important;
    }

    .hero-copy {
        margin-top: 0 !important;
    }

    .hero-actions .btn-outline-white {
        display: none;
    }

    .hero__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    /* Tour Header */
    .tour-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 24px;
    }

    .tour-header__main {
        grid-row: 1 !important;
    }

    .tour-header__gallery {
        width: 100%;
        grid-row: 2 !important;
    }
    
    .gallery-slider {
        width: 100%;
        height: 300px;
    }
    
    .gallery-slider__prev,
    .gallery-slider__next {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .video-play-button {
        width: 60px;
        height: 60px;
    }

    .gallery-slide {
        width: 100% !important;
        height: 100% !important;
    }

    .gallery-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .tour-header {
        position: relative;
        z-index: 1;
    }

    .gallery-slider {
        position: relative;
        z-index: 1;
    }
    
    .video-play-button i {
        font-size: 24px;
    }
    
    /* Tour Detail Grid */
    .tour-detail-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    /* Tour Cards Grid */
    .tours-grid {
        grid-template-columns: 1fr;
    }
    
    /* Info Panels */
    .info-panels {
        grid-template-columns: 1fr;
    }
    
    /* Route Cards */
    .routes-grid {
        grid-template-columns: 1fr;
    }
    
    /* Feature Cards */
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    /* Reviews */
    .reviews-grid {
        grid-template-columns: 1fr;
    }
    
    /* Team */
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    /* Quote Grid */
    .quote-grid {
        grid-template-columns: 1fr;
    }
    
    /* CTA Banner */
    .cta-banner {
        text-align: center;
    }
    
    /* Modal */
    .modal-container {
        max-width: calc(100% - 32px);
        max-height: 80vh;
    }
    
    /* Gallery Grid in Modal */
    .dates-grid {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    /* Buttons */
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Form */
    .form-grid {
        grid-template-columns: 1fr;
    }
    .mobile__trips__container {
        display: flex;
        flex-direction: column;
        gap: 16px; /* отступы между form */
    }
    .__mobile__trips__form1,
    .__mobile__trips__form2,
    .__mobile__trips__form3,
    .__mobile__trips__form4 {
        /* margin-bottom: 16px; */
        width: 280px;
        /* display: flex;
        flex-direction: column; блоки друг под другом */
    }
    .__mobile__hide {
        display: none;
    }

    .quiz-form {
        padding: 15px;

    }
    .quiz-layout {
        gap: 0;
    }

    /* Service Categories Slider for Mobile */
    .services-categories-grid {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding: 0 16px 16px;
        margin: 0 -16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        grid-template-columns: none !important;
    }

    .services-categories-grid::-webkit-scrollbar {
        display: none;
    }

    .service-category-card {
        flex: 0 0 280px;
        scroll-snap-align: start;
        min-width: 280px;
    }
}