/* Обертка всего блока (родительский контейнер) */
.wp-block-custom-horizontal-scroll-wrapper {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Липкий контейнер, который фиксируется при скролле */
.hsb-sticky-container {
    position: sticky;
    top: 0;
    height: var(--sticky-height, 100vh);  /* Высота задаётся через CSS-переменную */
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.hsb-sticky-container::-webkit-scrollbar {
  display: none;
}

/* Горизонтальная лента с карточками */
.hsb-horizontal-content {
    display: flex;
    gap: 5vw;
    padding: 0 5vw;
    will-change: transform;
    box-sizing: border-box;
    min-width: 100%;
    width: max-content;
}

/* Карточка элемента */
.wp-block-custom-horizontal-scroll-item {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: var(--card-w-dk, 60vw);
    height: var(--card-h-dk, 60vh);
}

/* Фон карточки */
.hsb-item-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

/* Контейнер для внутренних блоков */
.hsb-item-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Мобильная версия (≤768px) --- */
@media (max-width: 768px) {
    .wp-block-custom-horizontal-scroll-wrapper {
        height: auto !important;
        padding: 50px 0;
    }

    .hsb-sticky-container {
        position: relative;
        height: auto;
        top: auto;
        overflow-x: auto;
        display: flex;
        align-items: flex-start;
        -webkit-overflow-scrolling: touch;
    }

    .hsb-horizontal-content {
        transform: none !important;
        padding: 0 20px;
        gap: 20px;
        width: auto;
    }

    .wp-block-custom-horizontal-scroll-item {
        scroll-snap-align: center;
        width: var(--card-w-mb, 80vw) !important;
        height: var(--card-h-mb, 50vh) !important;
    }
}