/*
 * .section-timeline — Outer wrapper for the full timeline section.
 * Sets a white background, generous vertical/horizontal padding, applies the
 * site font, and hides horizontal overflow to keep the centered spine and
 * absolutely-positioned dots from causing scrollbars.
 */
.section-timeline {
    background-color: #ffffff;
    padding: 80px 5%;
    font-family: 'Work Sans', sans-serif;
    overflow-x: hidden;
}

/*
 * .timeline-header — Container for the section heading and subtitle above the timeline.
 * Centers its children and provides bottom spacing to separate the header
 * from the first timeline entry.
 */
.timeline-header {
    text-align: center;
    margin-bottom: 80px;
}

/*
 * .timeline-main-title — Primary heading displayed at the top of the timeline section.
 * Uses BBOS blue, a fluid clamp-based font size that scales between 2.5rem and
 * 4rem, heavy weight, and collapses its bottom margin so the subtitle sits
 * close beneath it.
 */
.timeline-main-title {
    color: #1C48AA;
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    margin: 0 0 10px 0;
}

/*
 * .timeline-subtitle — Supporting subtitle text directly below the main title.
 * Styled dark with a slightly larger-than-body font size and heavy weight to
 * give it prominence without competing with the main title colour.
 */
.timeline-subtitle {
    color: #222;
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0;
}

/*
 * .timeline-wrap — Constrained-width container that centres the timeline entries.
 * Max-width caps the layout at 1100px, auto side margins centre it, and
 * overflow: hidden clips the vertical connector lines so they don't extend
 * outside the component.
 */
.timeline-wrap {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
}

/* line is drawn per-item via ::after on non-last items */

/*
 * .timeline-item — Individual row in the timeline representing a single milestone.
 * Uses flexbox to place the media and content side-by-side, with spacing at
 * the bottom to separate entries. Position relative is needed so the
 * absolutely-placed dot and connector line are anchored to each item.
 */
.timeline-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 80px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/*
 * .timeline-item:last-child — Removes the bottom padding from the final timeline entry.
 * Prevents extra whitespace after the last milestone since there is no
 * following item that needs visual separation.
 */
.timeline-item:last-child {
    padding-bottom: 0;
}

/*
 * .timeline-item:not(:last-child)::after — The vertical yellow connector line between entries.
 * Absolutely positioned at horizontal centre (50%), it runs from just below
 * the dot (top: 11px) to the bottom of the item, creating a continuous spine
 * that visually links each milestone to the next.
 */
.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 11px;
    bottom: 0;
    width: 3px;
    background-color: #F8D648;
    z-index: 1;
}

/*
 * .timeline-dot — Circular marker positioned on the centre spine for each milestone.
 * Absolutely centred horizontally, it sits at the top of its item with a
 * yellow fill and white border ring, floating above the connector line
 * via z-index so it appears to punctuate each entry.
 */
.timeline-dot {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    background-color: #F8D648;
    border: 4px solid #ffffff;
    border-radius: 50%;
    z-index: 2;
}

/*
 * .timeline-media, .timeline-content — Shared width rule for both columns in a timeline row.
 * Each column occupies 45% of the row, leaving the remaining 10% as implicit
 * gutter space around the central dot and connector line.
 */
.timeline-media,
.timeline-content {
    width: 45%;
}

/*
 * .timeline-item:nth-child(odd) — Layout direction for odd-numbered timeline entries.
 * Places the media column on the left and the content column on the right,
 * establishing the alternating left-right pattern of the timeline.
 */
.timeline-item:nth-child(odd) {
    flex-direction: row;
}

/*
 * .timeline-item:nth-child(odd) .timeline-content — Text alignment for odd-entry content.
 * Left-aligns the text so it reads naturally from the centre spine outward
 * toward the right edge of the layout.
 */
.timeline-item:nth-child(odd) .timeline-content {
    text-align: left;
}

/*
 * .timeline-item:nth-child(odd) .timeline-media — Media alignment for odd entries.
 * Pushes the image to the right edge of its column so it appears flush
 * against the central spine rather than floating at the far left.
 */
.timeline-item:nth-child(odd) .timeline-media {
    display: flex;
    justify-content: flex-end;
}

/*
 * .timeline-item:nth-child(even) — Layout direction for even-numbered timeline entries.
 * Reverses the row so the content column moves to the left and the media
 * column moves to the right, completing the alternating left-right pattern.
 */
