/*
 * ========= Стили для страницы Unique Mountain Experience =========
 */

/* * ========= Секция 1: HERO-СЛАЙДЕР ========= */

/* Контейнер для стрелок */
.js-hero-slider .paging-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 5;
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

/* Стили для самих стрелок (кнопок) */
.js-hero-slider .paging__prev,
.js-hero-slider .paging__next {
    background: transparent;
    border: none;
    cursor: pointer;
    color: white;
    width: 50px;
    height: 50px;
    opacity: 0.75;
    transition: opacity 0.2s ease;
    pointer-events: auto;
}

.js-hero-slider .paging__prev:hover,
.js-hero-slider .paging__next:hover {
    opacity: 1;
}

/* Контейнер для точек (dots) */
.js-hero-slider .paging__dots {
    position: absolute;
    bottom: 25px;
    right: 25px;
    z-index: 5;
    left: 0;
    text-align: center;
}

/* Стилизация самих точек (Slick создает 'ul.slick-dots') */
.js-hero-slider .paging__dots ul.slick-dots {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex; /* Чтобы было по центру */
    gap: 8px;
}

.js-hero-slider .paging__dots li {
    margin: 0;
}

.js-hero-slider .paging__dots li button {
    font-size: 0; /* Прячем текст "1", "2", "3" */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: white;
    opacity: 0.5;
    cursor: pointer;
    padding: 0;
}

.js-hero-slider .paging__dots li.slick-active button {
    opacity: 1;
}

/* На больших экранах - выравниваем точки справа, как в style.css */
@media (min-width: 768px) {
    .js-hero-slider .paging__dots {
        left: auto; /* Сбрасываем 'left: 0' */
        text-align: right;
        padding-right: 20px; /* Отступ из style.css */
    }
}


/* --- Секция 2: Блок Хлебных крошек --- */
.breadcrumbs-container {
    max-width: 944px;
    margin: 40px auto 0 auto;
    padding: 0 15px;
}

.breadcrumbs {
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
    text-align: left;
}

.breadcrumbs a {
    color: #555;
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}

/* --- Секция 3: Интро-блок (.entry) --- */
.entry {
    max-width: 944px;
    margin: 0 auto 40px auto;
    text-align: center;
    padding: 0 15px;
}

.entry__title {
    font-family: "Raleway", sans-serif;
    font-size: 44px;
    color: #333333;
    font-weight: 400;
    margin: 0 0 8px 0;
    line-height: 1.2;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.entry__subtitle {
    font-family: "EB Garamond", serif;
    font-size: 24px;
    color: #333333;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 20px 0;
}

.entry__text p {
    font-family: "EB Garamond", serif;
    font-size: 17px;
    color: #333333;
    line-height: 1.6;
    margin: 0 0 15px 0;
}
.entry__text p:last-child {
    margin-bottom: 0;
}

/* --- Кнопка "Weekly Program" --- */
.entry__actions {
    margin-top: 30px;
}

.entry__actions .btn.js-anchor-link {
    display: inline-flex;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    min-width: 215px;
    min-height: 50px;
    padding: 10px 20px;
    background: #9fddc7;
    color: #3c3c3b;
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.entry__actions .btn.js-anchor-link:hover,
.entry__actions .btn.js-anchor-link:focus {
    background: #3c3c3b;
    color: #9fddc7;
}


/* --- Секция 4: Блок "section-halfpane" (50/50, Слайдер слева) --- */

.section-halfpane {
    max-width: 1236px;
    margin: 40px auto;
}

.section__container.bg-tertiary {
    background-color: #f0f0f0; /* Фон текстовой части */
}

.section__container {
    display: flex;
}

.section__aside,
.section__content {
    width: 50%;
}

.section__aside {
    position: relative; 
}

/* Слайдер внутри .section__aside */
.slider-images {
    height: 100%;
}
.slider-images .slider__clip,
.slider-images .slider__slides,
.slider-images .slick-list,
.slider-images .slick-track,
.slider-images .slider__slide {
    height: 100%;
}
.slider-images .slider__slide-image {
    display: block;
    height: 100%;
}
.slider-images .ratio-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Навигация для .section-halfpane слайдера */
.js-halfpane-slider .paging {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none; 
}
.js-halfpane-slider .paging__arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}
.js-halfpane-slider .paging__prev,
.js-halfpane-slider .paging__next {
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: #333;
    opacity: 0.75;
    transition: opacity 0.2s;
    pointer-events: auto; 
}
.js-halfpane-slider .paging__prev:hover,
.js-halfpane-slider .paging__next:hover {
    opacity: 1;
}

.js-halfpane-slider .paging__dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.js-halfpane-slider .paging__dots ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
}
.js-halfpane-slider .paging__dots li button {
    font-size: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    padding: 0;
    pointer-events: auto; 
}
.js-halfpane-slider .paging__dots li.slick-active button {
    background: rgba(0, 0, 0, 0.8);
}


