/* Timeline
   Valori letti da `Tappa Timeline` (§59) e dal wrapper `timeline` di `bluenergy - la nostra
   storia`, non stimati:

     wrapper        padding 60 sopra e 160 sotto, stacco 160 fra le tappe, gabbia 1600
     linea          3 di larghezza, `Primary`, raggio 2 · al centro della gabbia
     tappa          riga: due colonne da 680, gap 160, padding laterale 40, centrate in verticale
     testo          anno `numeri xl` 120/100 Barlow Condensed Bold `Secondary` · stacco 12 ·
                    titolo H2 48/58 Bold `Primary` · stacco 32 · corpo `body s` 18/28 `Dark gray`
     foto           680×540, `object-fit: cover` (il fill del frame)
     pallino        anello: 28 `Secondary` con un disco bianco da 14 · centrato sulla prima
                    riga dell'anno (§71, 28/09: a 1920 cade a 163 e 135). I 174 fissi di prima
                    restano come ripiego senza ancore CSS: vedi in fondo

   Sotto i 1100 la riga non regge: «Anni 2000» a 120 chiede ~450px e la colonna ne ha ~340.
   Lì le tappe si impilano, e la linea passa a sinistra. **Non c'è una reference mobile**
   («MOBILE REF: da costruire» sul componente): è una scelta nostra, dichiarata sotto. */

