/* ==========================================================
   UNNC Responsive Timeline Widget
   timeline.css
   Version 2.0
========================================================== */

:root {

    --primary: #10263B;
    --accent: #0057B8;

    --background: #F6F8FA;
    --card: #FFFFFF;

    --text: #1F2937;
    --muted: #6B7280;

    --border: #DCE3EB;

    --radius: 10px;

    --shadow:
        0 6px 18px rgba(16,38,59,.10);

    --card-width: 300px;

    --line-width: 4px;

    --dot-size: 18px;

}

/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

body{

    margin:0;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    color:var(--text);

    background:#fff;

}

/* ==========================================================
   SECTION
========================================================== */

.timeline-section{

    width:100%;

    background:var(--background);

    padding:20px 0;

}

/* ==========================================================
   WRAPPER
========================================================== */

.timeline-wrapper{

    overflow-x:auto;

    overflow-y:hidden;

    cursor:grab;

    scroll-behavior:smooth;

    scrollbar-width:none;

}

.timeline-wrapper::-webkit-scrollbar{

    display:none;

}

/* ==========================================================
   TRACK
========================================================== */

.timeline-track{

    position:relative;

    display:flex;

    gap:100px;

    align-items:center;

    min-width:max-content;

    padding:50px 120px;

    scroll-snap-type:x mandatory;

}

/* Timeline line */

.timeline-track::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:50%;

    height:var(--line-width);

    background:var(--primary);

    transform:translateY(-50%);

    z-index:0;

}

/* ==========================================================
   ITEM
========================================================== */

.timeline-item{

    position:relative;

    display:grid;

    grid-template-columns:1fr;

    width:var(--card-width);

    flex:none;

    scroll-snap-align:center;

    z-index:2;

}

/* ==========================================================
   ALTERNATING GRID
========================================================== */

.timeline-item:nth-child(odd){

    grid-template-rows:

        auto

        auto

        40px;

}

.timeline-item:nth-child(even){

    grid-template-rows:

        40px

        auto

        auto;

}

/* ==========================================================
   DATE
========================================================== */

.timeline-date{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    margin:12px 0;

}

.timeline-item:nth-child(odd) .timeline-date{

    grid-row:2;

}

.timeline-item:nth-child(even) .timeline-date{

    grid-row:2;

}

.month{

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:var(--accent);

}

.year{

    font-size:1.35rem;

    font-weight:700;

    color:var(--primary);

}

/* ==========================================================

   IMAGE

========================================================== */

.timeline-image{

    display:block;

    width:calc(100% + 48px);

    margin:-24px -24px 20px;

    aspect-ratio:16 / 9;

    object-fit:cover;

    border-radius:

        var(--radius)

        var(--radius)

        0

        0;

    background:#E9EEF3;

    border-bottom:1px solid var(--border);

}

/* ==========================================================
   CARD
========================================================== */

.timeline-card{

    background:var(--card);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:24px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.timeline-item:nth-child(odd) .timeline-card{

    grid-row:1;

}

.timeline-item:nth-child(even) .timeline-card{

    grid-row:3;

}

.timeline-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 12px 28px rgba(16,38,59,.18);

}

.timeline-card h3{

    margin:0 0 12px;

    font-size:1.2rem;

    color:var(--primary);

}

.timeline-card p{

    margin:0;

    line-height:1.6;

    color:var(--muted);

}

.timeline-card a{

    display:inline-block;

    margin-top:16px;

    text-decoration:none;

    color:var(--accent);

    font-weight:600;

}

.timeline-card a:hover{

    text-decoration:underline;

}

/* ==========================================================
   DOT
========================================================== */

.timeline-dot{

    justify-self:center;

    align-self:center;

    width:var(--dot-size);

    height:var(--dot-size);

    border-radius:50%;

    background:#fff;

    border:4px solid var(--primary);

    transition:
        transform .25s ease,
        background .25s ease;

}

.timeline-item:nth-child(odd) .timeline-dot{

    grid-row:3;

}

.timeline-item:nth-child(even) .timeline-dot{

    grid-row:1;

}

.timeline-item:hover .timeline-dot{

    transform:scale(1.25);

}

/* ==========================================================
   ACTIVE
========================================================== */

.timeline-item.active .timeline-dot{

    background:var(--accent);

    border-color:var(--accent);

}

.timeline-item.active .timeline-card{

    border-top:4px solid var(--accent);

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .timeline-wrapper{

        overflow:visible;

        cursor:default;

    }

    .timeline-track{

        display:block;

        min-width:100%;

        padding:20px 10px 20px 0px;

    }

    .timeline-track::before{

        top:0;

        bottom:0;

        left:30px;

        right:auto;

        width:4px;

        height:auto;

        transform:none;

    }

    .timeline-item{

        display:block;

        width:auto;

        margin:0 0 50px;

        padding-left:70px;

    }

    .timeline-date{

        align-items:flex-start;

        margin:0 0 15px;

    }

    .timeline-dot{

        position:absolute;

        left:22px;

        top:28px;

    }

    .timeline-card{

        margin-top:10px;

    }

}

/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    *{

        scroll-behavior:auto !important;

        transition:none !important;

    }

}