/* =====================================================================
   CIBOR — Hero-слайдер на головній (.slider-header): фото замість відео
   ---------------------------------------------------------------------
   Шар .slider-header__photos створює js/hero-slider.js. Фото лежать
   абсолютно під контентом (z-index 0), затемнення Stackable
   (.stk-955bba2:before, 30%) лишається зверху. Активне фото плавно
   проявляється і трохи "дихає" (повільний zoom).
   Пункти [slide]: курсор і hover — без прив'язки до старих класів
   slider-header__thuiszwembaden тощо (5-й пункт їх дублює).
   ===================================================================== */

.slider-header { position: relative; overflow: hidden; }

/* !important — Stackable ставить усім дітям блоку з фоном
   position:relative; z-index:3 (тому й відео мало inline-стилі) */
.slider-header__photos {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    overflow: hidden;
    background: #0b1f33;
    pointer-events: none;
}
.slider-header__photo {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity .9s ease;
    will-change: opacity, transform;
}
.slider-header__photo.is-active {
    opacity: 1;
    animation: cibor-hero-zoom 7s ease-out forwards;
}
@keyframes cibor-hero-zoom {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}

/* контент і затемнення — над фото */
.slider-header::before { z-index: 1; }
.slider-header > .stk-block-column__content { position: relative; z-index: 2; }

/* пункти слайдера: клікабельні, підсвітка при hover */
.slider-header .wp-block-stackable-column[slide] { cursor: pointer; }
.slider-header .wp-block-stackable-column[slide] .stk-block-text__text {
    transition: color .3s ease !important;
}
.slider-header .wp-block-stackable-column[slide]:hover .stk-block-text__text {
    color: var(--geel) !important;
}
/* 5 пунктів у ряд (у main.css було 24% під 4 пункти; Stackable задає
   flex-basis inline, тому перекриваємо і flex, і width) */
@media (min-width: 768px) {
    .slider-header .stk-a4975d6-column > div {
        flex: 0 0 19% !important;
        width: 19% !important;
        max-width: 19% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .slider-header__photo { transition: none; }
    .slider-header__photo.is-active { animation: none; transform: none; }
}