/**
 * Elegant Category Banner Styles
 */

.ecb-banner {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    min-height: var(--ecb-height, 300px);
    /* Fluid minimum height */
    /* Ensure visibility if empty */
    display: flex;
    /* Centering helper */
    align-items: center;
    font-family: var(--ecb-font, inherit);
}

.ecb-container {
    max-width: 1280px;
    width: 100%;
    padding: 0 1.25rem;
    box-sizing: border-box;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 1;
}

/* Left Content */
.ecb-content {
    flex: 1;
    /* min-width: 300px; Remove rigid constraint */
}

.ecb-title {
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
    color: inherit;
    /* Inherits from inline style */
}

.ecb-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.6;
    max-width: 600px;
}

/* Right Visual */
.ecb-visual {
    flex: 0 0 var(--ecb-img-width, 50%);
    max-width: var(--ecb-img-width, 50%);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.ecb-image {
    max-width: 100%;
    height: var(--ecb-img-height, 350px);
    max-height: 100%;
    object-fit: contain;
    /* Ok to keep max restriction on img layout, but ensure fluid */
    object-fit: contain;
    border-radius: var(--ecb-radius, 12px);
    box-shadow: var(--ecb-shadow, none);
    /* Optional shadow/animation can be added here */
    transition: transform 0.5s ease;
}

.ecb-image:hover {
    transform: scale(1.05);
    /* Slight Zoom */
}

/* Responsive */
@media (max-width: 992px) {
    .ecb-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .ecb-container {

        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .ecb-visual {
        justify-content: center;
        max-width: 100%;
        width: 100%;
    }

    .ecb-image {
        max-height: 250px;
    }

    .ecb-subtitle {
        margin: 0 auto;
    }
}

/* Slider Styles */
.ecb-slider-wrapper {
    width: 100%;
    /* Max width controlled by parent ecb-visual */
    max-width: 500px;
    /* Limit slider width */
    overflow: hidden;
    position: relative;
    border-radius: var(--ecb-radius, 12px);
    box-shadow: var(--ecb-shadow, none);
}

.ecb-slider {
    display: flex;
    overflow-x: hidden;
    /* Hide scrollbar completely, JS handles scroll */
    /* Removed scroll-snap for JS control */
}

.ecb-slider::-webkit-scrollbar {
    display: none;
}

.ecb-slide {
    min-width: 100%;
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ecb-slide img {
    width: 100%;
    height: var(--ecb-img-height, 350px);
    /* Fixed height for consistency */
    object-fit: cover;
    display: block;
}

/* Responsive Slider */
@media (max-width: 768px) {
    .ecb-slider-wrapper {
        max-width: 100%;
    }

    .ecb-slide img {
        height: 250px;
    }
}