/* =============================================
   Company Establishment Timeline - CSS
   Two-column alternating layout with date, title, and details together
   Color scheme aligned with Mission and Vision page
   ============================================= */

/* ---- Hero Section ---- */
#JourneyHero {
    background: var(--grad-navy, linear-gradient(135deg, #0d2545 0%, #1a4a6f 50%, #0b2b40 100%));
    padding: 120px 20px 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Subtle radial light bloom — matches Mission and Vision hero */
#JourneyHero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249, 160, 27, 0.10) 0%, transparent 65%);
    pointer-events: none;
}

/* Second gradient overlay for depth */
#JourneyHero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(11, 43, 64, 0.6) 0%, transparent 100%);
    pointer-events: none;
}

.journey-hero-content {
    position: relative;
    z-index: 1;
}

.journey-hero-content h1 {
    font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px;
    position: relative;
    display: inline-block;
    letter-spacing: -0.02em;
}

.journey-hero-content h1::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    background: var(--grad-stripe, linear-gradient(90deg, #ffcd7e, #f9a01b));
    border-radius: 2px;
}

.journey-hero-content p {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: clamp(0.85rem, 1.8vw, 1.1rem);
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 1.5rem auto 0;
    line-height: 1.75;
}

/* ---- Timeline Section ---- */
#JourneyTimeline {
    background: #f8fafc;
    padding: 80px 20px;
    position: relative;
}

.journey-grid {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* Vertical center spine - amber */
/* bottom offset stops the spine at the pulse dot so no line bleeds below it */
.journey-grid::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 110px;
    width: 3px;
    background: #f9a01b;
    transform: translateX(-50%);
    z-index: 0;
    border-radius: 3px;
}

/* ---- Milestone Card ---- */
.milestone-card {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: 20px 0;
    z-index: 1;
}

/* Left and Right containers */
.milestone-left,
.milestone-right {
    width: calc(50% - 40px);
}

.milestone-left {
    text-align: right;
    padding-right: 30px;
}

.milestone-right {
    text-align: left;
    padding-left: 30px;
}

/* Marker positioning */
.milestone-marker {
    position: absolute;
    left: 50%;
    top: 30px;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    z-index: 2;
}

.marker-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #f9a01b;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(249, 160, 27, 0.15);
    transition: box-shadow 0.3s ease;
}

.milestone-card:hover .marker-ring {
    box-shadow: 0 0 0 6px rgba(249, 160, 27, 0.2);
}

.marker-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f9a01b;
}

