/* Timeline Widget Styles */
.notabene-timeline {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.notabene-timeline-item {
    display: flex;
    flex-direction: column;
    border-radius: var(--16-base-unit, 16px);
    border: 1px solid #000;
    width: 100%;
    max-height: 300px;
    aspect-ratio: 200/300;
    padding: var(--16-base-unit, 16px);
}

.notabene-timeline-item:hover {
    background-color: var(--Red, #F4364C);
}
.notabene-timeline-item:hover .notabene-timeline-title,
.notabene-timeline-item:hover .notabene-timeline-year {
    color: var(--White, #fff);
}

.notabene-timeline-year {
    color: var(--Black, #000);
    font-family: Platform;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.107143;
    margin-top: auto;
}

.notabene-timeline-title {
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: var(--e-global-typography-text-line-height);
    letter-spacing: 0;
    margin: 0;
}

/* Navigation arrows */
.notabene-timeline-wrapper .notabene-navigation {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 16px;
}

.notabene-timeline-wrapper .notabene-navigation-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--Grey-100);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.notabene-timeline-wrapper .notabene-navigation-button:hover {
    background: #e0e0e0;
}

.notabene-timeline-wrapper .notabene-navigation-button.prev-button svg {
    transform: rotate(-180deg);
}

/* Hide default Swiper navigation */
.notabene-timeline .swiper-button-next,
.notabene-timeline .swiper-button-prev,
.notabene-quote .swiper-button-next,
.notabene-quote .swiper-button-prev {
    display: none;
}

/* Mobile styles */
@media (max-width: 767px) {
    .notabene-timeline {
        padding: 0; /* Remove padding on mobile */
    }
    
    .notabene-timeline .swiper-wrapper {
        display: flex;
        gap: 8px;
        padding: 0 16px;
    }
    
    .notabene-timeline .swiper-slide {
        width: 213px;
        flex-shrink: 0;
    }
    .notabene-timeline .swiper-slide:last-child:after {
      content: "";
      display: block;
      position: absolute;
      right: -16px;
      width: 16px;
      height: 1px;
    }
    
    .notabene-timeline {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .notabene-timeline::-webkit-scrollbar {
        display: none;
    }

    /* Hide Swiper navigation on mobile */
    .notabene-timeline .swiper-button-next,
    .notabene-timeline .swiper-button-prev {
        display: none;
    }
    .notabene-navigation {
        display: none;
    }
}

/* Desktop styles */
@media (min-width: 768px) {
    .notabene-timeline .swiper-button-next,
    .notabene-timeline .swiper-button-prev {
        display: flex;
        color: #000;
    }
    
    .notabene-timeline .swiper-slide {
        height: auto;
    }
}