/* Component specific styles */
.accordion10 {
    margin: var(--margin_tb) 0;
    width: 100%;
    overflow: hidden;
    --gap: 1.5rem; /* Gap between items */
}

.accordion10 .accordion-container {
    max-width: var(--custom-content-max-width); /* Wide container for impact */
    margin: 0 auto;
    padding: 0 var(--padding_lr);
}


.accordion10 .accordion-swiper {
    width: 100%;
    position: relative;
    /* Basic height fallback */
    /* min-height: 500px; */
}

/* 
   Structure 
*/
.accordion10 .list-item {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #000;
    box-sizing: border-box;
    /* Smooth transitions for size changes */
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateZ(0); /* Hardware accel */
}

.accordion10 .slide-anchor {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    color: inherit;
    cursor: pointer;
}

.accordion10 .slide-media {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.accordion10 .custom_image_wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.accordion10 .custom_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text Overlay Layer */
.accordion10 .slide-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Fill to allow gradient to cover properly */
    padding: 2.5rem;
    z-index: 2;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 40%, transparent 100%);
    pointer-events: none; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align text to bottom */
    opacity: 1;
}

.accordion10 .slide-title {
    font-size: var(--title_size, 2rem);
    color: var(--title_color, #fff);
    margin-bottom: 0.5rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateY(10px); 
    transition: all 0.5s ease;
    display:flex;
    align-items: center;
    gap:10px;
}
/* Add a subtle decorative arrow or marker if desired (BMW uses one) */

.accordion10 .slide-desc-wrapper {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.5s ease;
}

.accordion10 .slide-desc {
    font-size: var(--description_size, 1rem);
    color: var(--description_color, #f0f0f0);
    line-height: 1.5;
    max-width: 90%; 
    padding-top: 5px;
}

.accordion10 .slide-title i {
        opacity: 0;
        display: none;

    }
/* ---------------------------------------------------------
   DESKTOP: The "BMW" Accordion Effect (Height + Width)
---------------------------------------------------------- */
@media (min-width: 980px) {
    .accordion10 .accordion-swiper {
        height: 580px; /* Fixed high container height */
        overflow: visible;
    }

    .accordion10 .swiper-wrapper {
        display: flex;
        gap: var(--gap);
        width: 100%;
        height: 100%;       /* Full container height */
        align-items: center; /* Vertically center the items! */
    }

    .accordion10 .list-item {
        /* INACTIVE STATE: */
        width: auto !important; 
        flex: 1;            /* Standard share of width */
        height: 380px;      /* Shorter than container */
        opacity: 0.85;      /* Slightly dim inactive */
    }
    
    .accordion10 .list-item .slide-title {
        transform: translateY(0);
    }

    /* 
       INTERACTION LOGIC:
       State management is now class-based (.active) via JS to ensure "Sticky" behavior.
       When accessing the page, the first item is .active by default.
       When hovering an item, it becomes .active.
       When leaving the wrapper, the last .active item REMAINS .active.
    */
    
    /* Active Item State */
    .accordion10 .list-item.active {
        flex: 1.5;          /* Wide */
        height: 100%;       /* Full Height */
        opacity: 1;
        z-index: 10;
        cursor: default;    /* Optional: indicate it's already active */
    }

    
    
    .accordion10 .list-item.active .slide-title {
        font-weight: 700;
        transform: translateY(0);
    }
    
    .accordion10 .list-item.active .slide-desc-wrapper {
        max-height: 360px; 
        opacity: 1;
        margin-top: 1rem;
    }
    
    .accordion10 .list-item.active .slide-title::before {
        opacity: 1;
    }

    .accordion10 .list-item.active .slide-title i {
        opacity: 1;
        display: inline-block;
    }

    /* Hide Nav */
    .accordion10 .swiper-button-prev,
    .accordion10 .swiper-button-next {
        display: none !important;
    }
}
.accordion-swiper .accordionIcon{
    font-size: 18px;
    color: #fff;
    background: #4d4d4d61;
    width: 40px;
    height: 40px;
}
.accordion-swiper .accordionIcon i{
    font-size: 18px;
    color: #fff;
}

/* --------------------------
   Mobile/Tablet Styles
--------------------------- */
@media (max-width: 980px) {
    .accordion10 .accordion-swiper {
        height: auto;
    }
    
    .accordion10 .accordion-container {
        padding: 0;
    }
    
    /* Revert to standard block display height usage */
    .accordion10 .list-item {
        height: 100%; /* Fill slide height */
        width: 100%;
        opacity: 1;
    }
.accordion10 .list-item .slide-title i {
        opacity: 1;
        display: inline-block;
    }
    .accordion10 .swiper-slide {
        height: 65vw; 
        max-height: 500px;
        flex: 0 0 auto !important; 
        width: 100% !important; 
    }

    .accordion10 .slide-desc-wrapper {
        max-height: 100px;
        opacity: 1;
        margin-top: 0.5rem;
    }

    
    .accordion10 .slide-text {
        padding: 2rem 1.5rem;
    }
}