/* ==========================================================================
   ОБНОВЛЕННЫЕ СТИЛИ ГЛАВНОЙ СТРАНИЦЫ
   ========================================================================== */

.museum-front-page {
    max-width: 1800px; /* Увеличили общую ширину под большой баннер */
    margin: 0 auto;
    padding: 20px 0 0; /* Убрали боковые паддинги у контейнера, чтобы баннер встал шире */
    text-align: center;
}

/* 1. Главный баннер — на всю доступную ширину */
.main-hero-banner {
    width: 100%;
    margin-top: clamp(20px, 3.7vw, 50px);
    margin-bottom: clamp(30px, 5vw, 60px);
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.main-hero-banner img {
    width: 100%;
    height: auto;
    display: block;
    flex-shrink: 0;
    min-width: 1100px;
    max-width: none;
}

/* 2. Приветственный текст */
.main-welcome-text {
    font-size: clamp(23px, 3.2vw, 38px); /* Увеличили размер шрифта */
    color: #b1aba1; /* Точный цвет по ТЗ */
    font-weight: 400;
    margin: 0 auto 30px;
    max-width: 1800px; /* Чтобы текст красиво разбивался на строки и не растягивался в одну линию */
    line-height: 1.2;
    padding: 0 clamp(10px, 1.5vw, 40px) !important;

}

/* Запрет переноса слов внутри тега */
.nowrap {
    white-space: nowrap;
}

/* ==========================================================================
   3. КОНТЕЙНЕР КАРТОЧЕК
   ========================================================================== */
.main-navigation-cards {
    display: flex;
    /* Изменили на center, чтобы сетка не растягивала блоки, а держала их кучно */
    justify-content: center; 
    gap: clamp(5px, 1.1vw, 20px); 
    flex-wrap: wrap;
    margin-bottom: 70px;
    padding: 0 clamp(10px, 2vw, 40px); 
}

/* ==========================================================================
   4. КАРТОЧКА-КНОПКА (ФИКСИРУЕМ МАКСИМУМ)
   ========================================================================== */
.nav-card {
    background-color: rgba(8, 8, 8, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    transition: background-color 0.3s ease;

    border-radius: clamp(16px, 2.5vw, 35px);
    padding: clamp(6px, 1vw, 15px) clamp(6px, 1vw, 15px) clamp(15px, 2vw, 25px) clamp(6px, 1vw, 15px);

    /* ИСПРАВЛЕНИЕ: 
       Убрали flex-grow. Теперь ширина строго зажата.
       На мобилках и планшетах они берут 45% от экрана (чтобы вставать по две в ряд), 
       но как только эти 45% дорастают до 440px — кнопка застывает и больше не увеличивается. */
    width: clamp(270px, 30vw, 400px);
    
    /* Запрещаем флексу сжимать их меньше нижнего лимита clamp */
    flex-shrink: 0; 
    -webkit-tap-highlight-color: transparent;
}


.nav-card:hover {
    background-color: rgb(23, 25, 25);
}

/* ==========================================================================
   5. ОСТАЛЬНЫЕ ВНУТРЕННИЕ ЭЛЕМЕНТЫ (ПОДСТРАИВАЮТСЯ ПОД ШИРИНУ)
   ========================================================================== */
.nav-card-image-wrapper {
    width: 100%;
    height: auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: clamp(7px, 1.8vw, 20px);
    border-radius: clamp(10px, 1.5vw, 20px);
}

.nav-card-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-card:hover .nav-card-image-wrapper img {
    transform: scale(1.03);
}

/* ЗАГОЛОВОК: Теперь уменьшается строго параллельно сжатию карточки */
.nav-card-title {
    color: #b8b4a3;
    font-weight: 900;
    letter-spacing: 1.5px;
    transition: color 0.3s ease;
    margin: 0;
    font-size: clamp(20px, 4.3vw, 59px);
    margin-bottom: clamp(2px, 0.8vw, 10px);
}

.nav-card:hover .nav-card-title {
    color: #fff9e1;
}

/* ПОДЗАГОВОК */
.nav-card-subtitle {
    font-family: 'mossansregular', sans-serif;
    color: #9e9689;
    margin: 0;
    font-weight: 400;
    line-height: 1.3;
    font-size: clamp(11px, 1.8vw, 22px);
}


/* ==========================================================================
   БЛОК: ДОРОЖНАЯ КАРТА (ОСНОВНЫЕ СТИЛИ)
   ========================================================================== */

.main-roadmap-section {
    display: flex;
    justify-content: center;
    padding: 0 20px;
    margin-bottom: clamp(40px, 5vw, 80px);
}

/* Полупрозрачная подложка с блюром и рамкой */
.roadmap-container {
    /* ФОРМУЛА: На 1920px ширина будет ~1100px (отступы по бокам большие).
       На 768px ширина плавно дойдет до ~700px. */
    width: calc(430px + 35vw);
    max-width: 1100px; /* Выше этого значения контейнер расти не будет */
    
    background-color: rgba(8, 8, 8, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 6px solid #dfe2e5; 
    padding: 40px 50px 40px 40px;
    box-sizing: border-box;
}

/* Список блоков, ряды и обертки оставляем как есть */
.roadmap-title-img {
    width: 100%;
    height: auto;
    display: block;
    padding-left: 10px;
    margin-bottom: 25px; 
}

.roadmap-list {
    display: flex;
    flex-direction: column;
}

.roadmap-item {
    display: flex;
    align-items: stretch; 
    margin-bottom: 10px; 
}

/* Колонка под картинку (линию) на десктопе */
.roadmap-line-wrap {
    /* Вместо жестких 70px: на full-screen экранах она будет 70px, 
       но при уменьшении плавно сожмется до 50px еще до включения мобильного брейкпоинта */
    width: clamp(50px, 3.8vw, 70px); 
    flex-shrink: 0;
    position: relative;
    overflow: hidden; 
}

/* Абсолютное позиционирование для промежуточных картинок */
.roadmap-item:not(.tail-item):not(:last-child) .roadmap-line-wrap img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

.roadmap-item.tail-item .roadmap-line-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

.roadmap-item:last-child {
    margin-bottom: 0;
    align-items: flex-start;
}

.roadmap-item:last-child .roadmap-line-wrap {
    overflow: visible;
}

.roadmap-item:last-child .roadmap-line-wrap img {
    width: 100%;
    height: auto;
    display: block;
    position: static !important;
}

/* Текстовая колонка — ДЕЛАЕМ ШРИФТ ДИНАМИЧЕСКИМ */
.roadmap-text {
    font-family: 'mossansregular', sans-serif;
    color: #dfe2e5;
    
    /* Вместо жестких 38px: шрифт будет плавно масштабироваться от 38px 
       на больших мониторах до 22px на планшетах */
    font-size: clamp(27px, 2.4vw, 38px);
    
    line-height: 1.4;
    
    /* Отступы тоже делаем слегка резиновыми, чтобы верстка не "дубела" */
    padding-left: clamp(20px, 2.2vw, 40px);
    padding-top: clamp(8px, 0.4vw, 15px);
    padding-bottom: clamp(45px, 4vw, 75px); 
    
    display: flex;
    align-items: flex-start;
    text-align: left !important;
}

.roadmap-item:last-child .roadmap-text {
    padding-bottom: 0;
}

/* ==========================================================================
   ИНТЕРАКТИВНЫЙ БЛОК С ПОЕЗДОМ (НА ВСЮ ШИРИНУ ЭКРАНА)
   ========================================================================== */

.train-section-full {
    /* Прорываем max-width родительского контейнера макета */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    z-index: 95;
    background-color: #050505;
    overflow: hidden;
    box-sizing: border-box;
}

.train-tunnel-container {
    height: clamp(140px, 14.5vw, 210px); /* высота контейнера по твоему запросу */
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-end; /* Важно! Прижимаем картинку к НИЖНЕМУ краю, чтобы рельсы стояли на футере */
    overflow: hidden; /* Скрываем всё, что выходит за рамки 230px */
}

.train-img-interactive {
    /* Самое главное: высота картинки всегда должна быть пропорционально больше 
       высоты контейнера, чтобы сохранялся точно такой же срез крыши сверху!
       Мы берем текущую динамическую высоту контейнера и умножаем её на коэффициент 1.19
    */
    height: calc(clamp(140px, 14.5vw, 210px) * 1.19);
    width: auto;
    max-width: none !important;
    display: block;
    
    /* Изначальный сдвиг для анимации (100vw) оставляем. 
       Скрипт будет менять толькоtranslateX, не трогая эти настройки высоты */
    transform: translateX(100vw);
    will-change: transform;
    
    /* Если вдруг понадобится микро-коррекция: 
       так как flex-items прижат к bottom, верхушка картинки (20px излишка) 
       автоматически срежется верхним краем контейнера. */
}

/* Корректировка высоты под мобильные экраны, чтобы блок не выглядел гигантским */
@media (max-width: 768px) {
    .train-tunnel-container {
        height: clamp(120px, 20vw, 250px);
    }
}



/* ==========================================================================
   МЕДИА-КОРРЕКЦИЯ: 2 КАРТОЧКИ В РЯД (от 924px и меньше)
   ========================================================================== */
@media (max-width: 924px) {
    .main-navigation-cards {
        /* Внедряем формулу: контейнер занимает 60% при 924px и плавно растет до 90% при 400px */
        width: calc(212px + 37vw);
        max-width: 100%; /* Защита от переполнения на всякий случай */
        
        /* margin: 0 auto центрирует этот блок. 
           Оставшееся место по бокам АВТОМАТИЧЕСКИ становится нашими динамическими отступами! */
        margin: 0 auto 70px;
        
        /* Убираем боковые паддинги, так как теперь отступы от краев экрана регулирует сама ширина контейнера */
        padding: 0; 
        
        justify-content: flex-start; /* Карточки идут слева направо */
        gap: clamp(10px, 2.5vw, 25px) clamp(4px, 1.5vw, 16px); /* Зазор между карточками */
    }

    .nav-card {
        /* Теперь карточка просто занимает ровно 50% от нашего умного контейнера 
           минус половина зазора (gap). Больше ей ничего высчитывать не нужно! */
        flex: 0 0 calc(50% - clamp(2px, 0.75vw, 8px));
        width: calc(50% - clamp(2px, 0.75vw, 8px));
        
        /* Жестко сбрасываем любые ограничения, чтобы математика работала безупречно */
        min-width: 0;
        max-width: none !important; 
        
        border-radius: clamp(10px, 2vw, 35px);
        padding: clamp(6px, 1vw, 15px) clamp(6px, 1vw, 15px) clamp(15px, 2vw, 25px) clamp(6px, 1vw, 15px);
    }
}


/* --- АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА (768px и меньше) --- */
@media (max-width: 768px) {
    .main-welcome-text {
        margin-bottom: 40px;
    }
    
    /* СКРЫВАЕМ описание (подзаголовок) на кнопках, оставляя только крупные заголовки */
    .nav-card-subtitle {
        display: none !important;
    }

    /* Корректируем паддинг карточки, так как текста стало меньше */
    .nav-card {
        padding: clamp(8px, 1vw, 12px) clamp(8px, 1vw, 12px) clamp(10px, 1.8vw, 15px) clamp(8px, 1vw, 12px) !important;
    }

    .nav-card-title {
        font-size: clamp(23px, 5.4vw, 31px) ;
        margin-bottom: 5px; /* Убираем нижний отступ, подзаголовка больше нет */
    }

    .main-roadmap-section {
        padding: 0 clamp(5px, 3vw, 30px); /* Минимальные общие отступы секции */
    }

    .roadmap-container {
        /* На мобильных забираем максимум места, убирая боковые пустоты */
     
        
        border-width: clamp(2px, 0.8vw, 4px) !important;
        padding: clamp(20px, 4vw, 30px) clamp(5px, 2.7vw, 25px);
    }

    /* Уменьшаем отступ от картинки-заголовка до начала схемы */
    .roadmap-title-img {
        margin-bottom: clamp(15px, 2.5vw, 25px) !important;
    }

    /* Уменьшаем высоту первого блока-линии (без текста) на 50% */
    .roadmap-item.tail-item .roadmap-line-wrap img {
        height: 4vw !important; /* Задаем половину от стандартной пропорциональной высоты */
        object-fit: cover;       /* Обрезаем снизу, сохраняя масштаб */
        object-position: top;    /* Удерживаем верхнюю точку стыковки */
    }

    /* ПЛАВНОЕ УМЕНЬШЕНИЕ КАРТИНОК-ЛИНИЙ */
    .roadmap-line-wrap {
        /* Картинка ветки метро будет плавно худеть от ~55px на планшетах 
           до аккуратных ~32px на самых маленьких экранах */
        width: clamp(25px, 7vw, 55px) !important;
    }

    /* Динамический размер шрифта и отступов текста */
    .roadmap-text {
        font-size: clamp(18px, 3.3vw, 27px) !important;
        line-height: 1.3;
        
        /* Расстояния тоже плавно уменьшаются, чтобы экономить высоту экрана */
        padding-left: clamp(7px, 3vw, 25px); 
        padding-top: clamp(4px, 1.6vw, 15px);
        padding-bottom: clamp(2px, 4vw, 50px); 
    }

    .train-tunnel-container {
        /* clamp(минимальная_высота, динамическая_высота, максимальная_высота)
           18.2vw — заставляет блок плавно худеть от 140px вниз вместе с экраном телефона.
           100px — жесткий минимум для самых маленьких экранов (типа iPhone SE), чтобы поезд не стал слишком крошечным.
           140px — максимальная точка для мобилок, которая идеально стыкуется с твоим основным десктопным стилем.
        */
        height: clamp(100px, 20vw, 150px);
    }

    .train-img-interactive {
        /* Пересчитываем высоту картинки поезда под новые мобильные рамки, 
           сохраняя неизменный коэффициент среза 1.19
        */
        height: calc(clamp(100px, 20vw, 150px) * 1.19);
    }


}



/* ЭТАП ДЛЯ МОБИЛЬНЫХ: Включается на экранах от 650px и меньше */
@media (max-width: 650px) {
    .main-hero-banner img {
        width: calc(1100 / 650 * 100vw);
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 350px) {

    .nav-card-title {
        font-size: clamp(16px, 6.4vw, 33px) ;
    }
    
    .main-navigation-cards {
        /* Добавляем 5px безопасности слева и справа, чтобы плитки не упирались в стекло */
        padding: 0 5px !important;
        /* Вычитаем эти 10px из максимальной ширины контейнера */
        max-width: calc(100% - 10px) !important;
    }
}