/* ====== WRAPPER ====== */
.aftl-timeline{
  --aftl-height: 260px;
  --aftl-tip: 48px;           /* profondità punta */
  --aftl-sep: 8px;           /* spessore separatore bianco */
  --aftl-shadow: 0 10px 20px rgba(0,0,0,.12);

  width: 100%;
  overflow: visible;
  padding-bottom: 64px;     /* spazio per badge sotto */
}

/* ====== TRACK ====== */
.aftl-timeline__track{
  display: flex;
  align-items: stretch;
  gap: 0;                   /* NIENTE gap */
  height: var(--aftl-height);
  padding-right: var(--aftl-tip); /* spazio per ultima punta */
}

/* ====== STEP (freccia) ====== */
.aftl-step{
  position: relative;
  flex: 1 1 0;
  min-width: 180px;

  height: var(--aftl-height);
  background: var(--aftl-step-color, #1f4fa3);
  color: #fff;

  border-radius: 0 !important;   /* niente card */
  box-shadow: none !important;

  padding: 26px 34px 70px 34px;  /* simile mock */
}

/* Punta destra */
.aftl-step::after{
  content:"";
  position:absolute;
  top: 0;
  right: calc(var(--aftl-tip) * -1);
  width: 0;
  height: 0;
  border-top: calc(var(--aftl-height) / 2) solid transparent;
  border-bottom: calc(var(--aftl-height) / 2) solid transparent;
  border-left: var(--aftl-tip) solid var(--aftl-step-color, #1f4fa3);
}

/* Separatore bianco diagonale tra segmenti (sovrapposto) */
.aftl-step + .aftl-step{
 margin-left: calc((var(--aftl-tip) - var(--aftl-sep)) * -1); /* sovrappone per continuità */
}
.aftl-step + .aftl-step::before{
  content:"";
  position:absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;

  /* triangolo bianco che “taglia” il bordo sinistro */
  border-top: calc(var(--aftl-height) / 2) solid transparent;
  border-bottom: calc(var(--aftl-height) / 2) solid transparent;
  border-left: var(--aftl-sep) solid #fff;

  /* lo spostiamo sul bordo di contatto */
  transform: translateX(calc(var(--aftl-tip) - var(--aftl-sep)));
  z-index: 3;
}

/* ====== HEADER / TYPO ====== */
.aftl-step__header{
  position: relative;
  z-index: 2;
}

.aftl-step__date{
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 10px 0;
}

.aftl-step__title{
  font-size: 13px;
  font-weight: 600;
  opacity: .95;
  margin: 0 0 10px 0;
}

/* Testo “always visible” nel mock: usa il panel come body base */
.aftl-step__panel{
  position: relative;
  z-index: 2;

  /* look da mock: niente box evidente */
  background: transparent !important;
  border-radius: 0 !important;

  padding: 0 !important;
  margin-top: 0 !important;

  font-size: 12px;
  line-height: 1.35;
  opacity: .95;

  /* chiuso: limita a 3 righe come “lorem” */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;

  transition: -webkit-line-clamp .2s ease, opacity .2s ease;
}

/* Aperto: mostra tutto (accordion) */
.aftl-step.is-open .aftl-step__panel{
  -webkit-line-clamp: initial;
  overflow: visible;
  opacity: 1;
}

/* CTA: stile minimale, appare solo quando aperto */
.aftl-step__cta{
  display: none;
  margin-top: 12px;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  border-bottom: 2px solid rgba(255,255,255,.7);
  padding-bottom: 2px;
}
.aftl-step.is-open .aftl-step__cta{
  display: inline-block;
}

/* ====== BADGE circolare sotto ====== */
.aftl-step__badge{
  position: absolute;
  left: 50%;
  bottom: -44px;
  transform: translateX(-50%);

  width: 88px;
  height: 88px;
  border-radius: 999px;

  border: 4px solid #fff;
  background: var(--aftl-step-color, #1f4fa3);
  color: #fff;

  box-shadow: 0 10px 20px rgba(0,0,0,.22);
  z-index: 5;

  display: grid;
  place-items: center;
  gap: 2px;
  cursor: pointer;

  /* reset eventuali stili button */
  outline: none;
}

/* Se nel markup hai label/num */
.aftl-step__badge-label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
}
.aftl-step__badge-num{
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

/* ====== NON mostrare scrollbar orizzontale (desktop) ====== */
@media (min-width: 1024px){
  .aftl-timeline{ overflow: visible; }
  .aftl-timeline__track{ overflow: hidden; }
}

/* ====== MOBILE: va in colonna ====== */
@media (max-width: 768px){
  .aftl-timeline{ padding-bottom: 0; }
  .aftl-timeline__track{
    height: auto;
    padding-right: 0;
    flex-direction: column;
  }
  .aftl-step{
    height: auto;
    padding: 18px 18px 18px 18px;
  }
  .aftl-step::after,
  .aftl-step + .aftl-step::before{
    display: none;
  }
  .aftl-step + .aftl-step{
    margin-left: 0;
    margin-top: 12px;
  }
  .aftl-step__badge{
    position: static;
    transform: none;
    margin-top: 12px;
  }
}

/* ===== FINAL OVERRIDE - ArrowFlow mock match ===== */

.aftl-timeline__track{
  background:#fff;              /* il bianco che si vede nei separatori */
  gap:0 !important;
  overflow:hidden;
  height:260px;
  padding-right:48px;
}

/* freccia con tacca a sinistra: i separatori bianchi sono “buchi” */
.aftl-step{
  --aftl-tip: 48px;
  height:260px;
  border-radius:0 !important;
  box-shadow:none !important;

  position:relative;
  flex:1 1 0;
  min-width:180px;

  padding:26px 34px 70px 34px;

  clip-path: polygon(
    0 0,
    calc(100% - var(--aftl-tip)) 0,
    100% 50%,
    calc(100% - var(--aftl-tip)) 100%,
    0 100%,
    var(--aftl-tip) 50%
  );
}

/* sovrapposizione per continuità “a nastro” */
.aftl-step + .aftl-step{
   margin-left: calc((var(--aftl-tip) - var(--aftl-sep)) * -1);
}

/* IMPORTANTISSIMO: elimina il vecchio separatore se esiste */
.aftl-step::before{
  content:none !important;
}

/* ===== Badge identico al mock (circolare sotto) ===== */
.aftl-step__badge{
  position:absolute !important;
  top:auto !important;
  right:auto !important;

  left:50% !important;
  bottom:-44px !important;
  transform:translateX(-50%) !important;

  width:88px !important;
  height:88px !important;
  border-radius:999px !important;

  background: var(--aftl-step-color, #1f4fa3) !important;
  border:4px solid #fff !important;

  box-shadow:0 10px 20px rgba(0,0,0,.22) !important;

  display:grid !important;
  place-items:center !important;
  gap:2px !important;
  padding:0 !important;

  z-index:10 !important;
}

/* label/numero del badge */
.aftl-step__badge-label{
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.06em !important;
  line-height:1 !important;
}
.aftl-step__badge-num{
  font-size:30px !important;
  font-weight:900 !important;
  line-height:1 !important;
}

/* pannello testo: come mock (sempre leggibile, senza box) */
.aftl-step__panel{
  background:transparent !important;
  padding:0 !important;
  margin-top:10px !important;
  border-radius:0 !important;

  font-size:12px !important;
  line-height:1.35 !important;
  opacity:.95;

  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.aftl-step.is-open .aftl-step__panel{
  -webkit-line-clamp:initial;
  overflow:visible;
}

/* CTA solo quando aperto */
.aftl-step__cta{
  display:none !important;
}
.aftl-step.is-open .aftl-step__cta{
  display:inline-block !important;
  margin-top:12px;
  font-weight:800;
  color:#fff;
  text-decoration:none;
  border-bottom:2px solid rgba(255,255,255,.7);
}
/* Prima freccia: bordo sinistro verticale (no tacca/punta) */
.aftl-step:first-child{
  clip-path: polygon(
    0 0,
    calc(100% - 48px) 0,
    100% 50%,
    calc(100% - 48px) 100%,
    0 100%
  ) !important;
}

/* sicurezza: nessun pseudo che crei “bianco” sulla prima */
.aftl-step:first-child::before{
  content: none !important;
}

/* Separatore bianco tra frecce (non rompe accordion) */
.aftl-step + .aftl-step{
  position: relative; /* sicurezza per il ::before */
}

.aftl-step + .aftl-step::before{
  content:"";
  position:absolute;
  top:0;
 left: var(--aftl-tip);
  width:14px;         /* spessore separatore */
  height:260px;       /* altezza timeline */
  background:#fff;
  transform:skewX(-14deg);
  transform-origin:top;
  z-index:4;
  pointer-events:none;
}