/* stylesTimeline.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root {
    /* Colors */
    --primary-green: #15803d;    /* green-700 - Titles/Borders */
    --secondary-green: #16a34a;  /* green-600 - Highlights/Buttons */
    --accent-orange: #f97316;    /* orange-500 - Accents */
    --soft-orange: #fdba74;      /* orange-300 - Separators */
    --bg-light: #f3f4f6;          /* gray-100 - Page Background */
    --text-main: #374151;         /* gray-700 - Body Text */
    --text-muted: #4b5563;        /* gray-600 - Subtitles */

    /* Layout */
    --header-height: 7rem;
}

/* Timeline Container */
.timeline {
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    gap: 2rem;
    align-items: center;
    padding: 2rem;
    position: relative;
}

/* The vertical orange line */
.timelineLine {
    background-color: #FFB74D; /* orange-300 */
    width: 2px;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    z-index: 1;
}

/* The White Cards */
.timelineCard {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
    position: relative;
    z-index: 2;
    /* Added to fix buttons to bottom */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.timelineCard:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Class for buttons/links to push them to the bottom */
.linkGreen {
    color: var(--secondary-green);
    font-weight: 600;
    transition: color 0.15s ease-in-out;
    text-decoration: none;
    display: inline-block;
    margin-top: auto; /* Pushes to bottom */
    padding-top: 1rem;
}

.linkGreen:hover {
    color: var(--primary-green);
}

/* The Dots (Markers) */
.timelineMarker {
    width: 1rem;
    height: 1rem;
    background-color: #34d399; /* green-500 */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    border: 3px solid #f3f4f6;
}

/* Position the dot on the OUTSIDE edge of the cards */
.timelineItem.left .timelineMarker {
    right: -1.8rem;
}

.timelineItem.right .timelineMarker {
    left: -1.8rem;
}

/* Grid Positioning */
.timelineItem.right {
    grid-column: 3;
}

.timelineItem.left {
    grid-column: 1;
    text-align: right;
}

.timelineTitleParagraph{
  text-align: center;
  color: var(--text-muted);
  margin-top: 0.5rem;
  margin-bottom: 3rem;
  font-size: 1.125rem;
}

.timelineCardTitle {
    color: var(--primary-green);
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.25;
    font-size: 1.125rem;
}

.timelineCaption {
    color: var(--text-muted);   /* Using your existing gray-600 variable */
    font-size: 0.75rem;         /* Same as text-xs (12px) */
    margin-top: 0.5rem;         /* Same as mt-2 */
    text-align: center;         /* Same as text-center */
    max-width: 512px;           /* Same as max-w-[512px] */
    margin-left: auto;          /* Centers the caption if it hits max-width */
    margin-right: auto;         /* Centers the caption if it hits max-width */
    line-height: 1.4;
}

/* Desktop styles */
@media (min-width: 768px) {
    .timelineCardTitle {
        font-size: 1.25rem;
    }
    .timelineTitleParagraph{
      font-size: 1.25rem;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .timeline {
        display: flex; /* Changed to flex for ordering */
        flex-direction: column;
        gap: 1.5rem;
    }

    .timelineLine, .timelineMarker {
        display: none;
    }

    .timelineItem.right,
    .timelineItem.left {
        width: 100%;
        text-align: left;
    }

    /* Mobile Reordering: Text -> Image -> Text -> Image */
    /* Ensure you add these item-x classes to your HTML elements in sequence */
    .item-1 { order: 1; }
    .item-2 { order: 2; }
    .item-3 { order: 3; }
    .item-4 { order: 4; }
    .item-5 { order: 5; }
    .item-6 { order: 6; }
    .item-7 { order: 7; }
    .item-8 { order: 8; }
    .item-9 { order: 9; }
    .item-10 { order: 10;}
    .item-11 { order: 11;}
    .item-12 { order: 12;}
    .item-13 { order: 13;}
    .item-14 { order: 14;}
    .item-15 { order: 15;}
    .item-16 { order: 16;}
    .item-17 { order: 17;}
    .item-18 { order: 18;}
    .item-19 { order: 19;}
    .item-20 { order: 20;}

}