/* ===========================================
   BC Carousel Core — Critical Layout CSS
   Loaded in <head> to prevent FOUC.
   Slides get correct widths via CSS custom properties
   set as inline styles by the PHP template.
   =========================================== */

/* --- Container --- */
.bc-slider {
    overflow: hidden;
    position: relative;
}

/* --- Track (flex row of slides) --- */
.bc-slider__track {
    display: flex;
    will-change: transform;
    touch-action: pan-y;
    /* JS sets transform: translateX(...) for sliding */
}

/* Smooth transition once JS has initialized */
.bc-slider--ready .bc-slider__track {
    transition: transform var(--bc-slider-speed, 300ms) ease;
}

/* --- Slide width from CSS custom properties --- */
.bc-slider__slide {
    flex-shrink: 0;
    min-width: 0;
    /* Default: use desktop count. gap = spaceBetween from PHP */
    width: calc(
        (100% - (var(--bc-slides-desktop, 3) - 1) * var(--bc-slider-gap, 16px))
        / var(--bc-slides-desktop, 3)
    );
    margin-right: var(--bc-slider-gap, 16px);
}

/* Last visible slide in each "page" should not have right margin,
   but since we slide by transform this is fine — the overflow: hidden
   on .bc-slider clips it. No action needed. */

/* --- Responsive slide counts --- */
@media (max-width: 1023px) {
    .bc-slider__slide {
        width: calc(
            (100% - (var(--bc-slides-tablet, 2) - 1) * var(--bc-slider-gap, 16px))
            / var(--bc-slides-tablet, 2)
        );
    }
}

@media (max-width: 639px) {
    .bc-slider__slide {
        width: calc(
            (100% - (var(--bc-slides-mobile, 1) - 1) * var(--bc-slider-gap, 16px))
            / var(--bc-slides-mobile, 1)
        );
    }
}

/* --- Pagination --- */
.bc-slider__pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 48px;
}

.bc-slider__dot {
    width: 80px;
    height: 2px;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.3s ease;
    border-radius: 0;
    background: currentColor;
    opacity: 0.3;
}

.bc-slider__dot--active {
    opacity: 1;
}

/* Mobile: smaller dots */
@media (max-width: 767px) {
    .bc-slider__dot {
        width: 50px;
    }
}