.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

/*
 * .timeline-item:nth-child(even) .timeline-content — Text alignment for even-entry content.
 * Right-aligns the text so it reads from the far left toward the centre
 * spine, mirroring the odd-entry layout on the opposite side.
 */
.timeline-item:nth-child(even) .timeline-content {
    text-align: right;
}

/*
 * .timeline-item:nth-child(even) .timeline-tag — Inline display for the category tag on even entries.
 * Forces the tag to shrink-wrap its text rather than stretching full-width,
 * keeping it visually compact and right-aligned within its content column.
 */
.timeline-item:nth-child(even) .timeline-tag {
    display: inline-block;
}

/*
 * .timeline-item:nth-child(even) .timeline-media — Media alignment for even entries.
 * Pushes the image toward the left edge of its column so it sits flush
 * against the centre spine on the right-hand side of the layout.
 */
.timeline-item:nth-child(even) .timeline-media {
    display: flex;
    justify-content: flex-start;
}

/*
 * .timeline-tag — Small coloured badge labelling the category of a milestone.
 * Uses BBOS blue with white text, tight padding, small uppercase lettering,
 * and a slight border radius to create a compact pill-style label that sits
 * above the year and title inside each content block.
 */
.timeline-tag {
    display: inline-block;
    background-color: #1C48AA;
    color: #ffffff;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 4px;
    margin-bottom: 12px;
}

/*
 * .timeline-year — Large year number displayed prominently in each milestone's content block.
 * A fluid clamp size between 3rem and 4.5rem with a compressed line-height
 * keeps the year bold and dominant without pushing the title too far down.
 */
.timeline-year {
    color: #1C48AA;
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 900;
    line-height: 0.9;
    margin-bottom: 15px;
}

/*
 * .timeline-title — Heading text for an individual milestone event.
 * Dark colour, 1.5rem size, extra-bold weight, and a tight line-height
 * keep it legible and compact directly beneath the year number.
 */
.timeline-title {
    color: #222;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

/*
 * .timeline-desc — Body copy describing the milestone event.
 * Lighter grey colour and relaxed line-height make longer descriptions
 * comfortable to read within the constrained column width.
 */
.timeline-desc {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.6;
}

/*
 * .timeline-desc p — Removes default paragraph margin inside description blocks.
 * Prevents browsers from adding extra space above or below paragraphs,
 * which would otherwise disrupt the tight vertical rhythm of the description.
 */
.timeline-desc p {
    margin: 0;
}

/*
 * .timeline-media img — Images displayed alongside each timeline milestone.
 * Full column width with a 480px cap, rounded corners, and a soft drop shadow
 * give images a polished card-like appearance while object-fit: cover
 * ensures consistent framing regardless of the source image dimensions.
 */
.timeline-media img {
    width: 100%;
    max-width: 480px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/*
 * @media (max-width: 900px) — Tablet and small-screen layout for the timeline.
 * Collapses the two-column alternating layout into a single vertical column,
 * moves the spine and dot to the left edge, and stacks content above media
 * so the timeline reads top-to-bottom on narrower viewports.
 */
@media (max-width: 900px) {
    .timeline-item:not(:last-child)::after {
        left: 12px;
        transform: translateX(-50%);
        bottom: 0;
    }

    .timeline-item {
        flex-direction: column !important;
        padding-left: 32px;
        padding-bottom: 48px;
    }

    .timeline-dot {
        left: 12px;
        transform: translateX(-50%);
    }

    .timeline-content {
        order: 1;
        width: 100%;
        text-align: left !important;
        padding-right: 16px;
        box-sizing: border-box;
    }

    .timeline-media {
        order: 2;
        width: 100%;
        margin-top: 30px;
        justify-content: flex-start !important;
    }

    .timeline-media img {
        max-width: 100%;
    }
}

/*
 * @media (max-width: 480px) — Small mobile refinements for the timeline.
 * Tightens horizontal and vertical spacing between entries and scales down
 * the year number and title font sizes so they remain proportional on
 * small phone screens without overflowing their containers.
 */
@media (max-width: 480px) {
    .timeline-item {
        padding-left: 28px;
        padding-bottom: 36px;
    }

    .timeline-year {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .timeline-title {
        font-size: 1.2rem;
    }
}