/* ===== Timeline container ===== */
.sh-timeline {
    position: relative;
    padding: 8px 40px 68px;
}

/* Nav buttons */
.sh-timeline__nav {
    position: absolute;
    top: 110px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.sh-timeline__nav--prev { left: 4px; }
.sh-timeline__nav--next { right: 4px; }
.sh-timeline__nav:hover { background: #f8fafc; }
.sh-timeline__nav:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; }

/* ===== Timeline rail (cards) ===== */
.sh-timeline__rail {
    display: flex;
    gap: 16px;
    overflow: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 8px 6px 10px;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid transparent;
    cursor: grab;
    outline: none;
}
.sh-timeline__rail:active { cursor: grabbing; }

/* Hide scrollbar visuals (keeps functionality) */
.sh-timeline__rail::-webkit-scrollbar { height: 0; width: 0; }
.sh-timeline__rail { scrollbar-width: none; }
.sh-timeline__rail::-webkit-scrollbar-thumb { background: transparent; }

/* Cards */
.sh-timeline__card {
    min-width: 240px;
    max-width: 280px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    scroll-snap-align: start;
    cursor: pointer;
    outline: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    padding: 10px;
    margin-bottom: 30px;
}
.sh-timeline__card:hover,
.sh-timeline__card:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}
.sh-timeline__card.is-active {
    border-color: #ef4444;
    box-shadow: 0 8px 24px rgba(239, 68, 68, .15);
}
.sh-timeline__thumbwrap { position: relative; }
.sh-timeline__thumb {
    width: 100%;
    height: 170px;
    display: block;
    object-fit: cover;
    background: #f1f5f9;
}
.sh_timeline__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 14px;
}
.sh-timeline__year {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: #0f172a;
    color: #fff;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}
.sh-timeline__title {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 400;
    margin: 10px 12px 12px;
}

/* ===== Year slider (interactive, desktop) ===== */
.sh-timeline__slider {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 28px;
    height: 30px;
}
.sh-timeline__slider-track {
    position: absolute;
    left: 0; right: 0; top: -12px;
    height: 34px;
    background: #e6e9ef;
    border-radius: 3px;
}
.sh-timeline__slider .sh-timeline__minor-ticks,
.sh-timeline__slider .sh-timeline__fiveyear-ticks,
.sh-timeline__slider-events {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 100%;
    pointer-events: none;
}
/* minor/ten-year ticks */
.sh-timeline__minor-tick {
    position: absolute;
    bottom: 15px;
    width: 1px; height: 22px;
    background: #c7ced9;
    transform: translateX(-50%);
}
.sh-timeline__fiveyear-tick {
    position: absolute;
    bottom: -2px;
    width: 1.5px; height: 22px;
    background: #ef4444;
    transform: translateX(-50%);
}
.sh-timeline__fiveyear-tick:before {
    content: '';
    position: absolute;
    width: 6px; height: 6px;
    border: 1px solid #ef4444; border-radius: 50%;
    left: -3px; top: -7px;
}
/* Event bars by type */
.sh-timeline__event-tick,
.sh-timeline__konstr-tick {
    position: absolute;
    bottom: 16px;
    width: 3px; height: 22px;
    border-radius: 2px;
    transform: translateX(-50%);
}
.sh-timeline__event-tick { background: #ef4444; }
.sh-timeline__konstr-tick { background: #696969; }
/* both types in same year */
.sh-timeline__konstr-tick.is-dual { transform: translateX(calc(-50% - 3px)); }
.sh-timeline__event-tick.is-dual { transform: translateX(calc(-50% + 3px)); }

/* draggable handle (interactive) */
.sh-timeline__handle {
    position: absolute;
    top: -10px; left: 0;
    transform: translate(-50%, 0);
    width: 28px; height: 28px;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 3px 8px rgba(239, 68, 68, .28), 0 1px 0 rgba(0, 0, 0, .06);
    cursor: grab;
    z-index: 5;
}
.sh-timeline__handle:active { cursor: grabbing; }
.sh-timeline__handle:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; }

/* Decade labels (shared, for interactive; passive uses its own inner) */
.sh-timeline__years {
    position: absolute;
    left: 40px; right: 40px; bottom: -7px;
    height: 22px;
    font-size: 13px; color: #1f2937;
}
.sh-timeline__year-label {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    font-weight: 400;
    font-size: 18px;
}

/* ===== ACTIVE YEAR (centered above the card rail) ===== */
.sh-timeline__active-label {
    position: absolute;
    left: 50%;
    padding: 4px 12px;
    background: linear-gradient(90deg, rgba(229, 229, 229, 0.00) 0%, #E5E5E5 50.7%, rgba(229, 229, 229, 0.00) 100%);
    color: #ef4444;
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    transform: translate(-50%, -50px);
    pointer-events: none;
    z-index: 4;
    width: 354px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* calendar icon to the right */
/*.sh-timeline__active-label::after {
    content: "";
    width: 30px; height: 30px;
    margin-left: 8px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'><path d='M13.7718 19.036L17.8369 14.9708C18.0709 14.7369 18.3536 14.6199 18.6851 14.6199C19.0165 14.6199 19.2992 14.7369 19.5332 14.9708C19.7671 15.2048 19.8841 15.4875 19.8841 15.8189C19.8841 16.1504 19.7671 16.4331 19.5332 16.6671L14.5906 21.6096C14.3567 21.8436 14.0837 21.9606 13.7718 21.9606C13.4598 21.9606 13.1869 21.8436 12.9529 21.6096L10.467 19.1237C10.233 18.8897 10.116 18.607 10.116 18.2756C10.116 17.9441 10.233 17.6614 10.467 17.4275C10.701 17.1935 10.9837 17.0765 11.3151 17.0765C11.6466 17.0765 11.9293 17.1935 12.1632 17.4275L13.7718 19.036ZM6.81128 26.6984C6.16787 26.6984 5.61727 26.4695 5.15948 26.0117C4.70169 25.5539 4.4724 25.0029 4.47162 24.3587V7.98108C4.47162 7.33768 4.70091 6.78708 5.15948 6.32928C5.61805 5.87149 6.16865 5.6422 6.81128 5.64142H7.98111V4.47159C7.98111 4.14014 8.09341 3.8625 8.31802 3.63867C8.54263 3.41485 8.82027 3.30254 9.15094 3.30176C9.48161 3.30098 9.75964 3.41329 9.98503 3.63867C10.2104 3.86406 10.3223 4.1417 10.3208 4.47159V5.64142H19.6794V4.47159C19.6794 4.14014 19.7917 3.8625 20.0163 3.63867C20.2409 3.41485 20.5186 3.30254 20.8492 3.30176C21.1799 3.30098 21.4579 3.41329 21.6833 3.63867C21.9087 3.86406 22.0206 4.1417 22.0191 4.47159V5.64142H23.1889C23.8323 5.64142 24.3833 5.87071 24.8419 6.32928C25.3004 6.78786 25.5293 7.33846 25.5286 7.98108V24.3587C25.5286 25.0021 25.2997 25.5531 24.8419 26.0117C24.3841 26.4702 23.8331 26.6991 23.1889 26.6984H6.81128ZM6.81128 24.3587H23.1889V12.6604H6.81128V24.3587Z' fill='%23EF4129'/></svg>");
}*/

/* ===== Passive Year Slider (mobile <= 682px) ===== */
.sh-timeline__slider--passive {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 18px;
    height: 30px;
    display: none;           /* visible only on small screens via media query */
    pointer-events: none;    /* non-interactive */
    z-index: 2;
}
.sh-timeline__slider--passive .sh-timeline__viewport {
    position: absolute;
    inset: 0;
    height: 37px;
    padding-bottom: 25px;
    overflow: hidden;        /* we control inner scrollLeft via JS mapping */
}
.sh-timeline__slider--passive .sh-timeline__inner {
    position: relative;
    height: 100%;
    /* width is set in JS to be larger than viewport so it can scroll */
    min-width: 100%;
}
.sh-timeline__slider--passive .sh-timeline__track {
    position: absolute;
    left: 0; right: 0; top: -12px;
    height: 34px;
    background: #e6e9ef;
    border-radius: 3px;
}
.sh-timeline__slider--passive .sh-timeline__minor-ticks,
.sh-timeline__slider--passive .sh-timeline__fiveyear-ticks,
.sh-timeline__slider--passive .sh-timeline__events,
.sh-timeline__slider--passive .sh-timeline__years {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 100%;
}
.sh-timeline__slider--passive .sh-timeline__year-label {
    position: absolute;
    bottom: -7px;
    transform: translateX(-50%);
    white-space: nowrap;
    font-weight: 400;
    font-size: 16px;
    color: #1f2937;
}

/* Passive center marker (fixed) */
.sh-timeline__slider--passive .sh-timeline__center {
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 0;
    transform: translateX(-50%);
    pointer-events: none;
}
.sh-timeline__slider--passive .sh-timeline__center:before {
    content: "";
    position: absolute;
    left: -1px; top: 6px; bottom: 12px;
    width: 2px; background: #ef4444; border-radius: 2px;
}
.sh-timeline__slider--passive .sh-timeline__center:after {
    content: "";
    position: absolute;
    left: -5px; bottom: 6px;
    width: 10px; height: 10px; border-radius: 999px; background: #ef4444;
}

/* ===== Modal ===== */
.sh-timeline-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .65);
    display: none;
    align-items: center; justify-content: center;
    z-index: 9999;
    opacity: 0; transition: opacity .25s ease;
}
.sh-timeline-modal-backdrop.is-open { display: flex; opacity: 1; }

.sh-timeline-modal {
    width: min(1000px, 92vw);
    max-height: 92vh;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    transform: translateY(20px) scale(.98);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
}
.sh-timeline-modal-backdrop.is-open .sh-timeline-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}
@media (max-width: 900px) {
    .sh-timeline-modal {
        grid-template-columns: 1fr;
        width: min(900px, 94vw);
        max-height: 96vh;
    }
}

/* two columns content area */
.sh-timeline-modal__media {
    grid-column: 1 / 2;
    background: transparent;
    padding: 20px;
    overflow-y: auto;
    border-right: 1px solid #f1f5f9;
}
.sh-timeline-modal__media-inner img {
    width: 100%; height: auto; display: block;
    margin-bottom: 12px; border-radius: 8px; border: 1px solid #e5e7eb;
}
.sh-timeline-modal__content {
    grid-column: 2 / 3;
    padding: 28px;
    overflow-y: auto;
    position: relative;
}
.sh-timeline-modal__title {
    font-size: 24px;
    line-height: 1.25;
    margin: 0 40px 16px 0;
    font-weight: 700;
    color: #0f172a;
}

/* Close button */
.sh-timeline-modal__close {
    position: absolute;
    top: 14px; right: 16px;
    border: none; background: #ef4444;
    cursor: pointer;
    width: 37px; height: 37px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.sh-timeline-modal__close:hover { background: #e11d48; }
.sh-timeline-modal__close:before {
    content: "×"; font-size: 40px; line-height: 1; color: #fff;
}

.sh-timeline-modal__body { font-size: 16px; line-height: 1.6; color: #334155; }
.sh-timeline-modal__body p { margin-bottom: 1em; }
.sh-timeline-modal__body h2, .sh-timeline-modal__body h3 {
    margin: 1.2em 0 .6em; font-weight: 600; color: #0f172a;
}
.sh-timeline-modal__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px; margin-top: 18px;
}
.sh-timeline-modal__gallery img {
    width: 100%; height: auto; border-radius: 6px; border: 1px solid #e5e7eb;
    object-fit: cover; background: #f8fafc; cursor: zoom-in;
    transition: transform .15s ease;
}
.sh-timeline-modal__gallery img:hover { transform: scale(1.03); }

body.sh-timeline-lock { overflow: hidden; }
.sh-timeline__card:focus-visible { box-shadow: 0 0 0 2px #0ea5e9; }
.sh-timeline-modal__close:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; }

/* ===== Modal footer nav ===== */
.shed-modal__footer {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid #f1f5f9;
    background: #696969;
}
.shed-modal__event-nav {
    width: 44px; height: 44px;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1; color: #fff;
}
.shed-modal__counter { color: #fff; margin-top: 7px; }
.shed-modal__event-nav:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; }

.sh-timeline__yearpicker {
    position: absolute;
    left: 40px; right: 40px; bottom: -75px;
    display: flex; justify-content: center;
}

.sh-timeline__yearpicker-select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    padding: 6px 15px;
    -moz-padding-start: calc(10px - 3px);
    width: 120px;
    height: 40px;
    background-color: #e6e9ef;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    cursor: pointer;
}

.sh-timeline__yearpicker-inner {
    position: relative;
}

.sh-timeline__yearpicker-inner::before {
    content: "▼";
    font-size: 16px;
    position: absolute;
    right: 15px;
    top: 5px;
    color: #000;

}

.sh-timeline__yearpicker-select::-ms-expand {
    display: none;
}

.sh-timeline__yearpicker-select:focus::-ms-value {
    background-color: transparent;
}

/* ===== Responsive: switch to passive slider under 682px ===== */
@media (max-width: 682px) {
    .sh-timeline__slider { display: none; }
    .sh-timeline__years { display: none; }
    .sh-timeline__slider--passive { display: block; }
}

@media (max-width: 682px) {
    /* keep interactive years hidden… */
    .sh-timeline__years { display: none; }

    /* …but show decade labels inside the passive slider */
    .sh-timeline__slider--passive .sh-timeline__years {
        display: block;
        margin-top: 20px;
    }

    .sh-timeline-modal {
        display: flex;
        flex-direction: column;
        overflow: scroll;
        scrollbar-width: thin;
    }

    .sh-timeline-modal__media {
        overflow: visible;
    }

    .sh-timeline-modal__content {
        overflow-y: visible;
    }

    .sh-timeline-modal__close {
        top: -15px;
    }
}


@media (max-width: 768px) {
	.sh-timeline__nav--next,
	.sh-timeline__nav--prev {
		display: none!important;
	}
}

@media (max-width: 921px) {
    .timeline-label-markers {
        margin-top: 6rem!important;
    }
}