/* Year styling - solid amber */
.milestone-year {
    font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #f9a01b;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

/* Title styling - navy */
.milestone-left h3,
.milestone-right h3 {
    font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #0b2b40;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

/* Details container */
.milestone-details {
    background: #ffffff;
    border: 1px solid #e8edf2;
    border-radius: 12px;
    padding: 18px 22px;
    box-shadow: 0 4px 15px rgba(11, 43, 64, 0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.milestone-card:hover .milestone-details {
    box-shadow: 0 8px 25px rgba(11, 43, 64, 0.1);
    transform: translateY(-2px);
}

.milestone-details p {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 0.9rem;
    color: #2c3e50;
    line-height: 1.7;
    margin: 0 0 12px;
}

/* Tag - solid amber background */
.milestone-tag {
    display: inline-block;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0b2b40;
    background: #f9a01b;
    border-radius: 20px;
    padding: 4px 14px;
}

/* ---- Scroll Reveal Animations ---- */

/* Cards start hidden and shifted */
.milestone-card .milestone-left,
.milestone-card .milestone-right {
    opacity: 0;
    transition: opacity 0.65s ease, transform 0.65s ease;
}

/* Left content slides in from the left */
.milestone-card .milestone-left {
    transform: translateX(-50px);
}

/* Right content slides in from the right */
.milestone-card .milestone-right {
    transform: translateX(50px);
}

/* Marker starts hidden */
.milestone-card .milestone-marker {
    opacity: 0;
    transform: translateX(-50%) scale(0.4);
    transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}

/* When card is visible, animate everything in */
.milestone-card.visible .milestone-left,
.milestone-card.visible .milestone-right {
    opacity: 1;
    transform: translateX(0);
}

/* Slight delay on right side so left leads */
.milestone-card.visible .milestone-left {
    transition-delay: 0.1s;
}

.milestone-card.visible .milestone-right {
    transition-delay: 0.2s;
}

.milestone-card.visible .milestone-marker {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Details card gets a subtle lift-in on top of the slide */
.milestone-card .milestone-details {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease;
}

.milestone-card.visible .milestone-details {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
}

.milestone-card.visible:hover .milestone-details {
    box-shadow: 0 8px 25px rgba(11, 43, 64, 0.1);
    transform: translateY(-2px);
}

/* Mobile: both sides slide up instead of left/right */
@media (max-width: 768px) {
    .milestone-card .milestone-left,
    .milestone-card .milestone-right {
        transform: translateY(30px);
    }

    .milestone-card.visible .milestone-left,
    .milestone-card.visible .milestone-right {
        transform: translateY(0);
    }

    .milestone-card .milestone-marker {
        transform: translateX(-50%) scale(0.4);
    }

    .milestone-card.visible .milestone-marker {
        transform: translateX(-50%) scale(1);
    }
}
@media (max-width: 768px) {
    #JourneyHero {
        padding: 100px 20px 60px;
    }

    #JourneyHero::before {
        width: 400px;
        height: 400px;
    }

    .journey-hero-content h1 {
        font-size: 2rem;
    }

    .journey-hero-content h1::after {
        width: 48px;
        height: 3px;
    }

    #JourneyTimeline {
        padding: 60px 20px;
    }

    .journey-grid::before {
        left: 20px;
        width: 2px;
        bottom: 100px;
    }

    .milestone-card {
        flex-direction: column;
        padding-left: 45px;
        padding-top: 10px;
        padding-bottom: 30px;
    }

    .milestone-left,
    .milestone-right {
        width: 100%;
        text-align: left;
        padding: 0;
    }

    .milestone-left {
        margin-bottom: 0;
    }

    .milestone-marker {
        left: 20px;
        top: 5px;
        transform: translateX(-50%);
        width: 20px;
        height: 20px;
    }

    .marker-dot {
        width: 6px;
        height: 6px;
    }

    .milestone-year {
        font-size: 1.1rem;
    }

    .milestone-left h3,
    .milestone-right h3 {
        font-size: 1rem;
    }

    .milestone-details {
        padding: 15px 18px;
    }

    .milestone-details p {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    #JourneyHero {
        padding: 80px 16px 50px;
    }

    #JourneyHero::before {
        width: 300px;
        height: 300px;
    }

    .journey-hero-content h1 {
        font-size: 1.65rem;
    }

    .journey-hero-content p {
        font-size: 0.92rem;
    }

    #JourneyTimeline {
        padding: 40px 16px;
    }

    .milestone-card {
        padding-left: 38px;
        padding-bottom: 24px;
    }

    .milestone-marker {
        left: 16px;
        width: 18px;
        height: 18px;
    }

    .marker-dot {
        width: 5px;
        height: 5px;
    }

    .milestone-year {
        font-size: 1rem;
    }

    .milestone-left h3,
    .milestone-right h3 {
        font-size: 0.9rem;
    }

    .milestone-details {
        padding: 12px 14px;
        border-radius: 10px;
    }

    .milestone-details p {
        font-size: 0.82rem;
    }

    .milestone-tag {
        font-size: 0.6rem;
        padding: 3px 10px;
    }
}
/* ---- Ongoing Indicator ---- */

/*
 * Root problem: .timeline-ongoing sits inside .journey-grid whose ::before
 * pseudo-element draws the amber vertical spine (left: 50%, z-index: 0).
 * Any centered text with no background will render directly on top of the spine.
 *
 * Fix: give every text element a solid white background so it occludes the
 * spine, and make the label row a proper flex layout (not a pseudo-element
 * approach) so horizontal lines sit cleanly on either side.
 */

