/* =============================================
 * Timeline Element - Wave scrolls, items fixed at positions
 * ============================================= */

.fce-timeline {
    position: relative;
    width: 100%;
    background-color: var(--bagels-dark);
    overflow: hidden;
    padding: 30px 0;
    --fce-ti-img-width: 115px;
    --fce-ti-img-height: 115px;
}

.svg:not(:root) {
    overflow: visible;
}

.fce-timeline-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
}

/* Timeline Scroll Container */
.fce-timeline-scroll-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    /* ⏸️ TEMPORARILY DISABLED - cursor: grab; */
    cursor: default;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
}

.fce-timeline-scroll-container::-webkit-scrollbar {
    display: none;
}

/* ⏸️ TEMPORARILY DISABLED - grabbing cursor
.fce-timeline-scroll-container:active {
    cursor: grabbing;
}
*/

/* Scrollable Content - Contains everything that scrolls */
.fce-timeline-scroll-content {
    position: relative;
    width: 6250px; /* Match SVG viewBox width */
    min-width: 100%; /* Width based on number of items * spacing */
    height: 100%;
    display: flex;
    align-items: center;
}

/* SVG Lines Wrapper - Scrolls with content */
.fce-timeline-lines-wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    width: 7125px; 
    height: 470px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    overflow: visible;
    padding-left: 5%;
    padding-right: 5%;
}

.fce-timeline-svg {
  shape-rendering: geometricPrecision;
  width: 100%;
  height: auto;
  display: block;
}

.fce-timeline-svg:not(:root){
    overflow: visible;
}

.fce-timeline-svg path {
    shape-rendering: geometricPrecision;
    vector-effect: non-scaling-stroke;
}

.timeline-connector.bt-93-small-desktop,
.fce-timeline-svg .tc-sm{
    display: none;
}

.timeline-wave--mobile-straight {
    display: none;
}

.timeline-wave--fancy {
    display: inline;
}

.timeline-connector--mobile {
    display: none;
}

.timeline-connector--fancy {
    display: inline;
}

/* Timeline Items Wrapper - Contains all items, scrolls horizontally */
    .fce-timeline-items {
        position: relative;
        height: 100%;
        width: 100%;
        z-index: 2;
    }

    .fce-timeline-item:last-child{
        left: 157.825%;
        bottom: 62.972px !important;
        top: auto;
    }
    
/* Timeline Item - Positioned absolutely at SVG connector locations */
.fce-timeline-item {
    position: absolute;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    pointer-events: auto;
    margin-top: -14px;
    margin-bottom: -14px;
}

.fce-timeline-item.passed{
    opacity: 0 !important;
}

/* Position each item at its connector's X coordinate (connector on left edge) */
/* Positioning is now controlled via inline styles in PHP for easier adjustment */


.fce-timeline-item--top .fce-timeline-item__content,
.fce-timeline-item--bottom .fce-timeline-item__content{
    display: flex;
    flex-direction: row;
    gap: 40px;
}

/* Top positioned items - Content ABOVE the center line */
.fce-timeline-item--top .fce-timeline-item__content {
    align-items: flex-start;
    margin-bottom: 20px;
    margin-left: 20px;
}

.fce-timeline-item--top .fce-timeline-item__text-wrapper {
    order: 1;
}

.fce-timeline-item--top .fce-timeline-item__image {
    order: 2;
}

/* Bottom positioned items - Content BELOW the center line */
.fce-timeline-item--bottom .fce-timeline-item__content {
    align-items: flex-end;
    margin-top: 0;
    margin-left: 20px;
    margin-top: 20px;
}

.fce-timeline-item--bottom .fce-timeline-item__text-wrapper {
    order: 1;
}

.fce-timeline-item--bottom .fce-timeline-item__image {
    order: 2;
}

/* Content wrapper for image + text - starts from the red dot */
.fce-timeline-item__content {
    display: flex;
    align-items: flex-start;
    margin-left: 0; 
}

.fce-timeline-item__year {
   /* font-size: 30px; */  /* Larger year text */
   transition: font-size 0.4s ease;  /* Smooth size transition */
}

/* Last item - Always bigger year text */
.fce-timeline-item:last-child .fce-timeline-item__year {
    font-size: 36px;  /* Always bigger */
}
.fce-timeline-item:first-child .fce-timeline-item__image {
    margin-bottom: 10px; 
}
/* first timeline item image move up */
.fce-timeline .js-timeline-item:first-child .fce-timeline-item__image{
  transform: translateY(-10px);
}

