/*==================================================
  EXPERIENCE
==================================================*/

.experience{

    background:var(--background);

    transition:var(--transition);

}


/*==================================================
  TIMELINE
==================================================*/

.timeline{

    display:flex;

    flex-direction:column;

    gap:40px;

}


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

.timeline-card{

    display:grid;

    grid-template-columns:100px 1fr;

    gap:40px;

    align-items:flex-start;

    padding:40px;

    background:var(--surface);

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

    border-radius:28px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.timeline-card:hover{

    transform:translateY(-6px);

}


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

.company-column{

    display:flex;

    justify-content:center;

    align-items:flex-start;

}

.company-column img{

    width:72px;

    height:72px;

    object-fit:contain;

}


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

.timeline-content{

    width:100%;

}


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

.timeline-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-bottom:20px;

}

.timeline-header h3{

    color:var(--text);

    font-size:1.5rem;

    margin-bottom:6px;

}

.timeline-header h4{

    color:var(--primary);

    font-weight:600;

}

.timeline-date{

    white-space:nowrap;

    color:var(--text-light);

    font-weight:600;

}

/*==================================================
  COMPANY BADGE
==================================================*/

.company-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:8px;

    padding:8px 14px;

    border-radius:999px;

    background:var(--surface-light);

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

    transition:var(--transition);

}

.company-badge:hover{

    border-color:var(--primary);

    transform:translateY(-2px);

}

.company-badge img{

    width:18px;

    height:18px;

    object-fit:contain;

}

.company-badge span{

    color:var(--primary);

    font-size:.9rem;

    font-weight:600;

}

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

.timeline-content p{

    color:var(--text-light);

    line-height:1.8;

    margin-bottom:28px;

}


/*==================================================
  ACHIEVEMENTS
==================================================*/

.achievement-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

    margin-bottom:30px;

}

.achievement-list div{

    padding:14px 18px;

    background:var(--surface-light);

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

    border-radius:14px;

    color:var(--text);

    transition:var(--transition);

}

.achievement-list div:hover{

    transform:translateY(-3px);

    border-color:var(--primary);

}


/*==================================================
  TECH STACK
==================================================*/

.tech-stack{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.tech-stack span{

    padding:10px 18px;

    border-radius:999px;

    background:var(--surface-light);

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

    color:var(--text);

    font-size:.85rem;

    font-weight:600;

    transition:var(--transition);

}

.tech-stack span:hover{

    background:var(--primary);

    color:#ffffff;

    transform:translateY(-2px);
    
}


/*==================================================
  LIGHT MODE TWEAKS
==================================================*/

[data-theme="light"] .timeline-card{

    box-shadow:0 12px 30px rgba(15,23,42,.08);

}

[data-theme="light"] .achievement-list div{

    background:#f8fafc;

}

[data-theme="light"] .tech-stack span{

    background:#eef3f8;

}