/* =========================================================
   ALPHA STRIKE — TIMELINE COMPONENT
   Version: 1.0
   Status: Locked
   ========================================================= */


/* =========================================================
   1. DEMO FOUNDATION
   ========================================================= */

.alpha-timeline-demo {
    max-width: var(--alpha-container-max);
    margin: 0 auto;

    padding: var(--alpha-spacing-6);

    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-body);
    font-size: var(--alpha-font-size-body);
    line-height: var(--alpha-line-height-body);
}

.alpha-timeline-demo__header {
    margin-bottom: var(--alpha-spacing-8);
}

.alpha-timeline-demo__eyebrow {
    margin: 0 0 var(--alpha-spacing-2);

    color: var(--alpha-text-accent);

    font-size: var(--alpha-font-size-caption);
    font-weight: var(--alpha-font-weight-bold);

    letter-spacing: var(--alpha-letter-spacing-label);
}

.alpha-timeline-demo__title {
    margin: 0 0 var(--alpha-spacing-3);

    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-display);
    font-size: var(--alpha-font-size-h1);
    line-height: var(--alpha-line-height-heading);
}

.alpha-timeline-demo__description {
    max-width: 720px;
    margin: 0;

    color: var(--alpha-text-secondary);
}


/* =========================================================
   2. TIMELINE CONTAINER
   ========================================================= */

.alpha-timeline {
    width: 100%;

    background: var(--alpha-surface-primary);

    border:
        var(--alpha-border-thin)
        solid
        var(--alpha-border-default);

    border-radius: var(--alpha-radius-md);

    box-shadow: var(--alpha-shadow-subtle);

    overflow: hidden;
}


/* =========================================================
   3. TIMELINE HEADER
   ========================================================= */

.alpha-timeline__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--alpha-spacing-4);

    padding:
        var(--alpha-spacing-5)
        var(--alpha-spacing-6);

    border-bottom:
        var(--alpha-border-thin)
        solid
        var(--alpha-border-default);
}

.alpha-timeline__eyebrow {
    margin: 0 0 var(--alpha-spacing-1);

    color: var(--alpha-text-accent);

    font-size: var(--alpha-font-size-caption);
    font-weight: var(--alpha-font-weight-bold);

    letter-spacing: var(--alpha-letter-spacing-label);
}

.alpha-timeline__title {
    margin: 0;

    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-display);
    font-size: var(--alpha-font-size-h3);
    font-weight: var(--alpha-font-weight-bold);

    line-height: var(--alpha-line-height-heading);
}

.alpha-timeline__status {
    flex: 0 0 auto;

    color: var(--alpha-text-accent);

    font-family: var(--alpha-font-mono);
    font-size: var(--alpha-font-size-caption);
    font-weight: var(--alpha-font-weight-bold);

    letter-spacing: var(--alpha-letter-spacing-label);
}


/* =========================================================
   4. TIMELINE LIST
   ========================================================= */

.alpha-timeline__list {
    position: relative;

    margin: 0;
    padding:
        var(--alpha-spacing-6)
        var(--alpha-spacing-6)
        var(--alpha-spacing-6)
        calc(
            var(--alpha-spacing-6) +
            var(--alpha-spacing-4)
        );

    list-style: none;
}


/* =========================================================
   5. VERTICAL TIMELINE LINE
   ========================================================= */

.alpha-timeline__list::before {
    content: "";

    position: absolute;

    top: var(--alpha-spacing-6);
    bottom: var(--alpha-spacing-6);

    left: calc(
        var(--alpha-spacing-6) +
        var(--alpha-spacing-4)
    );

    width: var(--alpha-border-thin);

    background: var(--alpha-border-default);
}


/* =========================================================
   6. TIMELINE ITEM
   ========================================================= */

.alpha-timeline__item {
    position: relative;

    display: grid;

    grid-template-columns:
        var(--alpha-spacing-8)
        minmax(0, 1fr);

    column-gap: var(--alpha-spacing-4);

    min-width: 0;
}

.alpha-timeline__item + .alpha-timeline__item {
    margin-top: var(--alpha-spacing-6);
}


/* =========================================================
   7. TIMELINE MARKER
   ========================================================= */

.alpha-timeline__marker {
    position: relative;
    z-index: 1;

    width: var(--alpha-spacing-3);
    height: var(--alpha-spacing-3);

    margin-top: var(--alpha-spacing-1);

    background: var(--alpha-surface-primary);

    border:
        2px
        solid
        var(--alpha-interactive-focus);

    border-radius: var(--alpha-radius-full);

    box-shadow:
        0 0 0 4px
        var(--alpha-surface-primary);
}


