/* Cele cinci etape, așezate pe o scală gradată — motivul e al obiectului:
   un cadran e, înainte de orice, o scală cu repere. */

.scala-linie{position:relative;height:1px;background:var(--fir);margin-bottom:0;
  display:grid;grid-template-columns:repeat(5,1fr)}
.scala-linie span{position:relative}
.scala-linie span::before{content:"";position:absolute;left:0;top:0;width:1px;height:16px;background:var(--aur)}
.scala-linie span:last-child::after{content:"";position:absolute;right:0;top:0;width:1px;height:16px;background:var(--aur-stins);opacity:.5}

.etape{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
  align-items:stretch}
/* fiecare etapă e o coloană flexibilă: durata se împinge la bază, ca toate cele cinci
   să cadă pe aceeași linie, oricât de inegale ar fi paragrafele de deasupra */
.etape li{display:flex;flex-direction:column;padding:40px 28px 44px 0;position:relative}
.etape li+li{padding-left:28px;border-left:1px solid var(--fir)}
.etape .nr{display:block;font-weight:200;font-size:clamp(38px,4.6vw,62px);line-height:1;
  letter-spacing:.04em;color:var(--aur);margin-bottom:26px;font-variant-numeric:tabular-nums}
.etape h3{font-weight:400;font-size:20px;letter-spacing:.02em;margin:0 0 14px}
.etape p{margin:0 0 20px;color:var(--fum);font-size:16px;line-height:1.75;max-width:none}
.etape p{flex:0 0 auto}
.etape .durata{margin-top:auto;padding-top:18px;border-top:1px solid var(--fir);
  font:400 12px/1.5 var(--ft);letter-spacing:.06em;color:var(--aur-stins);display:block;
  /* doua randuri garantate: linia de sus cade la aceeasi inaltime la toate cele cinci,
     indiferent daca textul ocupa un rand sau doua */
  min-height:calc(18px + 2 * 12px * 1.5)}

/* Sub cinci coloane, cele cinci etape nu se impart exact. Trec pe doua, iar
   ultima se intinde peste amandoua, ca sa nu ramana un loc gol. */
@media(max-width:1100px){
  .scala-linie{grid-template-columns:repeat(2,1fr)}
  .etape{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etape li:nth-child(odd){padding-left:0;border-left:0}
  .etape li:nth-child(n+3){border-top:1px solid var(--fir)}
  .etape li:last-child{grid-column:1/-1}
}
@media(max-width:720px){
  .scala-linie{display:none}
  .etape{grid-template-columns:1fr}
  .etape li,.etape li+li{padding:32px 0;border-left:0;border-top:1px solid var(--fir)}
  .etape li:first-child{border-top:0;padding-top:0}
  .etape .nr{font-size:34px;margin-bottom:14px}
}