/* Text Wrapper - Year and Title */
.fce-timeline-item__text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 250px;
    flex-shrink: 0;
    max-width: 230px;
}

/* Image Wrapper - Circular image on the right */
.fce-timeline-item__image {
    position: relative;
    width: var(--fce-ti-img-width);
    height: var(--fce-ti-img-height);
    border-radius: 50%;
    overflow: visible;
    flex-shrink: 0;
    min-height: 115px;
    min-width: 115px;
    display: flex;
}

.fce-timeline-item.active .fce-timeline-item__image {
    transform: scale(1.23);
    z-index: 10;
}

.fce-timeline-item__image img {
    min-width: var(--fce-ti-img-width);
    min-height: var(--fce-ti-img-height);
    width: var(--fce-ti-img-width);
    height: var(--fce-ti-img-height);
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    left: 0;
}

.fce-timeline.expand-imgs-on-active .fce-timeline-item__image img{
    position: absolute;
    box-shadow: 2px 0px 11px 4px rgba(0, 0, 0, 1);
}

.fce-timeline.switch-img-prec-on-active .fce-timeline-item__image img{
    -webkit-transition: all 0.5s ease-in-out, z-index 0s ease-in-out;
    -moz-transition: all 0.5s ease-in-out, z-index 0s ease-in-out;
    transition: all 0.5s ease-in-out, z-index 0s ease-in-out;
}

/* Title */
.fce-timeline-item__title {
    font-size: var(--fs-md);
    line-height: 1.5;
    color: #ffffff ;
    /* max-width: 300px; */
    text-align: left;
    transition: all 0.4s ease;
    margin: 0;
}

/* Year */
.fce-timeline-item__year {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1;
    color: #ffffff ;
    transition: all 0.4s ease;
    white-space: nowrap;
    display: block;
}

/* =============================================
 * Items WITHOUT images - adjust layout
 * ============================================= */
.fce-timeline-item__content:not(:has(.fce-timeline-item__image)) .fce-timeline-item__text-wrapper {
    width: 100%;
    max-width: 370px;
}

/* Fallback for browsers that don't support :has() */
@supports not (selector(:has(*))) {
    .fce-timeline-item__content .fce-timeline-item__text-wrapper {
        width: 100%;
        max-width: 370px;
    }

    /* Reset width when image exists */
    .fce-timeline-item__content .fce-timeline-item__image ~ .fce-timeline-item__text-wrapper {
        width: 250px;
        max-width: none;
    }
}


/* Note: Connector lines and dots are part of the SVG background */ 

/* =============================================
 * Skip History Button
 * ============================================= */
.fce-timeline-skip {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
    width: 100%;
}

.fce-timeline-skip__button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 20px;
    transition: all 0.3s ease;
    color: #999;
}

.fce-timeline-skip__button:hover {
    color: #ccc;
}

.fce-timeline-skip__button:hover .fce-timeline-skip__arrow {
    transform: translateY(4px);
}

.fce-timeline-skip__text {
    font-size: var(--fs-md);
    line-height: var(--lh-md);
}

