/* =========================================================================
   EMME-CI — Sezione 07 · Realizzazioni in carrellata orizzontale
   File: ec-works.css
   Versione: 1.4.0
   Data: 2026-08-26
   Dipende da: ec-core.css, ec-buttons.css
   Collocazione: child theme /assets/css/ec-works.css

   COME FUNZIONA
   Non c'è scroll-hijacking: lo scroll della pagina resta quello nativo.
   Il wrapper è alto quanto la corsa orizzontale (lo calcola il JS),
   dentro c'è un pannello sticky alto una schermata, e il track viene
   traslato in proporzione a quanto si è scrollato nel wrapper.
   Trackpad, rotella, tastiera e barra di scorrimento funzionano tutti
   perché nessuno di loro viene intercettato.

   Su touch il meccanismo si disattiva: swipe orizzontale nativo con
   scroll-snap, che è il gesto che l'utente si aspetta.

   CHANGELOG
   1.4.0 — 2026-08-26 — Stato per le card senza destinazione.
   1.3.0 — 2026-08-26 — Durante il trascinamento i puntatori si disattivano
                        solo sul track: i controlli restano cliccabili.
   1.2.0 — 2026-08-26 — Colori dei testi forzati sopra quelli di Divi.
                        Cursore grab/grabbing per il trascinamento.
   1.1.0 — 2026-08-26 — Compatibilità con i wrapper imposti da Divi
                        (sezione > riga > colonna > modulo): la classe
                        ec-works-host azzera larghezze, padding e
                        overflow degli antenati. Diagnostica quando la
                        corsa risulta zero.
   1.0.0 — 2026-08-26 — Prima release.
   ========================================================================= */

:root {
  --ec-works-card-w:   clamp(17.5rem, 34vw, 34rem);
  --ec-works-card-h:   72svh;
  --ec-works-gap:      clamp(1rem, 2vw, 2rem);
  --ec-works-pad:      clamp(1.25rem, 5vw, 5rem);
  --ec-works-bg:       #142740;
  --ec-works-ink:      #FFFFFF;
  --ec-works-ink-soft: rgba(255, 255, 255, .68);
  --ec-works-ink-dim:  rgba(255, 255, 255, .44);
  --ec-works-line:     rgba(255, 255, 255, .18);
  --ec-works-accent:   #7FA3C9;
}

/* -------------------------------------------------------------------------
   1. STRUTTURA
   ---------------------------------------------------------------------- */

/* --- Compatibilità Divi ------------------------------------------------
   Divi non permette un Modulo Codice figlio diretto della sezione:
   impone sezione > riga > colonna > modulo. La riga però ha width:80%
   e max-width:1080px, che comprimerebbero il track, e i wrapper possono
   avere overflow:hidden, che ucciderebbe lo sticky.

   La classe ec-works-host la applica il JS a tutti gli antenati fino
   alla sezione: non devi mettere niente a mano. Il selettore :has()
   copre il momento prima che il JS parta, evitando lo sfarfallio. */

.ec-works-host,
.et_pb_section:has(.ec-works),
.et_pb_row:has(.ec-works),
.et_pb_column:has(.ec-works),
.et_pb_module:has(.ec-works) {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}

/* Divi usa flex sulle colonne: senza questo la colonna non si estende */
.ec-works-host.et_pb_column,
.et_pb_column:has(.ec-works) {
	display: block !important;
}

.ec-works {
	position: relative;
	background: var(--ec-works-bg);
	color: var(--ec-works-ink);
	/* L'altezza la scrive il JS: qui solo un valore di partenza per
	   evitare il salto di layout al primo paint. */
	height: 300svh;
}

.ec-works__sticky {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	cursor: grab;
}

.ec-works__sticky.is-dragging {
	cursor: grabbing;
	user-select: none;
}

/* Solo il contenuto della carrellata: i controlli devono restare
   cliccabili, altrimenti il click sulle frecce non arriva mai. */
.ec-works__sticky.is-dragging .ec-works__track * {
	pointer-events: none;
}

/* I controlli stanno sopra il track e ricevono sempre gli eventi */
.ec-works__ui,
.ec-works__ui * {
	pointer-events: auto;
}

