/**
 * Edufin - Go-Live / Implementation Process Section
 */

.go-live-section {
    padding: var(--space-30) var(--space-30);
    background-color: var(--color-base-white);
}

/* Header */
.go-live-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
    margin-bottom: var(--space-6);
}

.go-live-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-4);
    border: 1px solid var(--color-base-white-stroke);
    border-radius: var(--radius-xl);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-base-gray-text);
    line-height: 1.5rem; /* 24px */
}

.go-live-header h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    color: var(--color-base-black);
    line-height: 2.625rem;
    text-transform: capitalize;
    margin: 0;
    max-width: 50.625rem; /* 810px */
}

.go-live-header p {
    font-size: var(--text-xl);
    font-weight: var(--font-regular);
    color: var(--color-base-gray-text);
    line-height: 2.25rem;
    margin: 0;
}

/* Timeline container */
.go-live-timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    max-width: var(--container-width);
    margin: 0 auto;
}

/* Hide the old timeline line element */
.go-live-timeline-line {
    display: none;
}

/* Step item */
.go-live-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.125rem;
    text-align: center;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

/* Connector line between circles - using ::after on each step except the last */
.go-live-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: var(--space-8);
    left: calc(50% + var(--space-8));
    right: calc(-50% + var(--space-8));
    height: 2px;
    background-color: rgba(17, 78, 60, 0.2);
    transform: translateY(-50%);
}

/* Circle with number */
.go-live-step-circle {
    width: var(--space-16);
    height: var(--space-16);
    border-radius: var(--space-8);
    background-color: var(--color-primary-green-light);
    box-shadow: 0px 8px 24px 0px rgba(225, 238, 87, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: var(--z-base);
    flex-shrink: 0;
}

.go-live-step-circle span {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--color-primary-green-dark);
    line-height: 1.875rem; /* 30px */
    letter-spacing: -1px;
    text-transform: capitalize;
}

/* Step content */
.go-live-step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6875rem;
    width: 100%;
}

.go-live-step-day {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-primary-orange);
    line-height: var(--space-6);
}

.go-live-step-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-base-black);
    line-height: var(--space-5);
    margin: 0;
}

.go-live-step-desc {
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
    color: #666666;
    line-height: var(--space-6);
    margin: 0;
}

/* Tablet view (768px - 1024px) */
@media (max-width: 64rem) {
    .go-live-section {
        padding: 3.75rem var(--space-5);
    }

    .go-live-header p {
        font-size: var(--text-base);
        line-height: 1.625rem;
    }

    /* Two rows: 3 items on top, 2 items on bottom */
    .go-live-timeline {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-6) 0;
    }

    /* First row: items 1-3 take ~33% each to fill row */
    .go-live-step {
        flex: 0 0 33.333%;
        min-width: 10rem;
        max-width: none;
    }

    /* Second row: items 4-5 centered with uniform width */
    .go-live-step:nth-child(4),
    .go-live-step:nth-child(5) {
        flex: 0 0 33.333%;
        min-width: 10rem;
        max-width: none;
    }

    /* Connector lines for tablet - use fixed width */
    .go-live-step:not(:last-child)::after {
        left: calc(50% + var(--space-8));
        right: auto;
        width: calc(100% - var(--space-16));
    }

    /* Hide connector line for 3rd item (end of first row) */
    .go-live-step:nth-child(3)::after {
        display: none;
    }

    /* Hide connector line for last item (5th) */
    .go-live-step:last-child::after {
        display: none;
    }
}

/* Mobile view (< 768px) */
@media (max-width: 48rem) {
    .go-live-section {
        padding: var(--space-8) var(--space-4);
    }

    .go-live-header {
        gap: var(--space-4);
        margin-bottom: 1.875rem;
    }

    .go-live-header h2 {
        font-size: var(--text-2xl);
        line-height: 1.875rem;
    }

    .go-live-header p {
        font-size: var(--text-sm);
        line-height: var(--space-6);
    }

    /* Vertical layout with continuous line - centered with max-width */
    .go-live-timeline {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-8);
        position: relative;
        padding-left: 0;
        max-width: 25rem;
        margin: 0 auto;
    }

    /* Continuous vertical line behind all circles */
    .go-live-timeline::before {
        content: '';
        position: absolute;
        top: var(--space-8);
        left: var(--space-8);
        width: 2px;
        height: calc(100% - var(--space-16));
        background-color: rgba(17, 78, 60, 0.2);
        transform: translateX(-50%);
    }

    /* Step layout - horizontal with circle on left */
    .go-live-step {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-8);
        text-align: left;
        width: 100%;
        flex: none;
    }

    /* Hide the horizontal connector lines on mobile */
    .go-live-step:not(:last-child)::after {
        display: none;
    }

    .go-live-step-content {
        align-items: flex-start;
        flex: 1;
    }
}