/* ==========================================================
   TIMELINE (Education & Experience)
========================================================== */

.timeline{
    display:flex;
    flex-direction:column;
    gap:3rem;
    max-width:900px;
    margin:0 auto;
}

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

.timeline__item{
    width:100%;
}

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

.timeline__card{

    display:flex;
    flex-direction:column;
    gap:2.5rem;

    padding:2.8rem;

    background:var(--color-surface);

    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.timeline__card:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}

/* ==========================================================
   HEADER
========================================================== */

.timeline__header{

    display:flex;
    align-items:center;
    gap:2rem;

}

/* ==========================================================
   LOGO
========================================================== */

.timeline__logo{

    width:64px;
    height:64px;

    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:.8rem;

    background:var(--color-surface);

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

    border-radius:16px;

}

.timeline__logo img{

    width:100%;
    height:100%;

    object-fit:contain;

}

/* ==========================================================
   CONTENT
========================================================== */

.timeline__content{

    flex:1;

}

.timeline__heading{

    margin-bottom:.5rem;

    font-size:2.1rem;
    font-weight:700;

    color:var(--color-text);

}

.timeline__subheading{

    font-size:1.7rem;

    font-weight:600;

    color:var(--color-primary);

}

.timeline__subheading a{

    color:inherit;

    transition:var(--transition);

}

.timeline__subheading a:hover{

    color:var(--color-primary-dark);

    text-decoration:underline;

}

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

.timeline__date{

    display:inline-block;

    margin-top:1.5rem;

    padding:.6rem 1.4rem;

    border-radius:999px;

    background:var(--color-primary-light);

    color:var(--color-primary-dark);

    font-size:1.3rem;

    font-weight:600;

}

/* ==========================================================
   DESCRIPTION
========================================================== */

.timeline__text{

    line-height:1.8;

    color:var(--color-text-light);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:768px){

    .timeline__card{

        padding:2.2rem;

    }

    .timeline__header{

        align-items:flex-start;

    }

    .timeline__logo{

        width:56px;
        height:56px;

    }

}

@media (max-width:576px){

    .timeline__heading{

        font-size:1.9rem;

    }

    .timeline__subheading{

        font-size:1.5rem;

    }

    .timeline__text{

        font-size:1.5rem;

    }

}