/* =====================================================
   MOBILE.CSS
   ===================================================== */

#check { display: none; }
.open__menu { display: none; cursor: pointer; }
.close__menu { display: none; }

/* ── 1280px ────────────────────────────── */
@media screen and (max-width: 1280px) {
    .hero__h1 { font-size: 66px; line-height: 84px; }
    .hero__book { width: 100%; }
    .section { padding: 90px 56px 28px; }
    .section__h3 { font-size: 52px; line-height: 68px; }
    .offer__blog { width: 360px; height: auto; }
    .offer__textblog { width: 360px; height: auto; }
    .offer__details { width: 100%; height: auto; }
    .client__items { width: 440px; height: auto; }
    .newsletter { margin: 0 56px; padding: 48px 56px; gap: 56px; }
}

/* ── 1024px ─────────────────────────────── */
@media screen and (max-width: 1024px) {

    .open__menu {
        display: block;
        font-size: 28px;
        color: #fff;
        padding: 4px 8px;
        line-height: 1;
    }

    .menu__item { display: none !important; }
    .menu__sign { display: none !important; }

    /* ВІДКРИТЕ МЕНЮ — overlay */
    #check:checked ~ .menu__item {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(23, 36, 50, 0.97);
    }

    /* Посилання — оригінальний шрифт Rubik */
    #check:checked ~ .menu__item .menu__link {
        font-family: 'Rubik', sans-serif;
        font-weight: 400;
        font-size: 28px;
        line-height: 24px;
        color: #FFFFFF;
        margin-right: 0;
    }

    #check:checked ~ .menu__item .menu__link:hover {
        font-weight: 500;
        border-bottom: 3px solid #FF7757;
    }

    /* menu__sign — тільки close button, зверху справа */
    #check:checked ~ .menu__sign {
        display: block !important;
        position: fixed;
        top: 0; right: 0;
        z-index: 10000;
        padding: 0;
        background: transparent;
    }

    /* Ховаємо Login і Sign up у відкритому меню */
    #check:checked ~ .menu__sign .menu__btn {
        display: none;
    }

    /* Close button — top right corner */
    #check:checked ~ .menu__sign .close__menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 20px;
        right: 24px;
        z-index: 10001;
        font-size: 28px;
        color: #fff;
        cursor: pointer;
        padding: 8px;
        line-height: 1;
    }

    /* Hero */
    .hero__h1 { font-size: 52px; line-height: 66px; width: 90%; }
    .hero__title { padding: 100px 0 72px 32px; }
    .hero { padding-bottom: 100px; }
    .hero__book { width: 100%; flex-direction: column; border-radius: 16px; }
    .hero__reserve { flex-wrap: wrap; padding: 36px 32px; gap: 24px; }
    .hero__booknow { border-radius: 0 0 16px 16px; justify-content: center; padding: 28px 32px; width: 100%; }
    .reserve__input { width: 200px; }

    .section { padding: 80px 40px 24px; }
    .section__h3 { font-size: 44px; line-height: 56px; }
    .section__text { font-size: 20px; }

    .destinations__content { padding: 0 28px 80px 0; margin-left: 40px; gap: 24px; }

    .offer { flex-wrap: wrap; justify-content: center; padding: 0 40px 100px; gap: 24px; }
    .offer__blog { width: calc(50% - 12px); height: auto; }
    .offer__textblog { width: 100%; height: auto; }
    .offer__details { width: 100%; height: auto; }
    .offer__img { width: 100%; }

    .travel { flex-direction: column; padding: 0 40px 80px; gap: 28px; }
    .travel__title { width: 100%; font-size: 42px; line-height: 54px; }
    .travel__text { font-size: 20px; line-height: 34px; }

    .main-container { flex-direction: column; padding-top: 60px; }
    .section__tit { width: 100%; }
    .planners { flex-wrap: wrap; justify-content: center; padding: 0 40px 80px; gap: 28px; }
    .planners__item { margin-left: 0; }

    .gallery__item { margin: 0 40px; gap: 20px; }

    .client { flex-direction: column; align-items: center; padding: 80px 40px 260px; gap: 72px; }
    .client__items { width: 100%; max-width: 580px; height: auto; }

    .newsletter { position: static; margin: 40px; flex-direction: column; gap: 28px; padding: 44px 40px; bottom: auto; }

    .footer { flex-wrap: wrap; gap: 40px; padding: 72px 40px; }
}