/* Divi applica un colore ai titoli con specificità alta e vinceva sui
   nostri: qui lo riportiamo al colore della sezione. Sono selettori
   espliciti perché l'ereditarietà da sola non basta. */

.ec-works :is(h1, h2, h3, h4, h5, h6, p, span, a) {
	color: inherit;
}
.ec-works__title,
.ec-works__lead,
.ec-works__name {
	color: var(--ec-works-ink) !important;
}
.ec-works__text {
	color: var(--ec-works-ink-soft) !important;
}
.ec-works__title em {
	color: var(--ec-works-accent) !important;
}

.ec-works__track {
  display: flex;
  align-items: center;
  gap: var(--ec-works-gap);
  padding-inline: var(--ec-works-pad);
  height: var(--ec-works-card-h);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* -------------------------------------------------------------------------
   2. PANNELLO INTRO
   Primo elemento della carrellata: si legge, poi si scorre.
   ---------------------------------------------------------------------- */

.ec-works__intro {
  flex: none;
  width: clamp(19rem, 38vw, 32rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-right: clamp(1rem, 3vw, 3rem);
}

.ec-works__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ec-works-ink);
  margin: 0;
}
.ec-works__eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  flex: none;
}

.ec-works__title {
  font-family: var(--ec-font-display, inherit);
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  font-weight: 500;
  margin: 0;
}
.ec-works__title em {
  font-family: var(--ec-font-voice, Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  color: var(--ec-works-accent);
}

.ec-works__lead {
  font-family: var(--ec-font-voice, Georgia, serif);
  font-size: clamp(1.125rem, .95rem + .6vw, 1.5rem);
  line-height: 1.3;
  margin: 0;
}

.ec-works__text {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ec-works-ink-soft);
  margin: 0;
  max-width: 34ch;
}

/* -------------------------------------------------------------------------
   3. CARD
   ---------------------------------------------------------------------- */

.ec-works__card {
  position: relative;
  flex: none;
  width: var(--ec-works-card-w);
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
  background: #1D3350;
  text-decoration: none;
  color: var(--ec-works-ink);
  isolation: isolate;
}

/* Card panoramica: dà ritmo alla carrellata sui cantieri più grandi */
.ec-works__card--wide { width: clamp(20rem, 52vw, 52rem); }

/* Card senza destinazione: finché non esiste la scheda singola non
   promettiamo un approfondimento che non c'è. */
.ec-works__card--statica {
	cursor: inherit;
}
.ec-works__card--statica:hover img {
	transform: scale(1.04);
}
.ec-works__card--statica:hover::after {
	opacity: 1;
}

.ec-works__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 900ms var(--ec-ease, ease);
}
.ec-works__card:hover img,
.ec-works__card:focus-visible img { transform: scale(1); }

/* Velo per la leggibilità dei metadati */
.ec-works__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(14, 27, 43, .88) 0%,
              rgba(14, 27, 43, .38) 34%,
              rgba(14, 27, 43, .06) 62%);
  transition: opacity 420ms var(--ec-ease, ease);
}
.ec-works__card:hover::after { opacity: .82; }

.ec-works__meta {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: clamp(1.25rem, 2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.ec-works__cat {
  font-family: var(--ec-font-mono, monospace);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ec-works-ink-dim);
  margin: 0;
}

.ec-works__name {
  font-family: var(--ec-font-display, inherit);
  font-size: clamp(1.125rem, .95rem + .7vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  font-weight: 500;
  margin: 0;
}

.ec-works__spec {
  font-family: var(--ec-font-mono, monospace);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--ec-works-ink-soft);
  margin: 0;
}

/* Freccia che entra dal basso in hover */
.ec-works__go {
  position: absolute;
  top: clamp(1.25rem, 2vw, 2rem);
  right: clamp(1.25rem, 2vw, 2rem);
  z-index: 2;
  width: 2.75rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--ec-works-line);
  border-radius: 50%;
  background: rgba(14, 27, 43, .3);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 320ms var(--ec-ease, ease),
              transform 420ms var(--ec-ease, ease);
}
.ec-works__card:hover .ec-works__go,
.ec-works__card:focus-visible .ec-works__go {
  opacity: 1;
  transform: translateY(0);
}
.ec-works__go svg { width: 1rem; height: 1rem; display: block; }

