/*
 *  Секциите с оферти като хоризонтален карусел, вместо изправен списък —
 *  на телефон с плъзгане, на десктоп със стрелки встрани. Зарежда се от
 *  homepage/_mobile.phtml (засега само на /temp-homepage).
 *
 *  Съдържанието на картата остава каквото е на началната страница — заглавие
 *  с цена вдясно, данните за круиза едно под друго, етикетът си стои в ъгъла
 *  на снимката. Пипа се само подредбата: картите вървят настрани.
 */

/* --- на десктоп ---------------------------------------------------------- */

/* Стрелките са за мишка — на телефон се плъзга с пръст. */
.offers-carousel-prev,
.offers-carousel-next {
    display: none;
}

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

    .offers-carousel {
        position: relative;
    }
    .offers-carousel .featured-list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        /* Картите имат 10px margin отляво — без това залепват с ръба на
           редицата, а не на секцията, и при всяко спиране се изместват. */
        scroll-padding-left: 10px;
        scrollbar-width: none;
    }
    .offers-carousel .featured-list::-webkit-scrollbar {
        display: none;
    }
    .offers-carousel .featured-list.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
        user-select: none;
    }
    .offers-carousel .featured-list > li {
        flex: 0 0 calc(50% - 20px);
        width: calc(50% - 20px);
        scroll-snap-align: start;
        border-radius: 0;
    }
    /* В редица различните пропорции на снимките личат. */
    .offers-carousel .featured-list .preview img {
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }

    /* Картинките от .slides-prev/.slides-next — същите като на страницата
       на круиз, без подложка. Стоят в поле отстрани на редицата, за да не
       застъпват крайните карти; над 1320px излизат в полето на секцията. */
    .offers-carousel {
        padding: 0 44px;
    }
    .offers-carousel-prev,
    .offers-carousel-next {
        display: block;
        position: absolute;
        top: 50%;
        width: 40px;
        height: 40px;
        margin-top: -20px;
        padding: 0;
        border: 0;
        background: transparent url('../images/arrow-big-right.png') no-repeat center center;
        cursor: pointer;
        z-index: 2;
        transition: opacity 0.2s ease;
    }
    .offers-carousel-prev {
        left: 0;
        background-image: url('../images/arrow-big-left.png');
    }
    .offers-carousel-next {
        right: 0;
    }
    /* В края стрелката избледнява, но остава — и двете страни се виждат. */
    .offers-carousel-prev:disabled,
    .offers-carousel-next:disabled {
        opacity: 0.25;
        cursor: default;
    }
}

@media screen and (min-width: 1024px) {
    .offers-carousel .featured-list > li {
        flex-basis: calc(33.333% - 20px);
        width: calc(33.333% - 20px);
    }
}

/* Където секцията има поле встрани, стрелките излизат от редицата. */
@media screen and (min-width: 1320px) {
    .offers-carousel {
        padding: 0;
    }
    .offers-carousel-prev {
        left: -56px;
    }
    .offers-carousel-next {
        right: -56px;
    }
}

/* --- точки под карусела ------------------------------------------------- */

.offers-carousel-dots {
    display: flex;
    justify-content: center;
    margin: 12px 0 4px;
    padding: 0;
    list-style: none;
}
.offers-carousel-dots li {
    margin: 0;
    padding: 0;
}
.offers-carousel-dots li:before {
    display: none;
}
/* Целта за пръст е 26px, точката вътре е 8px — иначе се уцелва трудно. */
.offers-carousel-dots button {
    display: block;
    width: 26px;
    height: 26px;
    padding: 9px;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.offers-carousel-dots button:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #cfd8e3;
    transition: background-color 0.2s ease;
}
.offers-carousel-dots li.is-active button:before {
    background-color: #0b3152;
}

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

    /* --- каруселът ----------------------------------------------------- */

    .featured-list {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Първата карта застава под заглавието на секцията, а не опряна в
           ръба на екрана. */
        margin: 0;
        padding: 4px 0 10px;
    }
    .featured-list::-webkit-scrollbar {
        display: none;
    }
    .featured-list.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
        user-select: none;
    }

    .featured-list > li {
        /* Под 100%, за да се подава ръбът на следващата карта и да личи, че
           списъкът продължава настрани. */
        flex: 0 0 78%;
        width: 78%;
        max-width: 320px;
        /* Разстоянието е margin, а не gap — gap върху scroll-контейнер още
           куца по стари мобилни браузъри. */
        margin: 0 12px 0 0;
        scroll-snap-align: start;
        border-radius: 0;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(11, 49, 82, 0.10);
    }
    .featured-list > li:last-child {
        margin-right: 0;
    }

    /* Банерите между офертите са с размер за изправен списък и разбиват
       ритъма на плъзгането. */
    .featured-list .our-banner-homepage {
        display: none;
    }

    /* Снимките са с различни пропорции и без това картите се разминават
       по височина, а в редица това си личи. */
    .featured-list .preview img {
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }
}