.timeline-ongoing {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 70px;
    position: relative;
    z-index: 1;
    /* Widen to let the label row breathe without clipping */
    width: 100%;
}

/* ---- Pulsing dot ---- */
.ongoing-pulse {
    position: relative;
    width: 36px;
    height: 36px;
    margin-bottom: 24px;
    /* Centers the dot on the spine (spine is at left: 50% of .journey-grid) */
    flex-shrink: 0;
}

@keyframes ongoingPulseRing {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

@keyframes ongoingDotBreath {
    0%, 100% { box-shadow: 0 0 0 3px rgba(249, 160, 27, 0.4); }
    50%       { box-shadow: 0 0 0 6px rgba(249, 160, 27, 0.15); }
}

.pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #f9a01b;
    transform: translate(-50%, -50%);
    animation: ongoingPulseRing 2.4s ease-out infinite;
    pointer-events: none;
}

.pulse-ring--delayed {
    animation-delay: 0.8s;
}

.ongoing-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f9a01b;
    /* White ring punches it off the spine visually */
    border: 3px solid #f8fafc;
    animation: ongoingDotBreath 2.4s ease-in-out infinite;
    z-index: 2;
}

/* ---- Label row ---- */
/*
 * Uses a real flex row: [line] [pill text] [line]
 * The pill has a solid background that covers the spine completely.
 * The lines are <span> siblings, not ::before/::after, so they never
 * inherit the pill's background and the layout stays predictable.
 */
.ongoing-label-row {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 560px;
    margin-bottom: 14px;
}

.ongoing-line {
    flex: 1;
    height: 1.5px;
    background: #dde3ea;
    border-radius: 2px;
    display: block;
}

.ongoing-label {
    font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #0b2b40;
    /* Solid background completely covers the amber spine */
    background: #f8fafc;
    padding: 6px 20px;
    border-radius: 20px;
    border: 1.5px solid #e8edf2;
    white-space: nowrap;
    flex-shrink: 0;
    /* Raise above the spine z-index: 0 */
    position: relative;
    z-index: 2;
}

/* ---- Tagline ---- */
.ongoing-tagline {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 0.875rem;
    color: #6b7a8d;
    text-align: center;
    max-width: 460px;
    line-height: 1.75;
    margin: 0;
    /* Solid bg covers spine for the full width of the text block */
    background: #f8fafc;
    padding: 0 16px;
    position: relative;
    z-index: 2;
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
    /*
     * On mobile the spine shifts to left: 20px (see existing rule).
     * The indicator is no longer centered — it's full-width, so the dot
     * needs to align to the left spine position instead.
     */
    .timeline-ongoing {
        align-items: flex-start;
        padding-left: 45px;
        padding-bottom: 50px;
    }

    .ongoing-pulse {
        /* Align dot center with the mobile spine at left: 20px */
        position: absolute;
        left: 20px;
        top: 0;
        transform: translateX(-50%);
        margin-bottom: 0;
    }

    .ongoing-label-row {
        margin-top: 52px; /* clear the dot */
        max-width: 100%;
    }

    .ongoing-line {
        display: none; /* no room for side lines on mobile */
    }

    .ongoing-label {
        font-size: 0.7rem;
        padding: 5px 14px;
    }

    .ongoing-tagline {
        font-size: 0.82rem;
        text-align: left;
        padding: 0;
        max-width: 100%;
        background: transparent;
    }
}

@media (max-width: 480px) {
    .timeline-ongoing {
        padding-left: 38px;
        padding-bottom: 40px;
    }

    .ongoing-pulse {
        left: 16px;
    }

    .ongoing-label {
        font-size: 0.65rem;
        padding: 4px 12px;
        letter-spacing: 0.1em;
    }

    .ongoing-tagline {
        font-size: 0.78rem;
    }
}