/* ================================================================= */
/* PAGE-SPECIFIC STYLES: INSIGHT APPROACH (insight-approach.css) */
/* ================================================================= */

/* --- 1. Page Header --- */
/* ------------------------------------------------------------- */
.approach-header-section {
    padding: var(--spacing-lg) 0;
    text-align: center;
}

.approach-header-section .page-headline {
    margin-bottom: var(--spacing-sm);
}

.approach-header-section .intro-content p {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
}

/* --- 2. Timeline Section --- */
/* ------------------------------------------------------------- */
.timeline-section {
    padding: var(--spacing-md) 0 var(--spacing-xl) 0;
}

.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

/* The central timeline "roadmap" */
.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: var(--color-accent-highlight); /* Use navy */
    border: 1px dashed var(--color-text-secondary);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px; /* Offset for width */
    z-index: 1;
}

/* Wrapper for each step */
.timeline-item {
    padding: var(--spacing-md) 0;
    position: relative;
    z-index: 2; /* Sit on top of the line */
}

/* The step card itself */
.step-card {
    position: relative;
    width: 45%; /* Each card is slightly less than half */
    padding: var(--spacing-md);
    background-color: var(--color-bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-img);
}

/* Alternating layout: Card on the left */
.step-card.left {
    left: 0;
    text-align: right;
}

/* Alternating layout: Card on the right */
.step-card.right {
    left: 55%; /* Push to the right side */
    text-align: left;
}

/* The "dot" on the timeline */
.step-card::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--color-text-primary);
    border: 4px solid var(--color-accent-highlight);
    border-radius: 50%;
    top: 30px;
    z-index: 3; /* Sit on top of card and line */
}

/* Position the dot for left cards */
.step-card.left::after {
    right: -55px;
}

/* Position the dot for right cards */
.step-card.right::after {
    left: -55px;
}

/* Card content */
.step-number {
    display: block;
    font-size: 3rem;
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent-primary); /* Brand blue */
    line-height: 1;
}

.step-title {
    font-family: var(--font-family-header);
    font-size: 1.5rem;
    color: var(--color-text-primary);
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.step-description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

/* ================================================================= */
/* 4. NEW: Timeline Card Details (Nov 12th) */
/* Styles for the new "Goal", "Next Step" list. */
/* ================================================================= */

.step-details-list {
    list-style: none;
    padding: 0;
    margin-top: var(--spacing-md); /* Space above the list */
}

.step-details-list li {
    margin-bottom: var(--spacing-sm); /* Space between list items */
    line-height: 1.4;
}
.step-details-list li:last-child {
    margin-bottom: 0;
}

/* Style the "Goal:", "Next step:" labels */
.step-details-list strong {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

/* Style the value text */
.step-details-list span {
    display: block;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}


/* ================================================================= */
/* 5. NEW: "Why Choose" Section (Nov 12th) */
/* ================================================================= */

.why-choose-section {
    padding: var(--spacing-md) 0; /* Reduced from lg */
    text-align: center; /* Center the headline */
}

.why-choose-section .section-headline {
    margin-bottom: var(--spacing-md);
}

.why-choose-list {
    list-style: none;
    padding: 0;
    max-width: 800px; /* Constrain the width */
    margin: 0 auto;   /* Center the list block */
    
    /* --- NEW RULES --- */
    display: flex;
    flex-direction: column;
    align-items: center; /* This centers the <li> blocks */
    text-align: left;      /* This keeps text left-aligned inside them */
}

.why-choose-list li {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    position: relative; /* For checkmark positioning */
    padding-left: var(--spacing-md); /* Space for the checkmark */
    margin-bottom: var(--spacing-sm); /* Space between items */
    line-height: 1.5;
}

/* Add the checkmark */
.why-choose-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--color-accent-primary); /* Use brand blue */
    font-weight: var(--font-weight-bold);
    font-size: 1.1em;
}

/* ================================================================= */
/* 6. NEW: Step Timeframe Styling (Nov 12th) */
/* ================================================================= */

.step-timeframe {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-style: italic;
    /* Pulls it up closer to the title */
    margin-top: calc(var(--spacing-xs) * -0.75); 
    /* Pushes description down */
    margin-bottom: var(--spacing-md); 
}

/* Adjust margin on the description to account for the new element */
.step-description {
    margin-top: 0;
}


/* --- 3. Responsive --- */
/* ------------------------------------------------------------- */
@media (max-width: 768px) {
    
    /* --- UPDATED MOBILE STYLES --- */

    /* 1. Move the line to a precise position */
    .timeline::after {
        left: var(--spacing-md); /* 32px */
        margin-left: 0;
        transform: translateX(-50%); /* Center the 2px line at 32px */
    }

    /* 2. Make all cards full width and add padding for the line */
    .step-card,
    .step-card.left,
    .step-card.right {
        width: 100%;
        left: 0;
        padding-left: var(--spacing-lg); /* 64px */
        text-align: left;
    }

    /* 3. Align the dot perfectly with the line */
    .step-card.left::after,
    .step-card.right::after {
        left: var(--spacing-md); /* 32px */
        right: auto;
        transform: translateX(-50%); /* Center the 20px dot at 32px */
    }
    
    /* ------------------------------ */

    /* Adjust padding for mobile header */
    .approach-header-section .intro-content p {
        font-size: var(--font-size-base);
    }
}