/* ==========================================================================
   Sezione 6 — Blocchi progetto. Nodi 2566:184 / 2566:195 / 2566:202.

   Vedi spec § 3.4 e § 5.1.

   SCROLL-STACKING [BLOCCANTE]
   I blocchi si impilano durante lo scorrimento invece di scorrere via.
   Realizzato con position: sticky puro — nessun JS, nessun listener di
   scroll. Ogni blocco si aggancia qualche pixel piu' in basso del
   precedente (--eia-stack-index), cosi' il bordo superiore di quello sotto
   resta visibile e la pila si legge come tale.

   I valori di aggancio e di sfalsamento sono un DEFAULT DICHIARATO: il file
   Figma non li contiene (l'altezza negativa che restituisce e' un artefatto
   della conversione). Da confermare con chi ha disegnato il prototipo.
   ========================================================================== */

.eia-projects__stack {
  display: flex;
  flex-direction: column;
  gap: var(--eia-space-section);
}

.eia-project {
  /* Ogni blocco si ferma piu' in basso del precedente. */
  position: sticky;
  top: calc(var(--eia-stack-top) + (var(--eia-stack-index, 0) * var(--eia-stack-offset)));
  z-index: calc(var(--eia-z-sticky) + var(--eia-stack-index, 0));
}


/* --- Media -------------------------------------------------------------- */

.eia-project__media {
  position: relative;
  border-radius: var(--eia-radius-media);
  /* Il raggio da 120px va applicato al contenitore e non all'immagine,
     altrimenti object-fit: cover sborda dagli angoli. */
  overflow: hidden;
  box-shadow: var(--eia-shadow-card);
  /* Il fondo evita che durante il caricamento si veda la pagina
     attraverso il blocco impilato sotto. */
  background-color: var(--eia-color-bg-page);
}

.eia-project__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1224 / 579;
  object-fit: cover;
}

.eia-project__media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1224 / 579;
  border: 1px dashed var(--eia-color-hairline);
  background-color: var(--eia-surface-card);
  color: var(--eia-color-text-muted);
  font-size: var(--eia-fs-nav);
  letter-spacing: var(--eia-ls-nav);
}


/* --- Pannello overlay --------------------------------------------------- */

/* 422x519, raggio 88px, offset 39px da sinistra e 30px dall'alto rispetto
   al media (spec § 3.4). */

.eia-project__overlay {
  position: absolute;
  top: 30px;
  left: 39px;
  z-index: var(--eia-z-overlay);
  display: flex;
  flex-direction: column;
  width: 422px;
  /* max-height invece di height fissa: il copy dei blocchi 2 e 3 non e'
     ancora stato estratto e potrebbe eccedere i 519px del design. */
  max-height: calc(100% - 60px);
  padding: var(--eia-space-xl) var(--eia-space-lg);
  border-radius: var(--eia-radius-overlay);
  background-color: var(--eia-surface-overlay);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow-y: auto;
}

.eia-project__title {
  margin-bottom: var(--eia-space-md);
  font-size: var(--eia-fs-display);
  font-weight: var(--eia-fw-regular);
  line-height: 1.15;
  text-wrap: balance;
}

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


/* --- Loghi di integrazione ---------------------------------------------- */

.eia-project__logos {
  display: flex;
  align-items: center;
  gap: var(--eia-space-md);
  margin-top: auto;
  padding-top: var(--eia-space-lg);
  list-style: none;
}

.eia-project__logo img {
  width: auto;
  max-height: 68px;
  object-fit: contain;
}

.eia-project__logo-fallback {
  display: inline-block;
  padding: var(--eia-space-2xs) var(--eia-space-xs);
  border: 1px dashed var(--eia-color-hairline);
  border-radius: var(--eia-radius-input);
  font-size: var(--eia-fs-nav);
  color: var(--eia-color-text-muted);
}


/* --- Sotto 1024px ------------------------------------------------------- */

@media (max-width: 1023px) {

  /* Lo scroll-stacking si disattiva: su viewport corti i blocchi impilati
     coprirebbero il contenuto invece di rivelarlo, e l'overlay non ha piu'
     spazio per stare sopra il media.
     Default dichiarato, spec § 5.1 [BLOCCANTE]. */
  .eia-project {
    position: static;
  }

  .eia-projects__stack {
    gap: var(--eia-space-2xl);
  }

  .eia-project__media {
    border-radius: 64px;
  }

  /* L'overlay esce da sopra il media e si mette sotto: a questa larghezza
     un pannello da 422px sopra l'immagine copre tutto il soggetto. */
  .eia-project__overlay {
    position: static;
    width: 100%;
    max-height: none;
    margin-top: calc(var(--eia-space-lg) * -1);
    border-radius: 48px;
    overflow-y: visible;
  }
}


/* --- Sotto 768px -------------------------------------------------------- */

@media (max-width: 768px) {
  .eia-project__media {
    border-radius: 32px;
  }

  .eia-project__overlay {
    padding: var(--eia-space-lg) var(--eia-space-md);
    border-radius: 32px;
  }

  .eia-project__logos {
    flex-wrap: wrap;
    gap: var(--eia-space-sm);
  }
}


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

/* Lo scroll-stacking e' un effetto legato allo scorrimento: chi ha chiesto
   movimento ridotto a livello di sistema riceve la pila come semplice
   sequenza verticale. */
@media (prefers-reduced-motion: reduce) {
  .eia-project {
    position: static;
  }
}