@import '../variables.css';

/* Блок "Как работает" — таймлайн: 3 ряда (подписи сверху | линия+точки | подписи снизу) */
.section-how-works .timeline-how {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
    max-width: min(1200px, 100%);
    margin: 0 auto;
    padding: var(--gap-2xl) var(--gap-md);
    gap: 0;
}

.timeline-how__row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 0;
    grid-column: 1 / -1;
}

.timeline-how__row--top {
    align-items: flex-end;
    padding-bottom: var(--gap-sm);
}

.timeline-how__row--track {
    position: relative;
    min-height: 24px;
}

/* Линия строго в ряду с точками */
.timeline-how__row--track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 0;
}

.timeline-how__row--track .timeline-how__cell {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.timeline-how__row--bottom {
    align-items: flex-start;
    padding-top: var(--gap-sm);
}

.timeline-how__cell {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--gap-xs);
}

.timeline-how__cell:empty {
    min-height: 0;
}

.timeline-how__label {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
    font-size: var(--font-size-body);
    font-weight: 500;
    line-height: var(--line-height-body);
    color: var(--color-text-primary);
    text-align: center;
    white-space: nowrap;
}

.timeline-how__label i {
    color: var(--color-primary);
    font-size: var(--icon-size-sm);
    flex-shrink: 0;
}

.timeline-how__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
}

.timeline-column {
    display: none;
}

.works-by-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--gap-3xl);
}

.works-by-image-container img {
    width: 80%;
}

/* Responsive: how-works (таймлайн) */
@media (max-width: 1199px) {
    .timeline-how {
        padding-left: var(--gap-sm);
        padding-right: var(--gap-sm);
    }

    .timeline-how__label {
        font-size: var(--font-size-small);
        white-space: normal;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .timeline-how {
        display: none !important;
    }

    .timeline-column {
        display: block !important;
    }
}

@media (max-width: 480px) {
    .timeline-how {
        display: none !important;
    }

    .timeline-column {
        display: block !important;
    }
}