/* ── 768px ─────────────────────────────────── */
@media screen and (max-width: 768px) {

    .hero__h1 { font-size: 36px; line-height: 48px; width: 100%; }
    .hero__text { font-size: 18px; }
    .hero__title { padding: 80px 0 56px 20px; }
    .hero { padding-bottom: 64px; }
    .hero__reserve { flex-direction: column; padding: 24px 20px; gap: 18px; }
    .reserve__column { width: 100%; }
    .reserve__input { width: 100%; }
    .book__text { font-size: 26px; }

    .section { flex-direction: column; align-items: flex-start; padding: 56px 20px 20px; gap: 14px; }
    .section__h3 { font-size: 30px; line-height: 42px; padding-bottom: 10px; }
    .section__text { font-size: 17px; padding-bottom: 14px; }
    .section__shev { padding: 14px 20px; }

    .destinations__content { flex-direction: column; overflow: visible; margin-left: 20px; padding: 0 20px 56px 0; gap: 16px; }
    .destinations__items { width: 100%; }
    .destinations__img { width: 100%; height: 260px; object-fit: cover; border-radius: 12px; }

    .offer { flex-direction: column; align-items: center; padding: 0 20px 56px; gap: 20px; }
    .offer__blog { width: 100%; height: auto; }
    .offer__textblog { width: 100%; height: auto; padding: 28px 18px; }
    .offer__img { width: 100%; }
    .offer__city { font-size: 22px; }
    .offer__details { flex-wrap: wrap; width: 100%; height: auto; gap: 14px; }
    .offer__price { font-size: 32px; }
    .offer__btn { padding: 14px 28px; font-size: 18px; }

    .travel { flex-direction: column; padding: 0 20px 56px; gap: 20px; }
    .travel__img { width: 100%; }
    .travel__title { font-size: 28px; line-height: 38px; width: 100%; }
    .travel__text { font-size: 16px; line-height: 28px; }
    .travel__btn { font-size: 18px; }

    .main-container { padding-top: 0; }
    .section__star { display: none; }
    .planners { flex-direction: column; align-items: center; padding: 0 20px 56px; gap: 36px; }
    .planners__item { width: 100%; max-width: 340px; margin-left: 0; }
    .planners__price { width: 100%; }
    .planners__rating { width: 100%; }
    .planners__city { font-size: 22px; }

    .gallery__item { flex-direction: column; overflow: visible; margin: 0 20px; padding: 16px 0 56px; gap: 14px; }
    .gallery__item .gallery__img { width: 100%; border-radius: 12px; }

    .client { padding: 72px 20px 240px; gap: 64px; }
    .client__items { width: 100%; padding: 52px 18px 24px; height: auto; }
    .client__ava { left: 18px; top: -52px; width: 82px; }
    .client__name { font-size: 20px; }
    .client__text { font-size: 15px; line-height: 21px; }

    .newsletter { margin: 16px 20px; gap: 20px; padding: 32px 20px; }
    .newsletter__title { font-size: 38px; line-height: 50px; }
    .newsletter__frame { flex-direction: column; width: 100%; gap: 14px; }
    .newsletter__email { width: 100%; font-size: 16px; padding: 14px 18px; }
    .newsletter__btn { width: 100%; justify-content: center; padding: 14px 18px; }
    .newsletter__icons { right: 14px; }

    .footer { flex-direction: column; padding: 72px 20px 56px; gap: 28px; }
    .footer__text { font-size: 20px; }
    .footer__blog { font-size: 15px; }

    .go-top { right: 16px !important; bottom: 20px !important; padding: 14px 16px; }
}

