/**
 * BW Gallery Slider Block - Front-end Styles
 */

/* Basic container styling */
.bw-gallery-slider {
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Make gallery full-width when outside Kadence rows */
.entry-content > .bw-gallery-slider {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: 100vw;
    width: 100vw;
}

/* But inside Kadence rows, keep it within the row */
.wp-block-kadence-rowlayout .bw-gallery-slider {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Error/empty state */
.bw-gallery-slider-empty {
    padding: 30px;
    background: #f8f8f8;
    border: 1px dashed #ccc;
    text-align: center;
    color: #888;
}

/* Main slider container */
.bw-gallery-slider-container {
    position: relative;
    width: 100%;
    height: 640px;
    display: flex;
}

/* Main slide - takes 80% of width */
.bw-gallery-main {
    width: 80%;
    height: 640px;
    position: relative;
}

.bw-gallery-main .slick-slide {
    height: 640px;
}

.bw-gallery-main .slide {
    height: 640px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Side content container - 20% width */
.bw-gallery-side {
    width: 20%;
    display: flex;
    flex-direction: column;
}

/* Next slide outer container - for positioning */
.bw-gallery-next-outer {
    position: relative;
    height: 530px;
    overflow: hidden; /* Ensure animation stays within bounds */
}

/* Next slide preview - takes 20% of width */
.bw-gallery-next {
    height: 530px;
    position: relative;
    width: 100%;
    overflow: hidden; /* Ensure animation stays within bounds */
}

.bw-gallery-next .slick-slide {
    height: 530px;
    transition: transform 0.7s ease; /* Match the main slider animation */
}

.bw-gallery-next .slide {
    height: 530px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Arrow overlay for next image */
.bw-gallery-next-arrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 530px;
    z-index: 9999;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: all;
    background-color: rgba(0, 0, 0, 0.5);
    transition: transform 0.7s ease; /* Match the slide animation */
}

.bw-gallery-next-arrow svg {
    width: 60px;
    height: 60px;
    fill: white;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.7));
}

/* Navigation indicator container */
.bw-gallery-indicators {
    height: 110px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

/* Individual indicator number */
.bw-gallery-indicator {
    font-size: 11px; /* Reduced from 16px to 11px */
    font-weight: bold;
    color: #58595b;
    cursor: pointer;
    padding: 5px 8px;
    transition: color 0.3s ease;
}

/* Active indicator */
.bw-gallery-indicator.active {
    color: #ff7760;
}

/* Single caret style for "more images" indicator */
.bw-gallery-indicator.more-indicator {
    font-size: 12px; /* Slightly larger for the » symbol */
    padding: 5px 6px;
}

/* Mobile navigation arrows */
.bw-gallery-mobile-nav {
    display: none;
}

/* Slick overrides for smooth transitions */
.bw-gallery-slider .slick-slider {
    margin-bottom: 0;
    overflow: hidden; /* Ensure animation stays within bounds */
}

.bw-gallery-slider .slick-list,
.bw-gallery-slider .slick-track {
    height: 100%;
}

.bw-gallery-slider .slick-slide {
    position: relative;
    transition-timing-function: ease; /* Make the animation smoother */
}

/* For slide animation, ensure space is visible */
.bw-gallery-slider .slick-track {
    display: flex;
    align-items: stretch;
}

/* Remove default slick arrow content */
.bw-gallery-slider .slick-prev:before,
.bw-gallery-slider .slick-next:before {
    content: none !important;
}

/* Mobile arrows - only visible on small screens */
.bw-gallery-slider .slick-arrow {
    position: absolute;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
    width: 42px; /* Square box size */
    height: 42px; /* Square box size */
    background: #58595b; /* Grey background */
    border-radius: 0; /* Square shape */
    display: none; /* Hidden on desktop */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: none;
    outline: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.bw-gallery-slider .slick-arrow:hover {
    background: #ff7760; /* Orange on hover */
}

.bw-gallery-slider .slick-arrow svg {
    width: 24px;
    height: 24px;
    fill: white; /* White arrow */
}

.bw-gallery-slider .slick-prev {
    left: 15px;
}

.bw-gallery-slider .slick-next {
    right: 15px;
}

/* Responsive styling */
@media (max-width: 1200px) {
    .bw-gallery-slider-container {
        height: 540px;
    }
    
    .bw-gallery-main {
        height: 540px;
    }
    
    .bw-gallery-main .slick-slide {
        height: 540px;
    }
    
    .bw-gallery-main .slide {
        height: 540px;
    }
    
    .bw-gallery-next-outer {
        height: 430px;
    }
    
    .bw-gallery-next {
        height: 430px;
    }
    
    .bw-gallery-next .slick-slide {
        height: 430px;
    }
    
    .bw-gallery-next .slide {
        height: 430px;
    }
    
    .bw-gallery-next-arrow {
        height: 430px;
    }
    
    .bw-gallery-indicators {
        height: 110px;
    }
}

@media (max-width: 768px) {
    .bw-gallery-slider-container {
        height: 400px;
        display: block;
    }
    
    .bw-gallery-main {
        width: 100%;
        height: 400px;
    }
    
    .bw-gallery-main .slick-slide {
        height: 400px;
    }
    
    .bw-gallery-main .slide {
        height: 400px;
    }
    
    .bw-gallery-side {
        display: none;
    }
    
    /* Hide dot indicators on mobile */
    .bw-gallery-mobile-nav {
        display: none;
    }
    
    /* Show custom mobile arrow navigation */
    .bw-gallery-slider .slick-arrow {
        display: flex !important;
    }
    
    /* Ensure buttons are visible above slider content */
    .bw-gallery-slider .slick-prev,
    .bw-gallery-slider .slick-next {
        z-index: 999;
    }
    
    /* Override any parent styles that might affect arrow display */
    .wp-block-kadence-rowlayout .bw-gallery-slider .slick-arrow {
        display: flex !important;
    }
}

@media (max-width: 480px) {
    .bw-gallery-slider-container {
        height: 300px;
    }
    
    .bw-gallery-main {
        height: 300px;
    }
    
    .bw-gallery-main .slick-slide {
        height: 300px;
    }
    
    .bw-gallery-main .slide {
        height: 300px;
    }
    
    /* Adjust arrow position for small screens */
    .bw-gallery-slider .slick-prev {
        left: 10px;
    }
    
    .bw-gallery-slider .slick-next {
        right: 10px;
    }
    
    /* Smaller arrows on very small screens */
    .bw-gallery-slider .slick-arrow {
        width: 36px;
        height: 36px;
    }
    
    .bw-gallery-slider .slick-arrow svg {
        width: 20px;
        height: 20px;
    }
    
    /* Make sure no other indicators appear */
    .bw-gallery-mobile-indicators,
    .bw-gallery-mobile-indicator,
    .slick-dots {
        display: none !important;
    }
}