/* ========================================
   FILE: experience.css
   DESCRIZIONE: Stili per la sezione Esperienza (Timeline).
   ======================================== */

.experience-item {
    border-left: 2px solid #ddd;
    padding-left: 1.5rem;
    margin-bottom: 2rem;
    position: relative;
}

.experience-item.featured {
    border-left-color: #1877F2;
}

.experience-item h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

/* Contenitore flessibile per azienda + data */
.experience-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem; /* Distanza orizzontale tra scritta e data */
    margin-bottom: 0.5rem;
}

.experience-item .company {
    color: #1877F2;
    font-weight: 600;
}

.experience-item .company.past {
    color: #6f7a87;
}

/* Allineamento dell'icona e del testo della data */
.experience-date {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* Distanza tra icona calendario e testo dell'anno */
    color: #6f7a87;
    font-size: 0.9rem;
    font-weight: 600;
}

.experience-date svg {
    width: 18px;
    height: 18px;
    color: #6f7a87;
}

/* Testo descrittivo del paragrafo */
.experience-item p {
    color: #000;
    line-height: 1.8;
    font-weight: 600;
}

/* NOTA RESPONSIVE: 
   Questa sezione non necessita di media queries specifiche. 
   La struttura a blocco con bordo a sinistra si adatta 
   già perfettamente agli schermi mobile. 
*/