.tl {
  --tl-navy: var(--color-primary, #004278);
  --tl-secondary: var(--color-secondary, #467fbd);
  --tl-dark-gray: var(--color-dark-gray, #434750);
  --tl-white: var(--color-white, #ffffff);

  --tl-max: 1600px;
  --tl-gutter: clamp(24px, 8.889vw - 10.67px, 160px);
  --tl-font: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tl-font-num: "Barlow Condensed", Barlow, system-ui, sans-serif;

  /* Lo stacco fra le tappe: serve anche al tratto di linea, che lo deve scavalcare. */
  --tl-stacco: 160px;
  /* Dove sta il pallino dentro la tappa (vincolo `MIN` in Figma: dal bordo alto), e il suo
     centro — che è dove comincia il tratto di linea. */
  --tl-pallino-top: 174px;
  --tl-pallino: 28px;
  --tl-pallino-centro: calc(var(--tl-pallino-top) + var(--tl-pallino) / 2);
  --tl-linea: 3px;
  /* Il centro della linea e dei pallini: il mezzo della tappa a desktop, il bordo sinistro
     sotto la soglia. */
  --tl-asse: 50%;

  box-sizing: border-box;
  /* 60 e 160 sono grezzi nel wrapper: 60 segue il `titolo testo` che introduce la timeline
     (che ha già i suoi 60 sotto), 160 chiude prima del footer. */
  padding: 60px 0 160px;
  /* **Nessun fondo sulla radice**: il bianco è della pagina. */
  font-family: var(--tl-font);
  color: var(--tl-dark-gray);
}
.tl *,
.tl *::before,
.tl *::after { box-sizing: border-box; }

.tl__inner {
  max-width: calc(var(--tl-max) + 2 * var(--tl-gutter));
  margin: 0 auto;
  padding: 0 var(--tl-gutter);
}

.tl__tappe {
  display: flex;
  flex-direction: column;
  gap: var(--tl-stacco);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- La tappa ----------------------------------------------------------------------------- */
.tl__tappa {
  position: relative;
  display: flex;
  align-items: center;
  gap: 160px;
  margin: 0;
  padding: 0 40px;
}

.tl__testo,
.tl__foto {
  flex: 1 1 0;
  min-width: 0;
}

/* La colonna di testo è un container: l'anno si misura su di lei, vedi `.tl__anno`. */
.tl__testo { container-type: inline-size; }

/* `Invertito`: la foto passa a sinistra. Solo l'ordine visivo — nel markup il testo resta
   prima, così chi legge con uno screen reader o senza CSS trova sempre anno, titolo, testo. */
.tl__tappa--invertita .tl__foto { order: -1; }

/* ---- La linea e il pallino -----------------------------------------------------------------
   Ogni tappa tranne l'ultima disegna il tratto fino al pallino della successiva: parte dal
   proprio centro (188) e scende della propria altezza più lo stacco, cioè arriva esattamente
   a 188 dentro la tappa dopo. I tratti si toccano sotto i pallini, che li coprono. */
.tl__tappa:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: var(--tl-asse);
  top: var(--tl-pallino-centro);
  width: var(--tl-linea);
  height: calc(100% + var(--tl-stacco));
  border-radius: 2px;
  background: var(--tl-navy);
  transform: translateX(-50%);
}

/* L'anello: un bordo `Secondary` da 7 attorno a un disco bianco da 14, come i due cerchi
   del componente. */
.tl__pallino {
  position: absolute;
  z-index: 1;
  left: var(--tl-asse);
  top: var(--tl-pallino-top);
  width: var(--tl-pallino);
  height: var(--tl-pallino);
  border: 7px solid var(--tl-secondary);
  border-radius: 50%;
  background: var(--tl-white);
  transform: translateX(-50%);
}

/* ---- Testo -------------------------------------------------------------------------------- */
/* Il tema dichiara margini e tipografia su heading e `p`: vanno ridichiarati. */
.tl__intestazione {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 32px;
  font-family: var(--tl-font);
}

.tl__anno {
  font-family: var(--tl-font-num);
  font-size: 12rem;
  font-weight: 700;
  line-height: 0.83333;
  color: var(--tl-secondary);
  white-space: nowrap;
}

/* **L'anno scala con la colonna, non con lo schermo.** A 120 «Anni 2000» è largo ~450: sta nei
   680 della colonna a 1920, ma a 1280 la colonna è 417 e l'anno sbordava sulla linea.
   17,65 `cqi` sono 120 su una colonna da 680, quindi a 1920 non cambia niente; sotto, l'anno
   si stringe insieme alla colonna e il rapporto resta quello disegnato. Il tetto in `rem`
   tiene l'ingrandimento del testo del browser (1.4.4). Senza container query resta 120. */
@supports (font-size: 1cqi) {
  .tl__anno { font-size: min(12rem, 17.65cqi); }
}

/* La virgola fra anno e titolo è per chi ascolta: «1976, La fondazione». A vista i due stanno
   su righe diverse e non ne hanno bisogno. */
.tl__sep {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tl__titolo {
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.20833;
  color: var(--tl-navy);
  overflow-wrap: break-word;
}

.tl__descrizione,
.tl__descrizione > p,
.tl__descrizione li {
  margin: 0;
  font-family: var(--tl-font);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.55556;
  color: var(--tl-dark-gray);
}
.tl__descrizione > p + p { margin-top: 1em; }

/* ---- Foto --------------------------------------------------------------------------------- */
/* Il rapporto e non i 540: fra 1100 e 1920 la colonna si stringe, e un'altezza fissa
   trasformerebbe una foto orizzontale in una verticale. A 1920 fa esattamente 680×540. */
.tl__foto {
  aspect-ratio: 680 / 540;
  overflow: hidden;
}
.tl__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Sotto la soglia ---------------------------------------------------------------------
   Nessuna reference: scelta nostra, chiesta alla grafica.
   - le tappe si impilano, **testo sopra e foto sotto in tutte**: impilando, l'alternanza non
     esiste più, e l'ordine resta quello del markup;
   - **la linea passa a sinistra**, il contenuto rientra di 48: il pallino si allinea al centro
     della prima riga dell'anno invece che ai 174 del desktop, che su una tappa impilata
     cadrebbero a metà del titolo;
   - l'anno scende a `numeri` 72/60 (in scala non c'è un `numeri xl mobile`), il titolo a
     `H2 mobile` 32/37, il corpo resta `body s`. */
@media (max-width: 1099px) {
  .tl {
    --tl-stacco: 64px;
    --tl-asse: 14px;
    --tl-pallino-top: 16px;
    padding: 48px 0 96px;
  }

  .tl__tappa {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 0 0 0 48px;
  }

  .tl__testo,
  .tl__foto { flex: none; }

  /* Impilata, la foto non supera la sua misura di disegno: a 1099 sarebbe larga 877. */
  .tl__foto { width: 100%; max-width: 680px; }

  .tl__tappa--invertita .tl__foto { order: 0; }

  .tl__intestazione { gap: 8px; margin-bottom: 16px; }

  .tl__anno { font-size: 7.2rem; }

  .tl__titolo { font-size: 3.2rem; line-height: 1.15625; }
}

/* ---- Pallino e linea ancorati all'anno (§71, punto 9.3, 28/09) -----------------------------
   🔒 **Il pallino si allinea alla prima riga dell'anno**, in tutte e due le varianti e in
   mobile: la grafica l'ha spostato da 174 a 163 (`Standard`) e 135 (`Invertito`), ed è un
   allineamento, non un nuovo offset — il testo è centrato in verticale accanto alla foto, e se
   cresce l'anno sale, e un numero fisso finirebbe sul titolo.

   Con il pallino a una quota diversa in ogni tappa, un tratto «dal proprio pallino a quello
   della tappa dopo» non si calcola più in CSS: la sua lunghezza dipende da due testi. Qui la
   linea torna **un elemento solo, come in Figma**: dal centro del primo pallino a quello
   dell'ultimo. Sia i pallini sia la linea sono posizionati con le **ancore CSS**:
   - ogni pallino si ancora all'anno della propria tappa (`anchor-scope` tiene il nome
     `--tl-anno` dentro la tappa, altrimenti vincerebbe l'ultimo anno della pagina) e ne prende
     il centro: l'anno è su una riga sola (`nowrap`), quindi il centro del box è il centro della
     riga. Senza anno, il ripiego è la quota di prima;
   - la linea si ancora al primo e all'ultimo pallino. Sta sull'`::after` della lista, cioè dopo
     tutti i pallini nell'albero: un'ancora deve essere disposta prima di chi la usa.

   Dentro `@supports`: senza ancore (o senza `anchor-scope`, arrivato dopo) resta tutto com'era —
   pallino a quota fissa e tratti per tappa, qui sopra. */
@supports (anchor-name: --tl-a) and (anchor-scope: --tl-a) {
  .tl__tappa { anchor-scope: --tl-anno; }
  .tl__anno { anchor-name: --tl-anno; }

  .tl__pallino {
    top: anchor(--tl-anno center, var(--tl-pallino-centro));
    transform: translate(-50%, -50%);
  }
  .tl__tappa:first-child .tl__pallino { anchor-name: --tl-primo; }
  .tl__tappa:last-child .tl__pallino { anchor-name: --tl-ultimo; }
  .tl__tappa:only-child .tl__pallino { anchor-name: --tl-primo, --tl-ultimo; }

  .tl__tappa:not(:last-child)::before { content: none; }
  .tl__tappe { position: relative; }
  .tl__tappe::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: var(--tl-asse);
    top: anchor(--tl-primo center);
    bottom: anchor(--tl-ultimo center);
    width: var(--tl-linea);
    border-radius: 2px;
    background: var(--tl-navy);
    transform: translateX(-50%);
  }
}