/* Текстовый контент .section__content */
.section__content {
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.article__title {
    font-family: "Raleway", sans-serif;
    font-size: 32px;
    font-weight: 400;
    color: #333;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.article__subtitle {
    font-family: "EB Garamond", serif;
    font-size: 24px;
    color: #333333;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 20px;
}

.article__entry p {
    font-family: "EB Garamond", serif;
    font-size: 17px;
    color: #333333;
    line-height: 1.6;
    margin-bottom: 15px;
}


/* --- Секция 5: Слайдер "info-slider-block" (HIKING / TO GO...) --- */
/* (ВОЗВРАЩАЕМ СТИЛИ КАК В restaurants-bars.css) */

.info-slider-block {
    position: relative;
    max-width: 1236px;
    margin: 40px auto;
    background-color: #f0f8ff; /* (ВОЗВРАЩАЕМ) Светло-голубой, как в R&B */
    padding-bottom: 50px;
}

.info-slide-container {
    display: flex;
    flex-direction: row-reverse; /* (ВОЗВРАЩАЕМ) Картинка СПРАВА */
    align-items: stretch;
}

.info-slide-image,
.info-slide-text {
    width: 50%;
}

.info-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.info-slide-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
}

.info-slide-content h3 {
    font-family: "Raleway", sans-serif;
    font-size: 32px;
    font-weight: 400;
    color: #333;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.info-slide-content h4 {
    font-family: "EB Garamond", serif;
    font-size: 24px;
    color: #333333;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 20px;
}

.info-slide-content p {
    font-family: "EB Garamond", serif;
    font-size: 17px;
    color: #333333;
    line-height: 1.6;
    margin-bottom: 15px;
}

.info-slide-link {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    font-family: "Raleway", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2em;
    color: #68554A;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 20px;
}

/* (ВОЗВРАЩАЕМ) Стрелки для .info-slider-block (белые кружки) */
.info-slider-block .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 0;
}

.info-slider-block .slick-prev {
    left: 20px;
}

.info-slider-block .slick-next {
    right: 20px;
}

/* (ВОЗВРАЩАЕМ) Стрелки-галочки */
.info-slider-block .slick-arrow::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-left: 2px solid #333;
    border-bottom: 2px solid #333;
    margin: 0 auto;
}

.info-slider-block .slick-prev::before {
    transform: rotate(45deg);
    margin-left: 4px;
}

.info-slider-block .slick-next::before {
    transform: rotate(-135deg);
    margin-right: 4px;
}


/* Точки для .info-slider-block */
.info-slider-block .slick-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.info-slider-block .slick-dots button {
    font-size: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    padding: 0;
}

.info-slider-block .slick-dots .slick-active button {
    background: rgba(0, 0, 0, 0.8);
}


/* --- Секция 6: Слайдер "Highlights Rotator" (SKIING...) --- */

.section-highlights-rotator {
    max-width: 1236px;
    margin: 40px auto;
    position: relative;
    background-color: #f0f0f0; /* Серый фон для текстовой зоны (из скриншота) */
}

/* Слайд использует .row, .col-lg-6 (из Bootstrap?) */
.section-highlights-rotator .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* (ВАЖНО) Заставляем колонки растягиваться */
}
.section-highlights-rotator [class*="col-lg-"] {
    width: 50%;
}

/* * (ВОТ ИСПРАВЛЕНИЕ)
 * Принудительно убираем 'ratio-square' и растягиваем картинку
 */
.section-highlights-rotator .slider__slide .ratio-container {
    display: block;
    height: 100%;
    /* Убиваем ratio-square */
    aspect-ratio: auto !important; 
    padding-bottom: 0 !important; 
}

.section-highlights-rotator .slider__slide .ratio-media {
    width: 100%;
    height: 100%; 
    object-fit: cover; /* "Обреж ее по бокам" */
}
/* (КОНЕЦ ИСПРАВЛЕНИЯ) */




.section-highlights-rotator .text-warpper {
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* min-height: 550px; (УДАЛЕНО) - Убираем фикс. высоту */
}

.section-highlights-rotator .head-text-main-title {
    font-family: "Raleway", sans-serif;
    font-size: 32px;
    font-weight: 400;
    color: #333;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.section-highlights-rotator .content-text {
    font-family: "EB Garamond", serif;
    font-size: 17px;
    color: #333333;
    line-height: 1.6;
}

/* Навигация (Paging) для Секции 6 */
.section-highlights-rotator .paging {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Позиционируем над левой (текстовой) колонкой */
    height: 100%;
    z-index: 5;
    pointer-events: none; /* Контейнер некликабельный */
}

/* Стрелки */
.section-highlights-rotator .paging__arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px; /* Отступы внутри текстовой колонки */
}

.section-highlights-rotator .paging__prev,
.section-highlights-rotator .paging__next {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #333;
    width: 40px;
    height: 40px;
    opacity: 0.75;
    transition: opacity 0.2s;
    pointer-events: auto; /* Кнопки кликабельные */
}
.section-highlights-rotator .paging__prev:hover,
.section-highlights-rotator .paging__next:hover {
    opacity: 1;
}

