/* ==========================================================================
   iForest Premium Interactive Sticky Stacking Roadmap Timeline
   ========================================================================== */

/* Ensure Elementor columns, sections, widgets and page structures containing the timeline allow sticky behavior */
.elementor-section:has(.iforest-timeline-stack),
.elementor-container:has(.iforest-timeline-stack),
.elementor-row:has(.iforest-timeline-stack),
.elementor-column:has(.iforest-timeline-stack),
.elementor-column-wrap:has(.iforest-timeline-stack),
.elementor-widget-wrap:has(.iforest-timeline-stack),
.elementor-widget-container:has(.iforest-timeline-stack),
.elementor-widget:has(.iforest-timeline-stack),
article:has(.iforest-timeline-stack),
main:has(.iforest-timeline-stack),
#primary:has(.iforest-timeline-stack),
#content:has(.iforest-timeline-stack) {
    overflow: visible !important;
}

.iforest-timeline-stack {
    position: relative;
    max-width: 1100px;
    margin: 4vw auto;
    padding: 2vw 0 10vw 0;
}

/* Individual Stacking Card Wrapper */
.timeline-stack-item {
    position: sticky;
    width: 100%;
    margin-bottom: 25vh; /* Provides scroll depth before the next card stacks */
    transform-origin: center top;
}

.timeline-stack-item:last-child {
    margin-bottom: 0;
}

/* Main Card Body styling */
.timeline-stack-card {
    position: relative;
    background: #fff;
    border-radius: 1.5vw;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
    padding: 3.5vw 3vw 3vw 3vw;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out, filter 0.15s ease-out;
    transform-origin: center top; /* Scales from top-center to anchor stacking visual effect */
}

/* Floating Year Badge */
.timeline-stack-badge {
    position: absolute;
    top: -20px;
    left: 40px;
    background: #6eaf20;
    color: #fff;
    padding: 6px 22px;
    font-size: 1.1vw;
    font-weight: 700;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(110, 175, 32, 0.35);
    z-index: 50;
    font-family: 'Work Sans', sans-serif;
}

/* Inner Layout Flex structure */
.timeline-stack-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3vw;
}

.timeline-stack-inner.reverse {
    flex-direction: row-reverse;
}

/* Text Container */
.timeline-stack-text {
    width: 50%;
}

.timeline-stack-title {
    font-size: 1.8vw;
    font-weight: 700;
    color: #000;
    margin: 0 0 1vw 0;
    font-family: 'Work Sans', sans-serif;
}

.timeline-stack-desc {
    font-size: 1.1vw;
    line-height: 1.7vw;
    color: #555;
    margin: 0;
    font-family: 'Work Sans', sans-serif;
}

/* Image Container */
.timeline-stack-image {
    width: 46%;
    border-radius: 1vw;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    background: #f9f9f9;
}

.timeline-stack-image img {
    width: 100%;
    height: 20vw;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.timeline-stack-image:hover img {
    transform: scale(1.06);
}

.timeline-stack-no-image {
    height: 20vw;
    background: #eef3eb;
}

/* ==========================================================================
   RESPONSIVE DESIGN (MOBILE ADAPTIVITY)
   ========================================================================== */

@media (max-width: 991px) {
    .timeline-stack-title {
        font-size: 2.4vw;
    }
    .timeline-stack-desc {
        font-size: 1.6vw;
        line-height: 2.4vw;
    }
    .timeline-stack-badge {
        font-size: 1.6vw;
    }
}

@media (max-width: 767px) {
    .iforest-timeline-stack {
        padding: 4vw 20px;
    }

    /* Disable sticky stacking on mobile to allow natural scrolls */
    .timeline-stack-item {
        position: relative !important;
        top: 0 !important;
        margin-bottom: 40px !important;
    }

    .timeline-stack-card {
        padding: 8vw 5vw 5vw 5vw;
        border-radius: 3vw;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
    }

    .timeline-stack-badge {
        font-size: 3.5vw;
        top: -15px;
        left: 20px;
        padding: 4px 16px;
    }

    .timeline-stack-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 5vw;
    }

    .timeline-stack-inner.reverse {
        flex-direction: column;
    }

    .timeline-stack-text {
        width: 100%;
        order: 2; /* Text below image */
    }

    .timeline-stack-image {
        width: 100%;
        order: 1; /* Image on top */
        border-radius: 2vw;
    }

    .timeline-stack-image img {
        height: 45vw;
    }

    .timeline-stack-no-image {
        height: 45vw;
    }

    .timeline-stack-title {
        font-size: 4.5vw;
    }
    .timeline-stack-desc {
        font-size: 3.2vw;
        line-height: 4.8vw;
    }
}