.timeline {
  display: flex;
  flex-direction: column;
  width: 85vw;
  padding-bottom: 60px;
}

.hero {height: 100%; flex-direction: column;}
.hero h2{margin-top: 5%; }

.timeline__event {
  background: #fff;
  margin: 10px 0;
  position: relative;
  display: flex;
  border-radius: 8px;
  box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25),
              0 18px 36px -18px rgba(0, 0, 0, 0.3),
              0 -12px 36px -8px rgba(0, 0, 0, 0.025);
  margin-left: 50px;
  height: 165px;

}

.timeline__event__title {
  font-size: 1.2rem;
  line-height: 1.4;
  text-transform: uppercase;
  font-weight: 600;
  color: #9251ac;
  letter-spacing: 1.5px;
}

.timeline__event__content {
  padding: 20px;
  color: black;
  flex-basis: 60%;
}

.timeline__event__date {
  color: #f6a4ec;
  font-size: 1.1rem;
  font-weight: 600;
  white-space: nowrap;
}

.timeline__event__icon {
  border-radius: 8px 0 0 8px;
  background: #9251ac;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 40%;
  font-size: 2rem;
  color: #9251ac;
  position: relative;
  }

.timeline__event__icon i {
  position: absolute;
  top: 50%;
  left: -74px;
  font-size: 2.5rem;
  transform: translateY(-50%);
}

.timeline__event__description {
  flex-basis: 60%;
  flex-shrink: 1;   /* permette al box di ridursi se necessario */
  min-width: 0;     /* evita che il contenitore non si riduca */
  word-wrap: break-word; /* spezza parole lunghe */
}

.timeline__event__description p{margin: 1%;}

.timeline__event:after {
  content: "";
  width: 2px;
  height: 120%;
  background: #9251ac;
  position: absolute;
  top: 52%;
  left: -3.5rem;
  z-index: -1;
}

.timeline__event:before {
  content: "";
  width: 5rem;
  height: 5rem;
  position: absolute;
  background: #f6a4ec;
  border-radius: 100%;
  left: -6rem;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid #9251ac;
  align-items: center;
}

.timeline__event--type2:before {
  background: #87bbfe;
  border-color: #555ac0;
}

.timeline__event--type2:after {
  background: #555ac0;
}

.timeline__event--type2 .timeline__event__date {
  color: #87bbfe;
}

.timeline__event--type2 .timeline__event__icon {
  background: #555ac0;
  color: #555ac0;
}

.timeline__event--type2 .timeline__event__title {
  color: #555ac0;
}

.timeline__event--type3:before {
  background: #aff1b6;
  border-color: #24b47e;
}

.timeline__event--type3:after {
  background: #24b47e;
}

.timeline__event--type3 .timeline__event__date {
  color: #aff1b6;
}

.timeline__event--type3 .timeline__event__icon {
  background: #24b47e;
  color: #24b47e;
}

.timeline__event--type3 .timeline__event__title {
  color: #24b47e;
}

.timeline__event:last-child:after {
  content: none;
}



/* Eventi type4 – audio */
.timeline__event--type4 {
  background: #fff2e6; /* sfondo testo: beige chiaro/pesca delicato */
}

.timeline__event--type4:before {
  background: #ffe5d0;   /* pesca tenue morbido */
  border-color: #ff9e6d; /* accento arancio soft */
}

.timeline__event--type4:after {
  background: #ff9e6d;   /* accento arancio armonico */
}

.timeline__event--type4 .timeline__event__date {
  color: black; /* leggibile sullo sfondo chiaro */
}

.timeline__event--type4 .timeline__event__icon {
  background: #ff9e6d;
  color: #fff; /* bianco per contrasto */
}

.timeline__event--type4 .timeline__event__title {
  color: #e6734d; /* arancio più scuro ma armonico */
}



.timeline__event__media {
   margin-left: 10%;
   margin-top: 4px;
   margin-bottom: 4px;
}

.timeline__event__media img {
  width: 150px;            /* larghezza uniforme */
  height: 150px;           /* altezza uniforme */
  object-fit: cover;       /* ritaglia proporzionalmente senza deformare */
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.video-link {
  display: inline-block;
  margin-top: 2%;
  text-align: center;
  font-weight: 600;
  color: #e63946;   /* rosso acceso tipo YouTube */
  text-decoration: none;

}

.video-link:hover {
  text-decoration: underline;
}

.timeline__event--type1 {
  background: #d9d9d9; /* grigio medio chiaro */
}

.timeline__event--type1:before {
  background: #87bbfe;
  border-color: #555ac0;
}

.timeline__event--type1:after {
  background: #555ac0;
}

.timeline__event--type1 .timeline__event__date {
  color: #87bbfe;
}

.timeline__event--type1 .timeline__event__icon {
  background: #555ac0;
  color: #555ac0;
}

.timeline__event--type1 .timeline__event__title {
  color: #555ac0;
}
.desc_piccola{font-size: 0.9rem;}
@media (max-width: 1024px)
{
  .desc_piccola{font-size: 0.7rem;}
  .timeline__event__media img
  {
    width: 95px;
    height: 95px;
  }

  .timeline__event__title
  {
    font-size: 0.8rem;
  }
}

@media (max-width: 786px) {
  .timeline__event {
    flex-direction: column;
    height: 225px;
  }

  .hero h2{margin-top: 15%; }

  .timeline__event__icon {
    border-radius: 4px 4px 0 0;
  }

  .timeline__event__media img
  {
    width: 90px;
    height: 90px;
  }

  .timeline__event:before {
    width: 3rem;
    height: 3rem;
    left: -4.5rem;
    top: 50%;
    transform: translateY(-120%);
  }

  .timeline__event__icon i {
    position: absolute;
    top: 73%;
    left: -60px;
    font-size: 1.5rem;
    transform: translateY(-50%);
  }

  .more-top{ top:95% !important;}

  .timeline__event:after
  {
    left: -3rem;
    top: 30%;
  }

  .timeline__event__title
  {
    font-size: 0.7rem;
  }

  .timeline__event__content{padding: 10px;}
  .desc_piccola{font-size: 0.8rem;}
}
}