/* ==========================================================================
   STRUTTURA PRINCIPALE DELLA TIMELINE
   ========================================================================== */
.timeline-container {
  position: relative;
  width: 100%;
  padding: 10px 0;
}

/* La linea verticale centrale grigia (Solo Desktop) */
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #dee2e6;
  transform: translateX(-50%);
  z-index: 1;
}

/* Stile base delle card degli eventi */
.timeline-card {
  border: 1px solid #e9ecef;
  position: relative;
  z-index: 2;
  transition: transform 0.2s ease-in-out;
}
.timeline-card:hover {
  transform: translateY(-3px);
}

/* Forza il colore di lettura chiaro sulle card scure (es. anno 547) */
.card-text-custom {
  color: #e0e0e0 !important;
}

/* ==========================================================================
   COMPORTAMENTO DESKTOP (Da 768px in su)
   ========================================================================== */
@media (min-width: 768px) {
  .timeline-row {
    position: relative;
    display: flex;
    align-items: center; /* Centra verticalmente la card rispetto al pallino se necessario */
  }

  /* 
     IL SEGRETO: Creiamo un unico pallino agganciato alla riga (.timeline-row).
     Essendo posizionato al left: 50%, si allinea SPACCATO al centro sulla linea grigia.
  */
  .timeline-row::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 35px; /* Altezza del pallino rispetto alla card */
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #0d6efd; /* Colore Blu di default */
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #dee2e6;
    transform: translateX(-50%); /* Centra perfettamente l'asse del cerchio */
    z-index: 3;
  }

  /* Cambia il colore del pallino in VERDE se la card dell'evento va a DESTRA */
  .timeline-row:has(.timeline-content-right)::after {
    background-color: #198754;
  }
}

/* ==========================================================================
   COMPORTAMENTO MOBILE (Sotto i 768px)
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Trasforma il layout in una linea continua sulla sinistra */
  .timeline-container {
    border-left: 2px solid #dee2e6;
    padding-left: 20px;
  }
  
  /* Rimuove i margini di spaziatura superflui della griglia su mobile */
  .timeline-row .col-12 {
    margin-bottom: 0;
  }
}