/* CV Timeline Pro — public stylesheet */

.cv-timeline-wrapper {
    padding: 0;
    font-family: var(--cvt-body-font, 'Inter', sans-serif);
    max-width: var(--cvt-max-width, 950px);
    margin: 0 auto;
    position: relative;
    background: var(--cvt-bg, transparent);
}

/* Central axis */
.timeline-axis {
    position: absolute;
    left: var(--cvt-axis, 150px);
    top: 0; bottom: 0;
    width: 1px;
    pointer-events: none;
}
#cvtStaticLine {
    position: absolute;
    width: 1px;
    background-color: var(--cvt-axis-color, #e0d7c1);
    left: 0; z-index: 1;
}
#cvtScrollLine {
    position: absolute;
    width: 2px;
    background-color: var(--cvt-scroll-color, #c5a059);
    left: -0.5px;
    height: 0; z-index: 2;
    transition: height 0.1s ease-out;
}

/* Row */
.timeline-item {
    display: flex;
    margin-bottom: var(--cvt-item-spacing, 80px);
    position: relative;
    opacity: 0.1;
    transform: translateY(20px);
    transition: all 0.8s ease;
}
.timeline-item.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* Date — KEY FIX: white-space nowrap so "2025–2026" never breaks */
.item-date {
    width: var(--cvt-axis, 150px);
    text-align: right;
    padding-right: var(--cvt-date-right-gap, 45px);
    font-size: var(--cvt-date-fs, 13px);
    font-family: var(--cvt-body-font, 'Inter', sans-serif);
    color: var(--cvt-date-color, #b1a47e);
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.4;
    padding-top: 10px;
    flex-shrink: 0;
    box-sizing: border-box;
    white-space: nowrap;          /* ← prevents year from wrapping */
}

/* Dot */
.item-marker {
    position: absolute;
    left: var(--cvt-axis, 150px);
    top: 20px;
    transform: translate(-50%, -50%);
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
}
.marker-ring {
    width: 24px; height: 24px;
    border: 1px solid var(--cvt-axis-color, #e0d7c1);
    border-radius: 50%;
    background-color: var(--cvt-bg, #fff);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.4s ease;
}
.marker-dot {
    width: 10px; height: 10px;
    background-color: var(--cvt-axis-color, #e0d7c1);
    border-radius: 50%;
    transition: all 0.4s ease;
}
.timeline-item.is-active .marker-ring { border-color: var(--cvt-dot-active, #c5a059); background: #fdfaf2; }
.timeline-item.is-active .marker-dot  { background-color: var(--cvt-dot-active, #c5a059); transform: scale(1.1); }

/* Content */
.item-content {
    padding-left: var(--cvt-content-left-gap, 45px);
    flex: 1; min-width: 0;
}
.item-content h3 {
    margin: 0;
    font-family: var(--cvt-title-font, 'Playfair Display', serif);
    font-size: var(--cvt-title-fs, 25px);
    font-weight: var(--cvt-title-fw, 600);
    letter-spacing: var(--cvt-title-ls, 0px);
    color: var(--cvt-title-color, #1a3d37);
    line-height: 1.2;
}
.item-content h4 {
    margin: 5px 0 15px;
    font-family: var(--cvt-subtitle-font, 'Playfair Display', serif);
    font-style: var(--cvt-subtitle-style, italic);
    font-size: var(--cvt-subtitle-fs, 16px);
    font-weight: var(--cvt-subtitle-fw, 400);
    letter-spacing: var(--cvt-subtitle-ls, 0px);
    color: var(--cvt-subtitle-color, #888);
}
.item-content p {
    font-family: var(--cvt-body-font, 'Inter', sans-serif);
    font-size: var(--cvt-body-fs, 15px);
    font-weight: var(--cvt-body-fw, 400);
    line-height: var(--cvt-body-lh, 1.7);
    letter-spacing: var(--cvt-body-ls, 0px);
    color: var(--cvt-text-color, #555);
}
.item-tags { display:flex; flex-wrap:wrap; gap:8px; }
.item-tags span {
    background-color: var(--cvt-tag-bg, #f1f1f1);
    color: var(--cvt-tag-text, #777);
    padding: 4px 12px; border-radius: 20px;
    font-size: var(--cvt-tag-fs, 11px);
    font-family: var(--cvt-body-font, 'Inter', sans-serif);
}

/* Mobile */
@media (max-width: 768px) {
    .timeline-axis { left: 30px !important; }
    .item-marker   { left: 30px !important; }
    .timeline-item { flex-direction: column; padding-left: 60px; }
    .item-date     { text-align:left; width:auto !important; padding-right:0; margin-bottom:5px; }
    .item-content  { padding-left: 0; }
}