/* Etichetta per le card con prima/dopo */
.ec-works__flag {
  position: absolute;
  top: clamp(1.25rem, 2vw, 2rem);
  left: clamp(1.25rem, 2vw, 2rem);
  z-index: 2;
  padding: .375rem .75rem;
  border: 1px solid var(--ec-works-line);
  border-radius: 999px;
  font-family: var(--ec-font-mono, monospace);
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ec-works-ink);
  background: rgba(14, 27, 43, .3);
  backdrop-filter: blur(6px);
}

.ec-works__card:focus-visible {
  outline: 2px solid var(--ec-works-accent);
  outline-offset: 4px;
}

/* -------------------------------------------------------------------------
   4. CODA: rimando all'archivio
   ---------------------------------------------------------------------- */

.ec-works__end {
  flex: none;
  width: clamp(15rem, 26vw, 22rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding-left: clamp(1rem, 3vw, 3rem);
}

/* -------------------------------------------------------------------------
   5. INTERFACCIA
   Barra di avanzamento, contatore e nav: fissi sotto la carrellata.
   ---------------------------------------------------------------------- */

.ec-works__ui {
  position: absolute;
  inset: auto var(--ec-works-pad) clamp(1.5rem, 3vh, 2.5rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.ec-works__bar {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--ec-works-line);
}
.ec-works__bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--ec-works-ink);
  transform: scaleX(0);
  transform-origin: left center;
  /* Nessuna transizione: il valore arriva già interpolato dallo scroll */
}

.ec-works__count {
  font-family: var(--ec-font-mono, monospace);
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--ec-works-ink-soft);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.ec-works__count b {
  font-weight: 500;
  color: var(--ec-works-ink);
  font-size: 1.125rem;
}

/* -------------------------------------------------------------------------
   6. TOUCH: swipe nativo
   Il meccanismo sticky si spegne. La carrellata diventa uno scroller
   orizzontale con snap, che è il gesto atteso su telefono.
   ---------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {

  .ec-works {
    height: auto !important;
  }

  .ec-works__sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding-block: clamp(3rem, 8vw, 5rem);
  }

  .ec-works__track {
    transform: none !important;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--ec-works-pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    align-items: stretch;
  }
  .ec-works__track::-webkit-scrollbar { display: none; }

  .ec-works__intro,
  .ec-works__end {
    width: 82vw;
    height: auto;
    scroll-snap-align: start;
  }

  .ec-works__card,
  .ec-works__card--wide {
    width: 78vw;
    height: 62svh;
    scroll-snap-align: start;
  }

  /* La freccia è sempre visibile: senza hover è l'unico segnale
     che la card è un link */
  .ec-works__go { opacity: 1; transform: none; }

  .ec-works__ui {
    position: static;
    inset: auto;
    margin-top: 1.5rem;
    padding-inline: var(--ec-works-pad);
  }
}

/* -------------------------------------------------------------------------
   7. MOVIMENTO RIDOTTO
   Niente carrellata: griglia verticale, tutto leggibile senza scorrere.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .ec-works { height: auto !important; }

  .ec-works__sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding-block: clamp(3rem, 8vw, 5rem);
  }

  .ec-works__track {
    transform: none !important;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    align-items: stretch;
  }

  .ec-works__intro,
  .ec-works__end {
    grid-column: 1 / -1;
    width: auto;
    height: auto;
    padding: 0;
  }

  .ec-works__card,
  .ec-works__card--wide {
    width: auto;
    height: 24rem;
  }

  .ec-works__card img { transform: none; transition: none; }
  .ec-works__go { opacity: 1; transform: none; }
  .ec-works__ui { display: none; }
}

/* -------------------------------------------------------------------------
   8. VISUAL BUILDER
   Dentro l'editor la carrellata è statica e ridotta: serve solo a
   capire dove sta la sezione, non a valutarla.
   ---------------------------------------------------------------------- */

body.et-fb .ec-works { height: auto !important; }
body.et-fb .ec-works__sticky {
  position: static !important;
  height: auto;
  overflow-x: auto;
}
body.et-fb .ec-works__track { transform: none !important; }