/* =====================================================================
   CIBOR — Aanbod slider (v1.0)
   Блок core/columns з класом .aanbod-colums-slider-box перетворюється
   JS-ом (js/aanbod-slider.js) у безкінечну горизонтальну стрічку:
     • усі колонки в один ряд, однакова ширина/висота
     • плавна зациклена автопрокрутка
     • пауза на hover, перетягування мишею / пальцем
   Специфічність навмисно висока: main.css вантажиться ПІСЛЯ enqueued
   стилів і має правила з !important для .aanbod-colums.
   ===================================================================== */

:root {
    --aanbod-slide-w:   clamp(260px, 22vw, 340px);
    --aanbod-slide-gap: 20px;
}

/* Контейнер: замість grid — блок з прихованим переповненням */
.wp-block-columns.aanbod-colums.aanbod-colums-slider-box {
    display: block !important;
    grid-template-columns: none !important;
    width: 100%;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;             /* вертикальний скрол пальцем лишається, горизонталь — наш drag */
    gap: 0;
}
.wp-block-columns.aanbod-colums.aanbod-colums-slider-box.is-dragging { cursor: grabbing; }

/* Трек, який рухається */
.aanbod-slider__track {
    display: flex;
    align-items: stretch;
    gap: var(--aanbod-slide-gap);
    width: max-content;
    will-change: transform;
    backface-visibility: hidden;
}

/* Слайди: фіксована ширина, відступи у px (відсотки рахувались би від
   ширини треку, а не слайда) */
.aanbod-colums.aanbod-colums-slider-box .aanbod-colums__col {
    /* !important: core/columns пише inline style="flex-basis:…%" на кожну колонку */
    flex: 0 0 var(--aanbod-slide-w) !important;
    width: var(--aanbod-slide-w) !important;
    max-width: none !important;
    /* однакова висота всіх карток: core ставить align-self:flex-start
       колонкам з класом .is-vertically-aligned-top */
    align-self: stretch !important;
    height: auto !important;
    min-height: 100%;
    margin: 0;
    padding: 44px 24px 60px 44px;
    /* контент: заголовок зверху, текст притиснутий донизу (як у решті aanbod-блоків) */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.aanbod-colums.aanbod-colums-slider-box .aanbod-colums__col a,
.aanbod-colums.aanbod-colums-slider-box .aanbod-colums__col img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* Під час drag не спрацьовують hover-ефекти й кліки по внутрішніх лінках */
.aanbod-colums-slider-box.is-dragging .aanbod-colums__col,
.aanbod-colums-slider-box.is-dragging .aanbod-colums__col * {
    pointer-events: none;
}

/* Fallback без JS: звичайний горизонтальний скрол */
.no-js .wp-block-columns.aanbod-colums.aanbod-colums-slider-box,
.wp-block-columns.aanbod-colums.aanbod-colums-slider-box:not(.is-ready) {
    overflow-x: auto;
    display: flex !important;
    gap: var(--aanbod-slide-gap);
}

@media (max-width: 991px) {
    :root { --aanbod-slide-w: clamp(240px, 34vw, 300px); }
    .aanbod-colums.aanbod-colums-slider-box .aanbod-colums__col { padding: 36px 20px 50px 36px; }
}
@media (max-width: 767px) {
    :root { --aanbod-slide-w: min(76vw, 300px); --aanbod-slide-gap: 14px; }
    .aanbod-colums.aanbod-colums-slider-box .aanbod-colums__col { padding: 30px 18px 44px 30px; }
}