/**
 * Section: Quality Carousel (Accordion/Fanning Layout)
 * 
 * Design: Releaf.bio style - flex-based push animation
 * Content box appears from LEFT, pushes image to RIGHT
 * Max 4 cards
 * 
 * @package lifesolutions
 */

.section-quality-carousel {
    background-color: #F6F6F6;
    padding: 101px 0 60px;
}

.quality-carousel__title {
    color: #1A1A1A;
    margin: 0 0 48px;
}

/* ==========================================================================
   Accordion Container
   ========================================================================== */
.quality-carousel__accordion {
    display: flex;
    gap: 20px;
    height: 500px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

/* ==========================================================================
   Card Base Styles - FLEX ROW for push animation
   ========================================================================== */
.quality-carousel__card {
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    height: 500px;
    position: relative;
    /* Key animation: flex transition */
    transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1.3;
}


/* ==========================================================================
   Content Area - LEFT SIDE (hidden by default, reveals on hover)
   Uses clip-path animation so TEXT STAYS FIXED (no sliding)
   ========================================================================== */
.quality-carousel__card-content {
    background-color: #004789;
    padding: 40px 51px 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}


/* ==========================================================================
   Image Area - RIGHT SIDE (shifts right when content expands)
   ========================================================================== */


.quality-carousel__card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}



