/* Карточка круиза в карусели (единый вертикальный лейаут, без медиазапросов).
   Локальные классы с префиксом sc-* не конфликтуют со стилями страницы. */
.px-2 > .item.list,
.px-2 .item {
    width: 100%;
    height: auto;
    margin: 0;
    border: 1px solid #dce3e8;
    border-radius: 14px;
    background: #ffffff;
    /* overflow: hidden; */
}

.sc-card {
    /* padding: 10px 12px; */
    border-radius: 14px;
    background: #ffffff;
}

.sc-layout {
    display: block;
    min-height: unset;
}

.sc-info {    
        padding: 10px 0px 12px;    
}
.sc-photo-xs {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 12px;
}

.sc-header {
    display: block;
}

.sc-title-row {
    display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:         "title title"        "price days";
        gap: 6px 12px;
        align-items: flex-start;
        justify-content: space-between;
    width: 100%;
}

.sc-title {
    color: #0057b7;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.15;
    margin: 0;
    text-align: left;
}

.sc-title a {
    color: inherit;
    text-decoration: none;
}

.sc-days {
    color: #01910d;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.2;
    white-space: nowrap;
    margin-top: 0.7rem;
    text-align: left;
}

.sc-route {
    color: #0f2b4c;
    line-height: 1.2;
    margin-bottom: 10px;
    font-size: 1.05rem;
}

.sc-dates-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin-bottom: 10px;
    font-size: 1rem;
}

.sc-date-item {
    display: block;
    color: #555;
}

.sc-info > .sc-price-row:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.sc-price-row {
    display: flex;
    /* align-items: baseline; */
    flex-wrap: wrap;
    justify-content: space-between;
    /* padding: 0 5px; */
    
}

.px-2 img {
    max-width: 100%;
}
.sc-title-row > div {
        grid-area:title price;
        margin-left: 0;
        text-align: left;
    }

.sc-price {
        font-size: 1.1rem;
        font-weight: 700;
        /* line-height: 1; */
        color: #2cafe9;
    }

.sc-priceman {
        font-size: 1.1rem;        
        color: #2cafe9;
    }
.sc-available-cabins {
    font-size: 1rem;
    color: #ff6f00;
}

/* ============================================================
   Нативная карусель «Похожие круизы» (scroll-snap, без slick)
   Горизонтальная прокрутка элемента .cruise-carousel, слайды —
   прямые дети .px-2. Одинаковая высота карточек достигается
   flex-растягиванием: .px-2 — flex-контейнер, карточка тянется
   до самой высокой, а «резиновый» блок маршрута выравнивает низ.
   ============================================================ */

.cc-wrap {
    position: relative;
}

/* Контейнер-лента */
.cruise-carousel {
    display: flex;
    align-items: stretch;
    gap: 0px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.cruise-carousel::-webkit-scrollbar {
    display: none;
}

/* Слайд: 4 в ряд на широком экране, с прилипанием */
.cruise-carousel > .px-2 {
    display: flex;
    flex: 0 0 calc((100% - 3 * 16px) / 4);
    max-width: calc((100% - 3 * 16px) / 4);
    scroll-snap-align: start;
}

/* Ширина слайда на меньших экранах */
@media (max-width: 1200px) {
    .cruise-carousel > .px-2 {
        flex-basis: calc((100% - 2 * 16px) / 3);
        max-width: calc((100% - 2 * 16px) / 3);
    }
}

@media (max-width: 992px) {
    .cruise-carousel > .px-2 {
        flex-basis: calc((100% - 16px) / 2);
        max-width: calc((100% - 16px) / 2);
    }
}

@media (max-width: 576px) {
    .cruise-carousel > .px-2 {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* Кнопки-стрелки */
.cc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #17669b91;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.cc-nav:hover {
    background: #104c74b9;
}

.cc-prev {
    left: -8px;
}

.cc-next {
    right: -8px;
}

@media (max-width: 576px) {
    .cc-nav {
        display: none;
    }
}

/* Цепочка растягивания до содержимого карточки */
.cruise-carousel > .px-2 > .item.list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: auto;
}

/* .row bootstrap даёт отрицательные margins — обнуляем, иначе карточку обрезает.
   flex-wrap: nowrap + flex:1 чтобы .row > div тоже растягивался */
.cruise-carousel .item.list > .row {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    margin: 0;
}

/* .row > div — промежуточный враппер, должен передавать высоту дальше */
.cruise-carousel .item.list > .row > div {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
}

.cruise-carousel .item.list .sc-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
}

.cruise-carousel .sc-layout {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: unset;
}

.cruise-carousel .sc-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

/* Маршрут растягивается, поэтому низ карточек выравнивается */
.cruise-carousel .sc-info > .sc-route {
    flex: 1 1 auto;
}






/* Правки поверх slide_card.css (перенесите в него при желании) */
.cruise-carousel { gap: 5px; }              /*    gap учтён в flex-basis слайдов */
.cruise-carousel > .px-2 { padding: 0 !important; } /* убираем padding Bootstrap, иначе будет двойной отступ */
/* .cruise-carousel .sc-info { padding: 12px; }    внутренние поля карточки */
.cc-nav:disabled { opacity: .35; cursor: default; }

/* ---------- Эффект прокрутки ---------- */
/* Плавностью управляет JS (easing), нативный smooth отключаем, чтобы не конфликтовал */
.cruise-carousel { scroll-behavior: auto; padding: 8px 0 12px; }

/* Слайды у краёв плавно уменьшаются и затухают. --v (0..1) = доля видимой части слайда */
.cruise-carousel > .px-2 {
  --v: 1;
  opacity: calc(.4 + .6 * var(--v));
  transform: scale(calc(.93 + .07 * var(--v)));
  transform-origin: center bottom;
  will-change: transform, opacity;
}

/* На время анимации/перетаскивания отключаем прилипание, иначе браузер «перебивает» JS */
.cruise-carousel.is-animating,
.cruise-carousel.is-dragging { scroll-snap-type: none; }

/* Перетаскивание мышью */
.cruise-carousel { cursor: grab; }
.cruise-carousel.is-dragging { cursor: grabbing; user-select: none; }
.cruise-carousel img { -webkit-user-drag: none; }

@media (prefers-reduced-motion: reduce) {
  .cruise-carousel > .px-2 { opacity: 1; transform: none; }
}