/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 20 2026 | 09:03:35 */
/* ==========================================================================
   CONTE MANGESA — LA LEGGENDA · SEZIONE 4 · LA FAMIGLIA PERINI (TIMELINE)
   Snippet:   cm-leggenda-timeline (CSS)
   Dove:      Custom CSS & JS → Frontend → Header → File esterno
   Struttura in Elementor (pagina La Leggenda, sotto Formeniga):
     Contenitore (larghezza piena) ................ cm-leggenda-timeline
       ├── Contenitore (intestazione) ............. cm-leggenda-timeline__head
       │     ├── Titolo "LA FAMIGLIA PERINI" (H2)   cm-leggenda-timeline__title
       │     └── Titolo sottotitolo          (p) .. cm-leggenda-timeline__subtitle
       └── Contenitore (elenco delle tappe) ....... cm-leggenda-timeline__list
             └── Contenitore (una tappa) x7 ....... cm-leggenda-timeline__step
                   ├── Titolo data         (div) .. cm-leggenda-timeline__date
                   ├── Titolo sottotitolo  (H3) ... cm-leggenda-timeline__label
                   └── Editor di testo ............ cm-leggenda-timeline__text
   Tutte le tappe allineate a sinistra su un'unica linea oro verticale:
   si legge meglio della versione a zig-zag e su telefono resta identica.
   La linea e i rombi oro li disegna il CSS: nessun widget da aggiungere.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. FASCIA — fondo nero chiaro, per staccarla dalle sezioni vicine
   -------------------------------------------------------------------------- */
.elementor .e-con.cm-leggenda-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 100%;
  padding: 64px var(--cm-gutter);               /* spazio sopra e sotto la sezione */
  background-color: var(--cm-black-light);
}

/* Toglie gli spazi extra che Elementor aggiunge sotto i widget */
.elementor .cm-leggenda-timeline .elementor-widget:not(:last-child) {
  margin-block-end: 0;
}

.elementor .cm-leggenda-timeline .elementor-heading-title {
  margin: 0;
}


/* --------------------------------------------------------------------------
   2. INTESTAZIONE
   -------------------------------------------------------------------------- */
.elementor .e-con.cm-leggenda-timeline__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 820px;
  margin: 0 auto 56px;                          /* spazio tra intestazione e tappe */
  padding: 0;
  text-align: center;
}

.elementor .cm-leggenda-timeline__title .elementor-heading-title {
  font-family: var(--cm-font-display);
  font-size: 46px;                              /* grandezza titolo sezione */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cm-white);
}

.elementor .cm-leggenda-timeline__subtitle {
  margin-top: 14px;
}

.elementor .cm-leggenda-timeline__subtitle .elementor-heading-title {
  font-family: var(--cm-font-body);
  font-size: 21px;                              /* grandezza sottotitolo */
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cm-white-muted);
}


/* --------------------------------------------------------------------------
   3. ELENCO DELLE TAPPE + LINEA ORO VERTICALE
   -------------------------------------------------------------------------- */
.elementor .e-con.cm-leggenda-timeline__list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 44px;                                    /* spazio tra una tappa e l'altra */
  width: 100%;
  max-width: 860px;                             /* larghezza della colonna */
  margin: 0 auto;
  padding: 0;
  text-align: left;
}

/* La linea verticale: parte e finisce sfumata, così non sembra tagliata */
.elementor .e-con.cm-leggenda-timeline__list::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 8px;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--cm-gold-subtle) 6%,
    var(--cm-gold-subtle) 94%,
    transparent 100%
  );
}


/* --------------------------------------------------------------------------
   4. SINGOLA TAPPA + ROMBO ORO
   -------------------------------------------------------------------------- */
.elementor .e-con.cm-leggenda-timeline__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  max-width: 100%;
  padding: 0 0 0 52px;                          /* distanza del testo dalla linea */
}

/* Il rombo oro sulla linea (è un quadratino ruotato di 45 gradi) */
.elementor .e-con.cm-leggenda-timeline__step::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 1px;
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
  background-color: var(--cm-gold);
}

/* Data */
.elementor .cm-leggenda-timeline__date .elementor-heading-title {
  font-family: var(--cm-font-display);
  font-size: 28px;                              /* grandezza data */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cm-gold);
}

/* Titoletto della tappa */
.elementor .cm-leggenda-timeline__label {
  margin-top: 4px;
}

.elementor .cm-leggenda-timeline__label .elementor-heading-title {
  font-family: var(--cm-font-body);
  font-size: 23px;                              /* grandezza titoletto */
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  color: var(--cm-white-muted);
}

/* Testo della tappa */
.elementor .cm-leggenda-timeline__text {
  margin-top: 14px;
  font-family: var(--cm-font-body);
  font-size: 19px;                              /* grandezza testo */
  font-weight: 400;
  line-height: 1.75;
  color: var(--cm-white);
}

.elementor .cm-leggenda-timeline__text p {
  margin: 0;
}


/* --------------------------------------------------------------------------
   5. RESPONSIVE
   -------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
  .elementor .e-con.cm-leggenda-timeline {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .elementor .cm-leggenda-timeline__title .elementor-heading-title {
    font-size: 38px;
  }
  .elementor .e-con.cm-leggenda-timeline__head {
    margin-bottom: 44px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .elementor .e-con.cm-leggenda-timeline {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .elementor .cm-leggenda-timeline__title .elementor-heading-title {
    font-size: 32px;
  }
  .elementor .cm-leggenda-timeline__subtitle .elementor-heading-title {
    font-size: 19px;
  }
  .elementor .e-con.cm-leggenda-timeline__head {
    margin-bottom: 36px;
  }
  .elementor .e-con.cm-leggenda-timeline__list {
    gap: 34px;
  }
  .elementor .e-con.cm-leggenda-timeline__list::before {
    left: 6px;
  }
  .elementor .e-con.cm-leggenda-timeline__step {
    padding-left: 34px;
  }
  .elementor .e-con.cm-leggenda-timeline__step::before {
    top: 8px;
    left: 0;
    width: 13px;
    height: 13px;
  }
  .elementor .cm-leggenda-timeline__date .elementor-heading-title {
    font-size: 23px;
  }
  .elementor .cm-leggenda-timeline__label .elementor-heading-title {
    font-size: 20px;
  }
  .elementor .cm-leggenda-timeline__text {
    margin-top: 10px;
    font-size: 18px;
  }
}