/* Custom Timeline Styles for Experience Section */

/* Override timeline CSS variables - использую !important чтобы переопределить дефолтные значения */
.timeline {
    /* Timeline line customization */
    --timeline_line_color: #00b8d4 !important;  /* Цвет линии таймлайна */
    --timeline_line_width: 4px !important;       /* Толщина линии */

    /* Timeline bullet/circle customization */
    --timeline_bullet_diameter: 20px !important; /* Размер кружков */
    --timeline_bullet_color: #ffffff !important; /* Цвет внутри кружка */
    --timeline_bullet_border_width: 3px !important; /* Толщина границы кружка */

    /* Content box customization */
    --content_border_color: #00b8d4 !important;     /* Цвет границы контента */

    /* Spacing */
    --timeline_column_width: 60px !important;
    /* --date_column_width: 80px !important; */
}

/* Переопределяем цвет линии timeline напрямую */
.timeline::after {
    background-color: #00b8d4 !important; /* Цвет вертикальной линии */
    width: 4px !important;
}

/* Fix circle position - center it ON the line instead of to the left */
.timeline .container::after {
    left: calc(-0.5 * var(--timeline_column_width) - 0.5 * var(--timeline_bullet_diameter)) !important;
    background-color: #ffffff !important; /* Цвет внутри кружка */
    border-color: #00b8d4 !important; /* Цвет границы кружка */
    border-width: 3px !important; /* Толщина границы */
    width: 20px !important;
    height: 20px !important;
}

/* Custom text formatting for timeline content */
.timeline .content .body {
    font-size: 1rem;
    line-height: 1.2;
    color: #4a4a4a;
    text-align: left !important; /* Выравнивание по левому краю */
    padding-top: 2px !important; /* Уменьшаем отступ сверху */
}

/* Remove paragraph margins inside timeline body to reduce spacing */
.timeline .content .body p {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Style the title */
.timeline .content .title {
    font-size: 1.2rem;
    color: #4a4a4a;
    padding: 10px 30px;
    text-align: left !important; /* Выравнивание по левому краю */
}

/* Override Bulma's default margin-bottom for titles */
.timeline .content .title:not(:last-child),
.timeline .content .subtitle:not(:last-child) {
    margin-bottom: 0.5rem !important; /* Уменьшаем с 1.5rem до 0.5rem */
}

/* Переопределяем выравнивание для всего контента timeline */
.timeline .content {
    text-align: left !important;
    border-color: #00b8d4 !important; /* Цвет границы контента */
}

/* Выравнивание для списков */
.timeline .content ul,
.timeline .content li,
.timeline .content p {
    text-align: left !important;
}

/* Style links inside timeline */
.timeline .content a {
    color: #3273dc;
    text-decoration: none;
}

.timeline .content a:hover {
    text-decoration: underline;
}

/* Style bold text */
.timeline .content strong {
    color: #e74c3c;  /* Highlight metrics in red */
    font-weight: 600;
}

/* Style lists */
.timeline .content ul {
    margin-top: 5px !important; /* Уменьшаем отступ сверху для списков */
    margin-bottom: 10px;
}

.timeline .content li {
    margin-bottom: 8px;


/* Hover effect customization */
.timeline .content:hover {
    box-shadow: 0 4px 12px rgba(50, 115, 220, 0.2) !important;
    border-color: #3273dc;
}

/* Date styling */
.timeline .container .date {
    font-size: 0.9rem;
    font-weight: 600;
    color: #7a7a7a;
}

/* Duration text styling */
.timeline .content .duration {
    font-size: 0.85rem;
    color: #7a7a7a;
}

/* Mobile responsiveness */
@media screen and (max-width: 736px) {
    .timeline .content .title {
        font-size: 1rem;
        padding: 8px 20px;
    }

    .timeline .content .body {
        font-size: 0.9rem;
        padding: 2px 20px !important; /* Уменьшаем padding для мобильных */
    }
}

/* Dark mode support (if your theme uses it) */
@media (prefers-color-scheme: dark) {
    .timeline {
        --content_background_color: #2b2b2b;
        --content_border_color: #4a90e2;
        --content_duration_color: #e0e0e0;
    }

    .timeline .content .body {
        color: #e0e0e0;
    }

    .timeline .content .title {
        color: #f0f0f0;
    }
}