/* GBM Slider — front-end styles (v1.1.0)
 * Lightweight, no dependencies, CLS-free, FOUC-resistant.
 *
 * Layout strategy:
 *  - Container uses the classic padding-bottom % hack to reserve a 1800:518
 *    aspect ratio. Universally honored, harder for themes/optimizers to
 *    override than the modern aspect-ratio property.
 *  - Slides are absolutely positioned and fill the reserved box.
 *  - Images use object-fit: contain so the full image is always visible —
 *    never cropped to the center on narrow viewports.
 */

.gbm-slider {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    /* 518 / 1800 = 28.7778% — matches the recommended slide image ratio */
    padding: 0 0 28.7778% 0;
    margin: 0;
    overflow: hidden;
    background: #f5f5f5;
    line-height: 0;
    box-sizing: border-box;
}

.gbm-slider__track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* ---- Slides (shared) ---- */
.gbm-slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    pointer-events: none;
}
.gbm-slider__slide.is-active {
    pointer-events: auto;
    z-index: 2;
}
.gbm-slider__slide a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.gbm-slider__slide img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    /* Full image always visible, scaled proportionally — no center-crop */
    object-fit: contain;
    object-position: center center;
}

/* ---- Fade variant ---- */
.gbm-slider--fade .gbm-slider__slide {
    opacity: 0;
    transition: opacity var(--gbm-duration, 800ms) ease-in-out;
    will-change: opacity;
}
.gbm-slider--fade .gbm-slider__slide.is-active {
    opacity: 1;
}

/* ---- Slide (right-to-left) variant ---- */
.gbm-slider--slide .gbm-slider__slide {
    transform: translateX(100%);
    transition: transform var(--gbm-duration, 800ms) ease-in-out;
    will-change: transform;
}
.gbm-slider--slide .gbm-slider__slide.is-active {
    transform: translateX(0);
}
.gbm-slider--slide .gbm-slider__slide.is-leaving {
    transform: translateX(-100%);
    z-index: 1;
}

/* ---- Dots ---- */
.gbm-slider__dots {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 5;
    padding: 0;
    margin: 0;
    line-height: 1;
}
.gbm-slider__dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    background: transparent;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.45);
    transition: background-color 200ms ease;
    -webkit-appearance: none;
    appearance: none;
}
.gbm-slider__dot.is-active {
    background: #fff;
}
.gbm-slider__dot:hover,
.gbm-slider__dot:focus-visible {
    background: rgba(255, 255, 255, 0.75);
    outline: none;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .gbm-slider__slide {
        transition: none !important;
    }
}

/* ---- Mobile tweaks ---- */
@media (max-width: 600px) {
    .gbm-slider__dots {
        bottom: 8px;
        gap: 6px;
    }
    .gbm-slider__dot {
        width: 8px;
        height: 8px;
        border-width: 1.5px;
    }
}