/* =============================================================
   Soccorso Digitale — Barra "Il mio percorso"
   (blocco sotto "Perché Soccorso Digitale")
   -------------------------------------------------------------
   File esterno da caricare via FTP, ad esempio nel child theme:
     /wp-content/themes/<child-theme>/css/timeline.css
   e da collegare nel <head> del sito (Divi > Opzioni del tema >
   Integrazione > Aggiungi codice all'<head>):
     <link rel="stylesheet" href="/wp-content/themes/<child-theme>/css/timeline.css">
   Va usato insieme a timeline.html. Non richiede JavaScript.

   1. Variabili
   2. Base e compatibilità Divi
   3. Barra
   4. Tappe
   5. Responsive
   Tutte le classi usano il prefisso "sd-timeline" per non entrare
   in conflitto con gli stili di WordPress/Divi e con le altre sezioni.
   ============================================================= */


/* 1. Variabili ------------------------------------------------ */

.sd-timeline {
  --sd-timeline-navy: #0b2d5b;
  --sd-timeline-teal: #14b8a6;      /* date: 5.5:1 sul blu */
  --sd-timeline-page: #f2f6f9;      /* stesso sfondo di "Perché Soccorso Digitale" */
  --sd-timeline-line: rgba(255, 255, 255, 0.14);
  --sd-timeline-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* 2. Base e compatibilità Divi -------------------------------- */

.sd-timeline,
.sd-timeline *,
.sd-timeline *::before,
.sd-timeline *::after {
  box-sizing: border-box;
}

.sd-timeline {
  padding: 0 0 32px;
  font-family: var(--sd-timeline-font);
  background: var(--sd-timeline-page);
  -webkit-font-smoothing: antialiased;
}

/* Azzeramento di margini, padding ed elenchi che Divi applica */
.sd-timeline p,
.sd-timeline ol,
.sd-timeline li {
  margin: 0;
  padding: 0;
}

.sd-timeline ol {
  list-style: none;
}

.sd-timeline__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}


/* 3. Barra ---------------------------------------------------- */

.sd-timeline .sd-timeline__bar {
  padding: 24px 32px 26px;
  border-radius: 20px;
  background: var(--sd-timeline-navy);
  color: #fff;
}

.sd-timeline .sd-timeline__label {
  color: rgba(255, 255, 255, 0.72);   /* 7.7:1 sul blu */
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* 4. Tappe ---------------------------------------------------- */

/* Desktop: sei tappe su una sola riga */
.sd-timeline .sd-timeline__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px 24px;
  margin-top: 16px;
}

/* Filetto sottile a sinistra di ogni tappa */
.sd-timeline .sd-timeline__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid var(--sd-timeline-line);
}

.sd-timeline__year {
  color: var(--sd-timeline-teal);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sd-timeline__text {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
}


/* 5. Responsive ----------------------------------------------- */

/* Tablet: tre colonne su due righe */
@media (max-width: 1023px) {
  .sd-timeline .sd-timeline__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 20px;
  }
}

/* Smartphone: due colonne su tre righe */
@media (max-width: 599px) {
  .sd-timeline__inner {
    padding: 0 16px;
  }

  .sd-timeline .sd-timeline__bar {
    padding: 20px 20px 22px;
    border-radius: 18px;
  }

  .sd-timeline .sd-timeline__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
  }

  .sd-timeline .sd-timeline__item {
    padding-left: 12px;
  }
}