/**
 * ACF Carousel Custom Styles for Glide.js
 */

/* Carousel Container */
#carousel-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Glide Container (inner) - overlays glass container */
.glide.glide-carousel-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: auto; /* Enable for Glide touch/swipe detection */
}

.glide__track {
    height: 100%;
}

.glide__slides {
    height: 100%;
}

/* Glide Slide - transparent placeholders */
.glide__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    position: relative;
    background: transparent;
    opacity: 0;
    pointer-events: none !important; /* Never block clicks */
}

/* Ensure glass container content is clickable */
#carousel-content-container,
[data-carousel-role="content-container"] {
    position: relative;
    z-index: 15 !important; /* Above glide container */
    pointer-events: auto !important; /* Ensure clicks work */
}

/* Pagination - positioned inside glass container, below CTA, left aligned */
.glide__bullets {
    position: relative !important;
    text-align: left !important;
    margin-top: 2rem !important;
    z-index: 30 !important;
    pointer-events: auto !important;
    display: inline-block;
    cursor: pointer;
}

.glide__bullet {
    width: 12px !important;
    height: 12px !important;
    background: #fff !important;
    opacity: 0.5 !important;
    margin: 0 4px !important;
    display: inline-block !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    border: none !important;
    border-radius: 50% !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
    vertical-align: middle !important;
}

.glide__bullet:hover {
    opacity: 1 !important;
    transform: scale(1.2) !important;
}

.glide__bullet--active {
    opacity: 1 !important;
    background: #fff !important;
    transform: scale(1.2) !important;
}

/* Ensure active state is visible with higher specificity */
.glide__bullets .glide__bullet--active {
    opacity: 1 !important;
    background: #fff !important;
    transform: scale(1.2) !important;
}

/* Navigation Arrows Container */
.glide__arrows {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30 !important;
    pointer-events: none; /* Container doesn't block, children do */
}

/* Navigation Arrows */
.glide__arrow {
    color: #fff !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    border: none!important;
    transition: all 0.3s ease;
    z-index: 31 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 24px !important;
    line-height: 1 !important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    padding: 0;
    margin: 0;
}

.glide__arrow:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.1) !important;
}

.glide__arrow:active {
    transform: translateY(-50%) scale(0.95) !important;
}

/* Font Awesome icons inside arrows */
.glide__arrow i {
    font-size: inherit;
    line-height: 1;
    display: inline-block;
}

.glide__arrow--left {
    left: 20px !important;
    right: auto !important;
}

.glide__arrow--right {
    right: 20px !important;
    left: auto !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .glide__slide {
        min-height: 400px;
    }
    
    .glide__arrow {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
    
    .glide__arrow--left {
        left: 10px;
    }
    
    .glide__arrow--right {
        right: 10px;
    }
}