/* Dark overlay for collapsed cards */
@media (min-width: 900px) {
    .quality-carousel__card:not(.is-active)::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 2;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    /* Subtle zoom on expanded card image */
    .quality-carousel__card.is-active .quality-carousel__card-bg img {
        transform: scale(1.05);
    }

    .quality-carousel__card:not(.is-active):hover::before {
        opacity: 0.5;
    }

    .quality-carousel__card-bg {
        position: relative;
        flex: 1;
        min-width: 0;
        height: 100%;
        overflow: hidden;
        /* Shift via margin-right when expanded */
        margin-right: 0;
        transition: margin-right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Push image right when content is visible */
    .quality-carousel__card.is-active .quality-carousel__card-bg {
        margin-right: calc((100vw - (100vw - 1312px))/ var(--count-card) - 19px);
    }

    .quality-carousel__card-content {
        /* FIXED position and width - text won't move */
        position: absolute;
        right: 0;
        left: auto;
        top: 0;
        bottom: 0;
        width: calc((100vw - (100vw - 1312px))/ var(--count-card) - 19px);
        z-index: 5;
        /* Hidden via clip-path - clips from left edge (content on right) */
        clip-path: inset(0 0 0 100%);
        opacity: 0;
        /* Transition: clip-path reveals, then opacity fades */
        transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.4s ease 0.1s;
    }

    /* Expanded state - content fully visible */
    .quality-carousel__card.is-active .quality-carousel__card-content {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }


    /* Expanded state - takes more space */
    .quality-carousel__card.is-active {
        flex: 4.23;
    }
}

/* ==========================================================================
   Content Elements
   ========================================================================== */
/* Number Badge */
.quality-carousel__card-number {
    color: #fff;
    border-radius: 0;
    display: inline-block;
    margin-bottom: 0;
    align-self: flex-start;
    margin: 0;
    white-space: nowrap;
}

/* Title */
.quality-carousel__card-title {
    color: #FFFFFF;
    margin: 0 0 8px;
}

.quality-carousel__card-description {

    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    max-height: 300px;
    overflow-y: auto;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
}

/* Webkit browsers (Chrome, Safari, Edge) */
.quality-carousel__card-description::-webkit-scrollbar {
    width: 4px;
}

.quality-carousel__card-description::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.quality-carousel__card-description::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.quality-carousel__card-description::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Collapsed Title Overlay (on image, visible when collapsed)
   ========================================================================== */
.quality-carousel__card-collapsed-title {
    position: absolute;
    bottom: 59px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.3s ease;
    padding: 0 24px;
}

.quality-carousel__card-collapsed-title span {

    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #FFFFFF;
    display: block;
    text-align: left;
}

/* Number title at top of collapsed card */
.quality-carousel__card-number-title {
    position: absolute;
    left: 0;
    padding: 0 24px;
    color: #fff;
    z-index: 10;
    margin: 40px 0;
}

/* Hide collapsed title when expanded */
.quality-carousel__card.is-active .quality-carousel__card-collapsed-title,
.quality-carousel__card.is-active .quality-carousel__card-number-title {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 1200px) {
    .quality-carousel__accordion {
        height: 500px;
    }

    .quality-carousel__card-content {
        padding: 28px 30px;
        width: 240px;
    }

    .quality-carousel__card.is-active .quality-carousel__card-bg {
        margin-right: 240px;
        margin-left: 0;
    }

    .quality-carousel__card-collapsed-title span,
    .quality-carousel__card-title {
        font-size: 16px;
        line-height: 24px;
    }
}

@media (max-width: 1024px) {
    .quality-carousel__accordion {
        height: 450px;
        gap: 12px;
    }

    .quality-carousel__card {
        border-radius: 20px;
        height: 450px;
    }

    .quality-carousel__card-collapsed-title,
    .quality-carousel__card-number-title {
        padding: 0 16px;
    }

    .quality-carousel__card-content {
        padding: 24px 16px;
        width: 200px;
    }

    .quality-carousel__card-collapsed-title span,
    .quality-carousel__card-title {
        font-size: 20px;
        line-height: 28px;
    }

    .quality-carousel__card-description {
        font-size: 15px;
        line-height: 22px;
    }

    .quality-carousel__card.is-active .quality-carousel__card-bg {
        margin-right: 200px;
        margin-left: 0;
    }
}

/* Mobile: Stack vertically */
@media (max-width: 899px) {
    .section-quality-carousel {
        padding: 74px 0 9px;
    }

    .quality-carousel__title {
        margin-bottom: 32px;
    }

    .quality-carousel__accordion {
        flex-wrap: wrap;
        height: auto;
        gap: 20px;
    }


    .quality-carousel__card {
        width: calc(50% - 10px);
    }


    /* Collapsed card - horizontal bar */
    .quality-carousel__card {
        flex: none !important;
        border-radius: 20px;
        flex-direction: column;
        height: auto;
    }

    .quality-carousel__card.is-active .quality-carousel__card-bg,
    .quality-carousel__card .quality-carousel__card-bg {
        flex: none;
        height: 249px;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        /* Reset margin for mobile */
    }

    .quality-carousel__card.is-active .quality-carousel__card-content,
    .quality-carousel__card .quality-carousel__card-content {
        position: static;
        /* Reset position for mobile */
        clip-path: none;
        /* Disable clip-path on mobile */
        flex: none;
        width: 100%;
        min-width: 0;
        padding: 24px;
        opacity: 1;
    }

    .quality-carousel__card-title {
        font-size: 20px;
    }

    .quality-carousel__card-number {
        font-size: 15px;
        line-height: 22px;
        padding: 5px 0;
        margin-bottom: 8px;
    }

    .quality-carousel__card-number-title {
        opacity: 0;
    }

    .quality-carousel__card-collapsed-title {
        bottom: 50%;
        transform: translateY(50%);
        text-align: left;
        left: 20px;
        right: 20px;
        opacity: 0;
    }

    .quality-carousel__card-collapsed-title span {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .quality-carousel__card {
        width: 100%;
    }

    .quality-carousel__title {
        margin-bottom: 31px;
    }

    .quality-carousel__card.is-active .quality-carousel__card-content,
    .quality-carousel__card .quality-carousel__card-content {
        padding: 20px 30px 30px;
    }

    .quality-carousel__card-title {
        font-size: 20px;
        margin-bottom: 9px;
    }

    .quality-carousel__card-description {
        font-size: 15px;
        line-height: 22px;
    }
}