/* =========================================================
   8. TIMELINE CONTENT
   ========================================================= */

.alpha-timeline__content {
    min-width: 0;
}

.alpha-timeline__meta {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: var(--alpha-spacing-3);

    margin-bottom: var(--alpha-spacing-2);
}

.alpha-timeline__date {
    color: var(--alpha-text-muted);

    font-family: var(--alpha-font-mono);
    font-size: var(--alpha-font-size-caption);
    font-weight: var(--alpha-font-weight-bold);

    letter-spacing: var(--alpha-letter-spacing-label);
}

.alpha-timeline__tag {
    padding:
        var(--alpha-spacing-2)
        var(--alpha-spacing-3);

    color: var(--alpha-text-accent);

    border:
        var(--alpha-border-medium)
        solid
        var(--alpha-border-accent);

    border-radius: var(--alpha-radius-sm);

    font-family: var(--alpha-font-mono);
    /* Table 15 lists "Data | 10pt | Regular | Aptos Mono" - this chip
       already sets font-family: mono, so it's a Data-tier element, not
       a Caption one. Switched to the data token (15px) so its size
       tracks the typeface it's actually using, and reads as a proper
       at-a-glance status marker rather than passive metadata. Padding
       and border bumped to match. */
    font-size: var(--alpha-font-size-data);
    font-weight: var(--alpha-font-weight-bold);

    letter-spacing: var(--alpha-letter-spacing-label);
}


/* =========================================================
   9. EVENT TITLE
   ========================================================= */

.alpha-timeline__event-title {
    margin: 0 0 var(--alpha-spacing-2);

    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-display);
    font-size: var(--alpha-font-size-h4);
    font-weight: var(--alpha-font-weight-bold);

    line-height: var(--alpha-line-height-heading);
}


/* =========================================================
   10. EVENT DESCRIPTION
   ========================================================= */

.alpha-timeline__event-description {
    max-width: 680px;

    margin: 0;

    color: var(--alpha-text-secondary);

    /* Held at --alpha-font-size-body (16px): this is real reading
       copy, not metadata, so it can't drop below the Sec 02.21 screen
       accessibility floor. Its "smaller" reading against the now-
       bigger tag/title above it comes from tighter leading instead -
       Table 16 gives Body a 13.2pt/10.5pt = ~1.26 leading ratio, which
       --alpha-line-height-compact (1.3) matches far more closely than
       the loose long-form 1.5 used elsewhere. */
    font-size: var(--alpha-font-size-body);
    line-height: var(--alpha-line-height-compact);
}


/* =========================================================
   11. HOVER
   ========================================================= */

.alpha-timeline__item {
    transition:
        transform
        var(--alpha-motion-duration-fast)
        var(--alpha-motion-ease-standard);
}

.alpha-timeline__item:hover {
    transform: translateX(var(--alpha-spacing-1));
}

.alpha-timeline__item:hover
.alpha-timeline__marker {
    background: var(--alpha-interactive-focus);
}


/* =========================================================
   12. FOCUS
   ========================================================= */

.alpha-timeline__item:focus-within {
    outline:
        var(--alpha-border-medium)
        solid
        var(--alpha-interactive-focus);

    outline-offset: var(--alpha-spacing-2);
}


/* =========================================================
   13. RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {

    .alpha-timeline-demo {
        padding: var(--alpha-spacing-4);
    }

    .alpha-timeline__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .alpha-timeline__list {
        padding:
            var(--alpha-spacing-5)
            var(--alpha-spacing-4)
            var(--alpha-spacing-5)
            calc(
                var(--alpha-spacing-4) +
                var(--alpha-spacing-3)
            );
    }

    .alpha-timeline__list::before {
        top: var(--alpha-spacing-5);
        bottom: var(--alpha-spacing-5);

        left: calc(
            var(--alpha-spacing-4) +
            var(--alpha-spacing-3)
        );
    }

    .alpha-timeline__item {
        grid-template-columns:
            var(--alpha-spacing-6)
            minmax(0, 1fr);

        column-gap: var(--alpha-spacing-3);
    }

    .alpha-timeline__item + .alpha-timeline__item {
        margin-top: var(--alpha-spacing-5);
    }

    .alpha-timeline__event-title {
        font-size: var(--alpha-font-size-h4);
    }
}


/* =========================================================
   14. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .alpha-timeline__item {
        transition: none;
    }

    .alpha-timeline__item:hover {
        transform: none;
    }
}