/* ── 480px ─────────────────────────────────── */
@media screen and (max-width: 480px) {
    .menu { padding: 14px 20px; }
    .hero__h1 { font-size: 26px; line-height: 36px; }
    .hero__text { font-size: 15px; }
    .book__text { font-size: 20px; }
    .section__h3 { font-size: 24px; line-height: 32px; }
    .section__text { font-size: 15px; }
    .offer__city { font-size: 18px; }
    .offer__price { font-size: 26px; }
    .offer__btn { padding: 12px 22px; font-size: 16px; }
    .offer__textblog { padding: 22px 14px; }
    .travel__title { font-size: 22px; line-height: 30px; }
    .travel__text { font-size: 14px; line-height: 24px; }
    .planners__city { font-size: 18px; }
    .client { padding: 64px 14px 220px; }
    .client__items { padding: 48px 14px 20px; }
    .newsletter { margin: 12px 14px; padding: 24px 14px; }
    .newsletter__title { font-size: 28px; line-height: 36px; }
    .footer { padding: 56px 14px 48px; }
    .footer__text { font-size: 18px; }
    .footer__blog { font-size: 14px; }
}


/* =====================================================
   MOBILE CAROUSELS — каруселі на мобільній версії
   Всі 4 секції: destinations, offers, planners, gallery
   ===================================================== */

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

    /* ── Спільні стилі для всіх каруселей ── */
    .carousel-wrap {
        position: relative;
    }
    .carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 16px 0 8px;
    }
    .carousel-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        background: #D0D0D0;
        border: none;
        cursor: pointer;
        padding: 0;
        transition: background 0.25s, transform 0.25s;
        flex-shrink: 0;
    }
    .carousel-dot.active {
        background: #FF7757;
        transform: scale(1.35);
    }

    /* ── 1. DESTINATIONS ── */
    .destinations__content {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: 0 !important;
        padding: 0 0 12px !important;
        gap: 0 !important;
    }
    .destinations__content::-webkit-scrollbar { display: none; }

    .destinations__items {
        flex: 0 0 85vw !important;
        scroll-snap-align: center;
        width: 85vw !important;
        margin: 0 8px;
    }
    .destinations__img {
        width: 100% !important;
        height: 300px !important;
        object-fit: cover;
        border-radius: 16px;
    }

    /* ── 2. OFFERS ── */
    .offer {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 0 12px !important;
        gap: 0 !important;
        align-items: stretch !important;
    }
    .offer::-webkit-scrollbar { display: none; }

    .offer__blog {
        flex: 0 0 85vw !important;
        width: 85vw !important;
        scroll-snap-align: center;
        margin: 0 8px;
        height: auto !important;
    }
    .offer__img {
        width: 100% !important;
        height: 220px;
        object-fit: cover;
        display: block;
    }
    .offer__textblog {
        width: 100% !important;
        height: auto !important;
    }
    .offer__details {
        width: 100% !important;
        height: auto !important;
    }

    /* ── 3. PLANNERS ── */
    .planners {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 0 12px !important;
        gap: 0 !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    .planners::-webkit-scrollbar { display: none; }

    .planners__item {
        flex: 0 0 75vw !important;
        width: 75vw !important;
        max-width: none !important;
        scroll-snap-align: center;
        margin: 0 8px !important;
    }
    .planners__item .gallery__img {
        width: 100% !important;
        border-radius: 12px 12px 0 0;
    }
    .planners__price { width: 100% !important; }
    .planners__rating { width: 100% !important; }

    /* ── 4. GALLERY ── */
    .gallery__item {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 !important;
        padding: 0 0 12px !important;
        gap: 0 !important;
    }
    .gallery__item::-webkit-scrollbar { display: none; }

    .gallery__item .gallery__img {
        flex: 0 0 85vw !important;
        width: 85vw !important;
        height: 260px !important;
        object-fit: cover;
        border-radius: 16px !important;
        scroll-snap-align: center;
        margin: 0 8px;
    }
}

@media screen and (max-width: 480px) {
    .destinations__items { flex: 0 0 90vw !important; width: 90vw !important; }
    .offer__blog { flex: 0 0 90vw !important; width: 90vw !important; }
    .planners__item { flex: 0 0 85vw !important; width: 85vw !important; }
    .gallery__item .gallery__img { flex: 0 0 90vw !important; width: 90vw !important; }
}