/* ==========================================================================
   Sezione 7 — Pilastri. Nodi 2566:241 / 245 / 249 / 253.

   Disposizione a scala ascendente. Nel design:

     Step 1   x=144   barra a y=4720
     Step 2   x=454   barra a y=4886   (+166)
     Step 3   x=765   barra a y=5058   (+172)
     Step 4   x=1075  barra a y=5208   (+150)

   Passo orizzontale ~310px, sfalsamento verticale medio ~163px.
   Ricostruito con grid a 4 colonne piu' uno scostamento verticale
   proporzionale all'indice, non con coordinate assolute (R1).
   ========================================================================== */

.eia-pillars__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--eia-space-md);
  list-style: none;
  margin: 0;
  padding: 0;
  /* Lo scalino dell'ultimo pilastro sporge in basso: senza questo margine
     il pilastro 4 finirebbe sopra la sezione successiva. */
  padding-bottom: calc(var(--eia-pillar-step) * 3);
}

.eia-pillars {
  /* Scostamento verticale fra un pilastro e il successivo. Media dei tre
     salti del design (166, 172, 150), resa fluida per i breakpoint
     intermedi che il design non contiene. */
  --eia-pillar-step: clamp(48px, 10vw, 163px);
}

.eia-pillar {
  display: flex;
  flex-direction: column;
  /* Ogni pilastro scende di uno scalino rispetto al precedente. */
  margin-top: calc(var(--eia-pillar-index, 0) * var(--eia-pillar-step));
}


/* --- Barra verticale ---------------------------------------------------- */

/* 105.66 x 350 nel design (nodo 2566:244).
   Il colore di riempimento non e' mai stato estratto dal file Figma:
   va chiamato get_design_context su 2566:244. Finche' non si sa, usa
   l'accento del tema. */

.eia-pillar__bar {
  width: 106px;
  height: 350px;
  margin-bottom: var(--eia-space-lg);
  border-radius: var(--eia-radius-btn);
  background-color: var(--eia-color-accent);
  /* Sticky come nel prototipo: la barra resta agganciata mentre il testo
     del pilastro scorre. [BLOCCANTE] spec § 5.1 — default dichiarato. */
  position: sticky;
  top: var(--eia-stack-top);
  z-index: var(--eia-z-sticky);
}


/* --- Contenuto ---------------------------------------------------------- */

.eia-pillar__step {
  margin-bottom: var(--eia-space-2xs);
  font-size: var(--eia-fs-heading);
  font-weight: var(--eia-fw-semibold);
}

.eia-pillar__title {
  margin-bottom: var(--eia-space-sm);
  font-size: var(--eia-fs-display);
  /* ExtraLight: usato solo qui in tutto il design. */
  font-weight: var(--eia-fw-extralight);
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance;
}

.eia-pillar__body {
  font-size: var(--eia-fs-body);
  line-height: var(--eia-lh-body);
  text-wrap: pretty;
}


/* --- Sotto 1280px ------------------------------------------------------- */

@media (max-width: 1280px) {
  .eia-pillar__bar {
    /* La barra a 106px su una colonna piu' stretta sbilancia il blocco. */
    width: 72px;
    height: 240px;
  }
}


/* --- Sotto 1024px: due colonne ------------------------------------------ */

@media (max-width: 1023px) {
  .eia-pillars__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--eia-space-xl);
    padding-bottom: 0;
  }

  /* La scala si azzera: con due colonne lo sfalsamento crescente
     produrrebbe buchi verticali invece di una progressione leggibile. */
  .eia-pillar {
    margin-top: 0;
  }

  /* Niente sticky: coerente con la disattivazione dello scroll-stacking
     dei blocchi progetto alla stessa soglia. */
  .eia-pillar__bar {
    position: static;
    height: 160px;
  }
}


/* --- Sotto 768px: colonna singola --------------------------------------- */

@media (max-width: 768px) {
  .eia-pillars__list {
    grid-template-columns: 1fr;
    gap: var(--eia-space-2xl);
  }

  /* In colonna singola la barra verticale a piena altezza spreca metri di
     scorrimento: diventa un segno orizzontale sopra il testo. */
  .eia-pillar__bar {
    width: 72px;
    height: 8px;
    margin-bottom: var(--eia-space-md);
  }
}


/* --- Movimento ridotto -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .eia-pillar__bar {
    position: static;
  }
}