/* =====================================================
   ILYK — Слайдер карток [ilyk_slider]
   css/slider.css
   ===================================================== */

.ilyk-slider {
    position: relative;
    width: 100%;
    overflow: visible;
}

/* Clip-обгортка треку — JS створює динамічно.
   overflow:hidden обрізає картки що виходять за межі,
   але не впливає на стрілки (вони поза clip, на .ilyk-slider) */
.ilyk-slider__track-clip {
    overflow: hidden;
    /* Даємо місце тіні карток — padding + негативний margin компенсує розмір.
       Горизонтальний padding збільшує контейнер, width: calc компенсує — 
       JS бачить ту саму ширину, картки не звужуються. */
    padding: 50px;
    margin: -50px;
    width: calc(100% + 100px);
    box-sizing: content-box;
}

/* Трек */
.ilyk-slider__track {
    display: flex;
    align-items: stretch;
    gap: var(--ilyk-gap, 24px);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    /* visibility: hidden задається JS до першого goTo — zoom bug fix */
}

/* Слайд */
.ilyk-slider__track > * {
    flex: 0 0 calc((100% - (var(--ilyk-per-view, 3) - 1) * var(--ilyk-gap, 24px)) / var(--ilyk-per-view, 3));
    min-width: 0;
}

/* Скасовуємо max-width карток всередині слайдера */
.ilyk-slider .ilyk-podcast-card,
.ilyk-slider .ilyk-video-card,
.ilyk-slider .ilyk-article-card,
.ilyk-slider .ilyk-event-card,
.ilyk-slider .ilyk-news-card,
.ilyk-slider .ilyk-course-card {
    max-width: none;
    margin: 0;
}

/* Картки що частково виходять за межі — напівпрозорі.
   JS додає клас .ilyk-slide--peek на картки поза per-view */
.ilyk-slider__track > .ilyk-slide--peek {
    opacity: 0.25;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* =====================================================
   СТРІЛКИ
   ===================================================== */
.ilyk-slider__arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    transform: none;
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(var(--ilyk-clr-primary-rgb), 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(var(--ilyk-clr-primary-rgb), 0.25), inset 0 1px 0 rgba(255,255,255,0.15);
    transition: box-shadow 0.22s ease, transform 0.22s ease, opacity 0.22s ease;
    /* Завжди видимі, але тихо — щоб не заважали */
    opacity: 0.42;
    pointer-events: auto;
}
.ilyk-slider:hover .ilyk-slider__arrow {
    opacity: 1;
}
.ilyk-slider__arrow:hover {
    box-shadow: 0 6px 20px rgba(var(--ilyk-clr-primary-rgb), 0.42), inset 0 1px 0 rgba(255,255,255,0.15);
    transform: translateY(-2px);
}
.ilyk-slider__arrow--prev { left: -56px; }
.ilyk-slider__arrow--next { right: -56px; }
.ilyk-slider__arrow:disabled {
    opacity: 0.2 !important;
    cursor: default;
    pointer-events: none;
}

/* Стрілки ховаються тільки на мобайлі через max-width — не через pointer media,
   бо (hover: none) некоректно спрацьовує на тачпад-ноутбуках і планшетах з мишею. */

/* =====================================================
   ТОЧКИ (pagination dots)
   ===================================================== */
.ilyk-slider__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}
.ilyk-slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid #d0d0d0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}
.ilyk-slider__dot:hover {
    border-color: var(--ilyk-clr-primary);
    background: rgba(var(--ilyk-clr-primary-rgb), 0.2);
}
.ilyk-slider__dot--active {
    width: 28px;
    border-radius: 50px;
    border-color: var(--ilyk-clr-primary);
    background: var(--ilyk-clr-primary);
}

/* =====================================================
   АДАПТИВ
   ===================================================== */
@media (max-width: 768px) {
    /* На мобілці — overflow:hidden, стрілки ховаємо */
    .ilyk-slider {
        overflow: hidden;
    }

    .ilyk-slider__arrow {
        display: none !important;
    }
}