/* Точки */
.section-highlights-rotator .paging__dots {
    position: absolute;
    bottom: 30px; /* Внизу текстовой колонки */
    left: 50%;
    transform: translateX(-50%);
}

.section-highlights-rotator .paging__dots ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
}

.section-highlights-rotator .paging__dots li button {
    font-size: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    padding: 0;
    pointer-events: auto;
}

.section-highlights-rotator .paging__dots li.slick-active button {
    background: rgba(0, 0, 0, 0.8);
}
/*
 * ==========================================================
 * Секции 7-11: Статические Блоки (SKITOUR, FITNESS, ...)
 * ==========================================================
 */

 .static-block-50-50 {
    max-width: 1236px;
    margin: 40px auto;
}

/* Фоны, как на скриншотах */
.static-block-50-50.bg-color-blue {
    background-color: #eaf6ff; /* Светло-голубой */
}
.static-block-50-50.bg-color-grey {
    background-color: #f0f0f0; /* Серый */
}

.static-block-50-50 .row-container {
    display: flex;
    align-items: stretch; /* Растягиваем колонки по высоте */
}

/* Чередование: Текст слева, Картинка справа */
.static-block-50-50 .row-container.reverse {
    flex-direction: row-reverse;
}

.static-block-50-50 .col-half {
    width: 50%;
}

/* Стили для картинки (как в Секции 6) */
.static-block-50-50 .ratio-container {
    display: block;
    height: 100%; 
}
.static-block-50-50 .ratio-media {
    width: 100%;
    height: 100%; 
    object-fit: cover; /* "Обрезать по бокам" */
}

/* Стили для текста (как в Секции 6) */
.static-block-50-50 .text-warpper {
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%; /* Растягиваем по высоте */
}

.static-block-50-50 .head-text {
    text-align: center;
    margin-bottom: 24px; /* 1.5rem */
}

.static-block-50-50 .head-text-main-title {
    font-family: "Raleway", sans-serif;
    font-size: 32px;
    font-weight: 400;
    color: #333;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.static-block-50-50 .content-text {
    font-family: "EB Garamond", serif;
    font-size: 17px;
    color: #333333;
    line-height: 1.6;
}

.static-block-50-50 .content-text p {
    margin-bottom: 15px;
}

/* Ссылка "See all tours" */
.static-block-50-50 .button-wrap {
    margin-top: 40px; /* 2.5rem */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.static-block-50-50 .link-more {
    font-family: "Raleway", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2em;
    color: #68554A;
    text-transform: uppercase;
    text-decoration: none;
}
.static-block-50-50 .link-more:hover {
    text-decoration: underline;
}

























/* * ==========================================================
 * ====== ИСПРАВЛЕННАЯ МОБИЛЬНАЯ ВЕРСИЯ ('ппц') ======
 * ==========================================================
 */

@media (max-width: 992px) {

    /* --- Секция 3 (Интро) --- */
    .entry__title {
        font-size: 32px;
    }

    .entry__subtitle {
        font-size: 20px;
    }

    /* --- Секция 4 (Halfpane) --- */
    .section__container {
        flex-direction: column; /* Складываем в колонку */
        max-width: 600px;
        margin: 0 auto;
    }
    .section__aside,
    .section__content {
        width: 100%; /* Растягиваем на всю ширину */
    }
    .section__content {
        padding: 30px;
    }
    .js-halfpane-slider .paging__arrows {
        padding: 0 10px;
    }

    /* --- Секция 5 (Info Slider) --- */
    .info-slider-block {
        max-width: 600px;
    }
    
    .info-slide-container {
        flex-direction: column; /* Складываем в колонку (Перебивает row-reverse) */
    }

    .info-slide-image,
    .info-slide-text {
        width: 100%; /* Растягиваем на всю ширину */
    }
    
    .info-slide-text {
        padding: 30px;
    }
    
    .info-slider-block .slick-arrow {
        /* (ИСПРАВЛЕНИЕ) ВОЗВРАЩАЕМ СТРЕЛКИ (были display: none) */
        /* Они такие же, как в R&B, должны быть ок */
        top: 30%; /* Поднимаем их повыше на картинку */
    }

    /* --- Секция 6 (Highlights Rotator) --- */
    .section-highlights-rotator .row {
        /* Картинка сверху, текст снизу */
        flex-direction: column-reverse !important; 
    }
    .section-highlights-rotator [class*="col-lg-"] {
        width: 100%; /* Растягиваем на всю ширину */
    }
    .section-highlights-rotator .text-warpper {
        min-height: auto;
        padding: 30px;
    }
    
    /* Перемещаем Paging на всю ширину */
    .section-highlights-rotator .paging {
        width: 100%;
        height: 100%; /* Покрывает и картинку, и текст */
    }
    
    /* Прячем стрелки на мобильных */
    .section-highlights-rotator .paging__arrows {
        display: none !important;
    }
    
    /* Точки поверх картинки (примерно) */
    .section-highlights-rotator .paging__dots {
        position: absolute;
        bottom: auto;
        top: 270px; /* Примерно внизу картинки, подбери значение */
    }

}