.fce-timeline-skip__arrow {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

/* =============================================
 * Tablet Landscape (1024px - 1365px)
 * ============================================= */
@media (max-width: 1365px) {
    .fce-timeline {
        /* padding: 10px 0; */
        padding: 10px 0;
        --fce-ti-img-width: 120px;
        --fce-ti-img-height: 120px;
    }

    .fce-timeline-skip {
        padding: 35px 0 0 0;
    }

    .fce-timeline-skip__arrow {
        width: 18px;
        height: 18px;
    }

    .fce-timeline-wrapper {
        height: 645px;
    }

    .fce-timeline-scroll-content {
        width: 4000px;
    }

    .fce-timeline-items {
        gap: 350px;
    }

    .fce-timeline-item {
        width: 320px;
    }

    .fce-timeline-item__year {
        /* font-size: 42px; */
    }

    .fce-timeline-item__year {
        transition: font-size 0.4s ease;  /* Smooth size transition */
    }

    /* Last item - Always bigger year text */
    .fce-timeline-item:last-child .fce-timeline-item__year {
        font-size: 36px;  /* Always bigger */
    }

    .fce-timeline-item__title {
        /* font-size: 13px; */
        max-width: 280px;
    }

    .fce-timeline-item__image {
        width: var(--fce-ti-img-width);
        height: var(--fce-ti-img-height);
    }

    .fce-timeline-item.active .fce-timeline-item__image {
        transform: scale(1.19);
    }

    .fce-timeline-item__connector {
        height: 100px;
    }

    .timeline-connector.bt-93-lg-desktop{
        display: none;
    }
}

@media (min-width: 1100px) and (max-width: 1365px){
    .timeline-connector.bt-93-small-desktop{
        display: block;
    }
}

@media (min-width: 1200px) and (max-height: 1050px){
    .timeline-connector.bt-93-small-desktop{
        display: none;
    }
    
    .timeline-connector.bt-93-lg-desktop{
        display: block;
    }
}

@media (min-width: 992px) and (max-width: 1199px){
    .timeline-connector.bt-93-small-desktop{
        display: block;
    }
}

/* =============================================
 * Portrait fix (up to 1365px portrait)
 * Restores desktop scroll-content width so SVG connector-based item
 * positions match the original design and the first item has proper
 * left breathing room (the 4000px from ≤1365px compresses all items
 * too close to the left edge on portrait devices).
 * ============================================= */
@media (max-width: 1365px) and (orientation: portrait) {
    .fce-timeline-scroll-content {
        width: 6210px;
    }
}

/* =============================================
 * Tablet Portrait (768px - 1023px)
 * ============================================= */
@media (max-width: 1023px) {
    .fce-timeline {
        padding: 80px 0;
        --fce-ti-img-width: 110px;
        --fce-ti-img-height: 110px;
    }

    .fce-timeline-wrapper {
        height: 650px;
    }

    .fce-timeline-scroll-content {
        width: 3500px;
    }

    .fce-timeline-items {
        gap: 300px;
        padding: 0 80px;
    }

    .fce-timeline-item {
        width: 280px;
    }

    .fce-timeline-item__year {
        /* font-size: 36px; */
    }

    .fce-timeline-item__year {
        /* font-size: 30px; */  /* Larger year text */
        transition: font-size 0.4s ease;  /* Smooth size transition */
    }

    /* Last item - Always bigger year text */
    .fce-timeline-item:last-child .fce-timeline-item__year {
        font-size: 36px;  /* Always bigger */
    }

    .fce-timeline-item__title {
        max-width: 400px;
        width: 400px;
    }


    .fce-timeline-item__image {
        width: var(--fce-ti-img-width);
        height: var(--fce-ti-img-height);
    }

    .fce-timeline-item.active .fce-timeline-item__image {
        transform: scale(1.23);
    }

    .fce-timeline-item__connector {
        height: 90px;
    }

    .fce-timeline-item__dot {
        width: 14px;
        height: 14px;
    }

    .fce-timeline-item.active .fce-timeline-item__dot {
        width: 18px;
        height: 18px;
    }

    .fce-timeline-item__content {
        gap: 16px;
    }
}



@media (max-width: 991px){
    .fce-timeline-svg .tc-lg{
        display: none;
    }

    .fce-timeline-svg .tc-sm{
        display: block;
    }
}

/* =============================================
 * Mobile (below 767px)
 * ============================================= */
@media (max-width: 767px) {
    .fce-timeline {
        padding: 10px 0;
        --fce-ti-img-width: 100px;
        --fce-ti-img-height: 100px;
    }

    .fce-timeline-skip {
        padding: 20px 0;
    }

    .fce-timeline-skip__button {
        padding: 10px 16px;
        gap: 8px;
    }

    .fce-timeline-skip__text {
        font-size: 12px;
    }

    .fce-timeline-skip__arrow {
        width: 16px;
        height: 16px;
    }

    .fce-timeline-wrapper {
        height: 650px;
    }

    .fce-timeline-scroll-content {
        width: 3000px;
    }

    .fce-timeline-items {
        gap: 250px;
        padding: 0 60px;
    }

    .fce-timeline-item {
        width: 240px;
    }

    .fce-timeline-item__year {
        /* font-size: 30px; */  /* Larger year text */
        transition: font-size 0.4s ease;  /* Smooth size transition */
    }

    /* Last item - Always bigger year text */
    .fce-timeline-item:last-child .fce-timeline-item__year {
        font-size: 36px;  /* Always bigger */
    }

    .fce-timeline-item__title {
        /* font-size: 11px; */
        max-width: 400px;
    }

    .fce-timeline-item__image {
        width: var(--fce-ti-img-width);
        height: var(--fce-ti-img-height);
    }

    .fce-timeline-item.active .fce-timeline-item__image {
        transform: scale(1.2);
    }

    .fce-timeline-item__connector {
        height: 80px;
    }

    .fce-timeline-item__dot {
        width: 12px;
        height: 12px;
    }

    .fce-timeline-item.active .fce-timeline-item__dot {
        width: 16px;
        height: 16px;
    }

    .fce-timeline-item__content {
        gap: 14px;
    }

}

/* Short screen height (landscape phones, small-height devices) */
@media (max-height: 600px) {

  .fce-timeline__skip-button {
    position: fixed !important;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
  }

}

@media (min-width: 500px) and (max-width: 991px) {
    .fce-timeline-wrapper{
        height: 880px;
    }

    .fce-timeline-item--top .fce-timeline-item__content{
        flex-direction: column-reverse;
    }

    .fce-timeline-item--bottom .fce-timeline-item__content{
        flex-direction: column;
        align-items: flex-start;
    }

    .js-timeline-item .fce-timeline-item__content{
        gap: 30px;
    }

    .fce-timeline-item:last-child .fce-timeline-item__image{
        left: 28px;
        top: 18px;
    }
}

@media (min-width: 750px) and (max-width: 991px) {
    .fce-timeline.img-big{
        --fce-ti-img-width: 155px;
        --fce-ti-img-height: 155px;
    }

    .fce-timeline.img-big .fce-timeline-wrapper {
        height: 950px;
    }
}

@media (max-width: 499px) {
    .fce-timeline {
        padding-bottom: calc(36px + env(safe-area-inset-bottom));
        --fce-ti-img-width: 100px;
        --fce-ti-img-height: 100px;
    }
    
    .fce-timeline.img-big{
        --fce-ti-img-width: 170px;
        --fce-ti-img-height: 170px;
    }
    
    .fce-timeline.img-big.switch-img-pos{
        --fce-ti-img-width: 255px;
        --fce-ti-img-height: 255px;
    }
    
    .fce-timeline.img-big .js-timeline-item.has-2-imgs{
        --fce-ti-img-width: 168px;
        --fce-ti-img-height: 168px;
    }
    
    .fce-timeline.img-big .js-timeline-item.has-3-imgs{
        --fce-ti-img-width: 107px;
        --fce-ti-img-height: 107px;
    }

    .fce-timeline .fce-timeline-lines-wrapper {
        padding-left: 3%;
    }

    .fce-timeline .fce-timeline-scroll-container{
        pointer-events: none;
    }

    .fce-timeline-wrapper {
        padding-bottom: calc(26px + env(safe-area-inset-bottom));
        height: 650px;  /* Increased from 480px - enough space for column layout */
        min-height: 650px;  /* Ensure minimum height */
    }

    .fce-timeline.img-big .fce-timeline-wrapper {
        height: 750px;
        min-height: 750px;
    }

    .fce-timeline .fce-timeline-items {
        padding-bottom: calc(28px + env(safe-area-inset-bottom));
    }

    .fce-timeline .fce-timeline-item {
        margin-top: 0;
        margin-bottom: 0;
    }

    .fce-timeline-item:last-child{
        bottom: 92.972px !important;
    }

    .fce-timeline.img-big .fce-timeline-item:last-child{
        bottom: 15.972px !important;
    }

    .fce-timeline .fce-timeline-lines-wrapper {
        top: 42%;
    }

    .fce-timeline .timeline-wave--fancy {
        display: none;
    }

    .fce-timeline .timeline-wave--mobile-straight {
        display: inline;
    }

    .fce-timeline .timeline-connector--fancy {
        display: none;
    }

    .fce-timeline .timeline-connector--mobile {
        display: inline;
    }

    .fce-timeline-item .fce-timeline-item__image{
        -webkit-transition: left 0.5s ease-in-out;
        -moz-transition: left 0.5s ease-in-out;
        transition: left 0.5s ease-in-out;
    }

    .fce-timeline.img-big .fce-timeline-item .fce-timeline-item__image{
        height: 170px;
    }

    .fce-timeline.img-big .fce-timeline-item.active:last-child .fce-timeline-item__image{
        /* transform: scale(1.42) !important; */
    }

    .fce-timeline.img-big.switch-img-pos .fce-timeline-item.active:last-child .fce-timeline-item__image{
        /* transform: scale(1.19) !important; */
    }

    .fce-timeline-item:is(.has-3-imgs, .has-2-imgs) .fce-timeline-item__image{
        left: 0px;
    }

    .fce-timeline-item:is(.has-3-imgs, .has-2-imgs).active .fce-timeline-item__image{
    /* .fce-timeline-item.active .fce-timeline-item__image{ */
        left: -50px;
    }

    .fce-timeline.img-big.switch-img-pos .fce-timeline-item--top.has-1-imgs .fce-timeline-item__image{
        top: 415px;
    }

    .fce-timeline.img-big.switch-img-pos .fce-timeline-item--bottom.has-1-imgs .fce-timeline-item__image{
        bottom: 535px;
    }

    .fce-timeline.img-big.switch-img-pos .fce-timeline-item--bottom.has-3-imgs .fce-timeline-item__image{
        bottom: 357px;
    }

    .fce-timeline.img-big.switch-img-pos .fce-timeline-item--bottom.has-2-imgs .fce-timeline-item__image{
        bottom: 430px;
    }

    .fce-timeline.img-big.switch-img-pos .fce-timeline-item--top.has-3-imgs .fce-timeline-item__image{
        top: 412px;
    }

    .fce-timeline.img-big.switch-img-pos .fce-timeline-item--top.has-2-imgs .fce-timeline-item__image{
        top: 410px;
    }

    .fce-timeline.img-big.switch-img-pos .fce-timeline-item--bottom.has-1-imgs:last-child .fce-timeline-item__image{
        bottom: 534px;
    }
}

/* =============================================
 * Small Mobile (below 480px) - MINI VERSION
 * ============================================= */
@media (max-width: 480px) {
    /* Timeline section - position relative for skip button positioning */
    .fce-timeline {
        position: relative;
    }

    /* Skip button - Keep in normal flow to avoid overlap */
    .fce-timeline-skip {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        width: 100%;
        padding: 16px 0 6px;
        z-index: 2;
    }

    /* Main timeline container - MUCH TALLER to prevent cropping */
    .fce-timeline-wrapper {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    /* Scroll container - Allow both vertical and horizontal scrolling */
    .fce-timeline-scroll-container {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: auto;
    }

    /* Scrollable content - LONGER TIMELINE */
    .fce-timeline-scroll-content {
        width: 2400px;  /* Increased from 2200px - more breathing room */
    }

    /* Ensure timeline items container has enough height */
    .fce-timeline-items { 
        min-height: 650px;  /* Match wrapper height */
    }

    /* SVG Wave Container - LARGER SIZE */
    .fce-timeline-lines-wrapper {
        width: 6000px;  /* Increased from 5500px */
        height: 380px;  /* Increased from 350px */
        top: 42%;
        transform: translateY(-50%) scale(0.85);  /* Increased from 0.8 to 0.85 - bigger waves */
        transform-origin: left center;  /* Keep left alignment */
    }

    /* Wave lines - THICKER */
    .fce-timeline-svg path {
        stroke-width: 3.5;  /* Increased from 3.2 - thicker */
    }

    /* Wave circles - LARGER */
    .fce-timeline-svg circle {
        r: 10;  /* Increased from 9 */
    }

    /* Timeline items - EVEN MORE BREATHING ROOM */
    .fce-timeline-items {
        gap: 220px;  /* Increased from 200px - more space between items */
        padding: 0 45px;  /* Increased from 40px */
    }

    /* Individual items - WIDER */
    .fce-timeline-item {
        width: 190px;  /* Increased from 180px */
    }

    /* Text wrapper - LARGER */
    .fce-timeline-item__text-wrapper {
        width: 290px;  /* Increased from 260px */
        max-width: 290px;
    }

    .fce-timeline-item__year {
        /* font-size: 30px; */  /* Larger year text */
        transition: font-size 0.4s ease;  /* Smooth size transition */
    }

    /* Last item - Always bigger year text */
    .fce-timeline-item:last-child .fce-timeline-item__year {
        font-size: 36px;  /* Always bigger */
    }

    /* Last item - Add more gap between image and text */
    .fce-timeline-item--bottom:last-child .fce-timeline-item__image img{
        margin-top: 10px;  /* More space for bigger text */
    }

    .fce-timeline-item--bottom:last-child .fce-timeline-item__text-wrapper {
        margin-bottom: 14px;  /* More space for bigger text */
    }

    .fce-timeline-item__title {
        /* font-size: 12px; */  /* Larger title */
        max-width: 285px;  /* Increased from 260px */
    }

    /* Images - LARGER */
    .fce-timeline-item__image {
        width: var(--fce-ti-img-width);
        height: var(--fce-ti-img-height);
        min-width: 100px;
        min-height: 100px;
    }

    .fce-timeline:not(.img-big) .fce-timeline-item:last-child .fce-timeline-item__image,
    .fce-timeline:not(.img-big) .fce-timeline-item:last-child .fce-timeline-item__image img{
        width: 102px;
        height: 102px;
        min-width: 102px;
        min-height: 102px;
    }

    /* Active image scale - MORE NOTICEABLE */
    .fce-timeline-item.active .fce-timeline-item__image {
        transform: scale(1.22);  /* Increased from 1.2 */
    }

    /* Connectors - TALLER */
    .fce-timeline-item__connector {
        height: 65px;  /* Increased from 60px */
    }

    /* Connector dots - LARGER */
    .fce-timeline-item__dot {
        width: 11px;  /* Increased from 10px */
        height: 11px;
    }

    .fce-timeline-item.active .fce-timeline-item__dot {
        width: 15px;  /* Increased from 14px */
        height: 15px;
    }

    /* Content spacing - MORE BREATHING ROOM */
    .fce-timeline-item__content {
        gap: 13px;  /* Increased from 12px */
    }

    .fce-timeline-item__text-wrapper{
        gap: 5px;  /* Increased from 4px */
    }

    /* ==========================================
     * MOBILE COLUMN LAYOUT - Image & Text Stacked
     * ========================================== */

    /* Top items - IMAGE ON TOP, Year/Text BELOW */
    .fce-timeline-item--top .fce-timeline-item__content {
        flex-direction: column;  /* Change from row to column */
        align-items: flex-start; /* Left align everything including image */
        margin-bottom: 1px;
        margin-left: 5px;
        text-align: left;
    }

    .fce-timeline-item--top .fce-timeline-item__image {
        order: 1;  /* Image first (top) */
        margin-bottom: 8px;  /* Space between image and text */
        align-self: flex-start;  /* Force image to left */
    }

    .fce-timeline-item--top .fce-timeline-item__text-wrapper {
        order: 2;  /* Year/Text second (bottom) */
        align-items: flex-start;  /* Left align text wrapper */
    }

    /* Bottom items - Year/Text ON TOP, IMAGE BELOW */
    .fce-timeline-item--bottom .fce-timeline-item__content {
        flex-direction: column;  /* Change from row to column */
        align-items: flex-start; /* Left align everything including image */
        margin-top: 1px;
        margin-left: 5px;
        text-align: left;
    }

    .fce-timeline-item--bottom .fce-timeline-item__text-wrapper {
        order: 1;  /* Year/Text first (top) */
        align-items: flex-start;  /* Left align text wrapper */
        margin-bottom: 8px;  /* Space between text and image */
    }

    .fce-timeline-item--bottom .fce-timeline-item__image {
        order: 2;  /* Image second (bottom) */
        align-self: flex-start;  /* Force image to left */
        /* padding: 10px; */
    }

    /* Left align year and title text */
    .fce-timeline-item__year,
    .fce-timeline-item__title {
        text-align: left;
    }

    /* Left align text wrapper */
    .fce-timeline-item__text-wrapper {
        align-items: flex-start;  /* Left align items inside wrapper */
        text-align: left;
    }
     .fce-timeline-skip {
        padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 429px) {
    .fce-timeline{
        --fce-ti-img-width: 85px;
        --fce-ti-img-height: 85px;
    }

    .fce-timeline.img-big{
        --fce-ti-img-width: 135px;
        --fce-ti-img-height: 135px;
    }

    .fce-timeline.img-big.switch-img-pos {
        --fce-ti-img-width: 200px;
        --fce-ti-img-height: 200px;
    }

    .fce-timeline.img-big .js-timeline-item.has-2-imgs {
        --fce-ti-img-width: 128px;
        --fce-ti-img-height: 128px;
    }

    .fce-timeline.img-big .js-timeline-item.has-3-imgs {
        --fce-ti-img-width: 93px;
        --fce-ti-img-height: 93px;
    }

    .fce-timeline.img-big .fce-timeline-item .fce-timeline-item__image {
        height: 142px;
    }

    .fce-timeline-item.has-2-imgs.active .fce-timeline-item__image {
        left: -35px;
    }

    .fce-timeline-item.has-3-imgs.active .fce-timeline-item__image {
        left: -58px;
    }

    .fce-timeline-item--top .fce-timeline-item__content{
        gap: 5px;
    }

    .fce-timeline.img-big .fce-timeline-item:last-child {
        bottom: 50.972px !important;
    }

    .fce-timeline.img-big.switch-img-pos .fce-timeline-item--top.has-1-imgs .fce-timeline-item__image {
        top: 350px;
    }

    .fce-timeline.img-big.switch-img-pos .fce-timeline-item--bottom.has-1-imgs .fce-timeline-item__image {
        bottom: 470px;
    }

    .fce-timeline.img-big.switch-img-pos .fce-timeline-item--bottom.has-3-imgs .fce-timeline-item__image {
        bottom: 350px;
    }

    .fce-timeline.img-big.switch-img-pos .fce-timeline-item--top.has-3-imgs .fce-timeline-item__image {
        top: 365px;
    }

    .fce-timeline.img-big.switch-img-pos .fce-timeline-item--top.has-2-imgs .fce-timeline-item__image {
        top: 365px;
    }

    .fce-timeline.img-big.switch-img-pos .fce-timeline-item--bottom.has-2-imgs .fce-timeline-item__image {
        bottom: 400px;
    }

    .fce-timeline.img-big.switch-img-pos .fce-timeline-item--bottom.has-1-imgs:last-child .fce-timeline-item__image {
        bottom: 470px;
    }
}

@media (max-width: 390px) {
    .fce-timeline-wrapper {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .fce-timeline .fce-timeline-scroll-content {
        top: 5vh;
    }

    .fce-timeline:not(.img-big) .fce-timeline-item:last-child .fce-timeline-item__image,
    .fce-timeline:not(.img-big) .fce-timeline-item:last-child .fce-timeline-item__image img {
        width: 92px;
        height: 92px;
        min-width: 92px;
        min-height: 92px;
    }
}

/* =============================================
 * Large Screens - Add fade effect on left and right edges
 * ============================================= */
@media (min-width: 1921px) {
    .fce-timeline-wrapper::before,
    .fce-timeline-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        width: 250px;
        height: 100%;
        pointer-events: none;
        z-index: 10;
    }

    /* Left fade */
    .fce-timeline-wrapper::before {
        left: 0;
        background: linear-gradient(to right, var(--bagels-dark) 0%, transparent 100%);
    }

    /* Right fade */
    .fce-timeline-wrapper::after {
        right: 0;
        background: linear-gradient(to left, var(--bagels-dark) 0%, transparent 100%);
    }

}
/* =============================================
 * Short Desktop Screens - Auto-hide skip button
 * ============================================= */
@media (min-width: 768px) and (max-height: 710px) {
    .fce-timeline-skip {
        position: fixed;
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        z-index: 9999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
        width: auto;
        padding: 0;
    }

    .fce-timeline-skip.is-visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
    .fce-timeline-item:last-child{
        left: 157.825%;
        bottom: 62.972px !important;
        top: auto;
    }

}

@media (min-width: 1200px) and (min-height: 768px) {
    .fce-timeline.img-big {
        --fce-ti-img-width: 196px;
        --fce-ti-img-height: 196px;
    }

    .fce-timeline.img-big .fce-timeline-wrapper {
        height: 750px;
    }

    .fce-timeline.img-big .fce-timeline-item--top .fce-timeline-item__content,
    .fce-timeline.img-big .fce-timeline-item--bottom .fce-timeline-item__content{
        gap: 35px;
    }

    .fce-timeline.img-big .fce-timeline-item--top .fce-timeline-item__image {
        bottom: 45px;
    }

    .fce-timeline.img-big [data-index="0"].fce-timeline-item--top .fce-timeline-item__image {
        bottom: 80px;
    }

    .fce-timeline.img-big [data-index="6"].fce-timeline-item--top .fce-timeline-item__image {
        bottom: 80px;
    }

    .fce-timeline.img-big .fce-timeline-item--bottom .fce-timeline-item__image {
        top: 62px;
    }

    .fce-timeline.img-big [data-index="7"].fce-timeline-item--bottom .fce-timeline-item__image {
        top: 85px;
    }

    .fce-timeline.img-big .fce-timeline-item--bottom:last-child .fce-timeline-item__image {
        top: 0;
    }
}