/* =====================================================================
   Pagina AI WORKFLOW — versione "nodi · mosaico", mobile first.
   Ogni flusso è una definizione a nodi (come in Grasshopper): i nodi sono
   i passaggi, i cavi li collegano. Il colore della testata del nodo dice
   chi lavora: designer (chiaro), ai (arancio), calcolo (nero).
   Usa solo i token di main.css.
   ===================================================================== */

.aiw { --nav-h: 64px; --node-bg: #f6f6f4; --canvas: #e3e3e0; }

/* ------------------------------------------------------------ intro */
.aiw-intro { display: grid; gap: var(--sp-6); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--pf-line); }
.aiw-intro__lead {
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--pf-text-muted);
  max-width: 46ch;
  text-wrap: pretty;
}
.aiw-intro__lead strong { font-weight: 500; color: var(--pf-text); }

/* simbolo di chi lavora: lo stesso in legenda, nei nodi e sulle porte */
.who {
  flex: none;
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--pf-text);
  background: var(--node-bg);
  box-sizing: border-box;
}
.who--ai { background: var(--aca-orange); border-color: var(--aca-orange); }
.who--comp { background: var(--pf-text); border-radius: 2px; }

.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); }
.legend__item {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--pf-text-muted);
}

/* ------------------------------------------------------------ flusso */
.flows { display: grid; }
.flow {
  display: grid;
  gap: 28px;
  padding-block: clamp(48px, 7vw, 96px);
  border-bottom: 1px solid var(--pf-line);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.flow:last-child { border-bottom: 0; }

/* testata del flusso — telefono: una colonna, gerarchia chiara
   1 numero + tipo (mono, piccolo)  2 titolo  3 obiettivo  4 dati in righe */
.fhead { display: grid; gap: 10px; }
.fhead__eye {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--pf-text-muted);
}
.fhead__num { font-family: var(--ff-num); font-size: 1.15rem; letter-spacing: 0; line-height: 1; color: var(--pf-text-faint); }
.fhead--ai .fhead__num, .fhead--ai .fhead__kind { color: var(--aca-orange); }
.fhead__title {
  font-size: clamp(1.75rem, 8vw, 3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  text-wrap: balance;
}
.fhead__goal { font-size: 0.9375rem; line-height: 1.5; color: var(--pf-text-muted); max-width: 52ch; text-wrap: pretty; }
.fhead__meta { margin: 6px 0 0; display: grid; border-top: 1px solid var(--pf-line); }
.fhead__row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--pf-line-soft);
}
.fhead__row dt { font-family: var(--ff-mono); font-size: 10px; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--pf-text-faint); }
.fhead__row dd { margin: 0; font-size: var(--fs-small); color: var(--pf-text); }

.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--pf-line);
}
.metric { display: grid; gap: 6px; padding: var(--sp-4) 0; }
.metric + .metric { border-left: 1px solid var(--pf-line); padding-left: var(--sp-4); }
.metric dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--pf-text-muted);
}
.metric dd { margin: 0; font-family: var(--ff-num); font-size: clamp(2rem, 9vw, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums; }

/* casi dentro lo stesso flusso */
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  padding: 7px 12px;
  border: 1px solid var(--pf-line);
  border-radius: 999px;
  background: var(--pf-panel);
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pf-text-muted);
  white-space: nowrap;
  cursor: pointer;
}
.chip:hover { color: var(--pf-text); }
.chip[aria-selected="true"] { color: var(--pf-text); background: var(--node-bg); border-color: var(--pf-text); }
.case { display: grid; }
.case[hidden] { display: none; }

/* ------------------------------------------------------------ grafo
   telefono: nodi in colonna, cavi verticali */
.graph {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0;                     /* telefono: niente riquadro, solo nodi e cavi */
}
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.wire { fill: none; stroke: var(--pf-text-muted); stroke-width: 1.5; }
.wire--ai { stroke: var(--aca-orange); stroke-dasharray: 5 5; animation: aiw-flow 1.2s linear infinite; }
@keyframes aiw-flow { to { stroke-dashoffset: -20; } }

/* nodo */
.node {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  min-width: 0;
  background: var(--node-bg);
  border: 1px solid var(--pf-line);
  border-radius: 8px;
  box-shadow: 0 1px 0 var(--pf-line), 0 8px 20px -14px rgba(19, 19, 18, .35);
}

.node__bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--pf-line);
  border-radius: 8px 8px 0 0;
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  line-height: 1.35;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.node__n { flex: none; color: var(--pf-text-faint); }
.node__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.node__bar .who { margin-top: 1px; }
.node--ai .node__bar { background: var(--aca-orange-ghost); }
.node--comp .node__bar { background: var(--pf-text); border-color: var(--pf-text); color: var(--node-bg); }
.node--comp .node__n { color: var(--pf-text-faint); }
.node--comp .node__bar .who { border-color: var(--node-bg); background: var(--node-bg); }
.node__body { display: grid; gap: 10px; padding: 10px; min-width: 0; }
.node__text { font-size: var(--fs-small); line-height: 1.45; color: var(--pf-text-muted); }

/* porte: ingresso in alto, uscita in basso (telefono) */
.port {
  position: absolute;
  z-index: 2;
  left: 50%;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--node-bg);
  border: 1.5px solid var(--pf-text);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
}
.port--in { top: 0; }
.port--out { top: 100%; }
.node--ai .port--out { background: var(--aca-orange); border-color: var(--aca-orange); }
.node--comp .port--out { background: var(--pf-text); border-radius: 2px; }
.node:first-of-type .port--in,
.node:last-of-type .port--out { display: none; }

/* ------------------------------------------------------------ foto nei nodi */
.fm { position: relative; margin: 0; min-width: 0; max-width: 100%; background: var(--pf-cell); border-radius: 6px; overflow: hidden; }
.fm img { width: 100%; height: 100%; object-fit: cover; }
.fm--contain { background: #fff; }
.fm--contain img { object-fit: contain; padding: 6px; }

.mo { display: grid; gap: 6px; }
.mo--1 .fm { aspect-ratio: var(--r, 4 / 5); }
.mo--2 { grid-template-columns: 1fr 1fr; }
.mo--2 .fm { aspect-ratio: 3 / 4; }
.mo--n { grid-template-columns: 1fr 1fr; }
.mo--n .fm { aspect-ratio: 1 / 1; }
.mo--n .mo__hero { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.mo__more {
  position: absolute; inset: 0;
  border: 0;
  background: rgba(19, 19, 18, .55);
  color: var(--node-bg);
  font-family: var(--ff-num);
  font-size: 1.8rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.mo__more:hover { background: rgba(241, 86, 9, .85); }
.mo__rest { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mo__rest[hidden] { display: none; }
.mo__rest .fm { aspect-ratio: 1 / 1; }
.mo__toggle {
  justify-self: start;
  padding: 7px 12px;
  border: 1px solid var(--pf-line);
  border-radius: 999px;
  background: var(--pf-panel);
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
.mo__toggle:hover { border-color: var(--pf-text); color: var(--aca-orange); }

/* ------------------------------------------------------------ pipeline render */
.pipe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
.pipe__t {
  width: 100%;
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pf-line-soft);
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--pf-text-muted);
}
.pipe__n {
  padding: 6px 10px;
  background: var(--node-bg);
  border: 1px solid var(--pf-line);
  border-radius: 6px;
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pipe__w { width: 18px; height: 1.5px; background: var(--pf-text-muted); }

/* ------------------------------------------------------------ tablet e oltre
   i nodi stanno in riga, i cavi diventano orizzontali */
@media (min-width: 900px) {
  .aiw-intro { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .aiw-intro__lead { font-size: 1.3rem; }
  .fhead { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: clamp(32px, 5vw, 80px); align-items: end; }
  .fhead__eye, .fhead__title, .fhead__goal { grid-column: 1; }
  .fhead__meta { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; }
  .fhead__num { font-size: 1.6rem; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 260px)); }

  .graph {
    padding: 28px;
    border: 1px solid var(--pf-line);
    border-radius: var(--r);
    background-color: var(--canvas);
    background-image: radial-gradient(var(--pf-text-faint) .8px, transparent .9px);
    background-size: 16px 16px;
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    column-gap: 48px;
    align-items: start;
    padding: 28px;
  }
  .node, .node--txt, .node--txt.is-right { width: auto; align-self: start; grid-column: span var(--span, 1); }
  .port { left: auto; top: 18px; transform: translateY(-50%); }
  .port--in { left: -6px; }
  .port--out { right: -6px; }
  .pipe__t { width: auto; margin: 0 18px 0 0; padding: 0; border: 0; }
}

@media (min-width: 1500px) {
  .graph { column-gap: 64px; padding: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .wire--ai { animation: none; }
}

/* spazio in attesa di materiale */
.ph {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  padding: var(--sp-4);
  text-align: center;
  background: repeating-linear-gradient(-45deg, transparent 0 9px, var(--pf-line-soft) 9px 10px), var(--pf-panel);
  border: 1px dashed var(--pf-text-faint);
  border-radius: 6px;
}
.ph span {
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--pf-panel);
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pf-text-muted);
}

/* telefono: una foto sola non deve occupare più di uno schermo */
@media (max-width: 899px) {
  .mo--1 .fm { max-height: min(52vh, 380px); }
}

/* desktop: allineamento dei nodi in riga */
@media (min-width: 900px) {
  /* i testi brevi occupano sempre tre righe: le foto partono tutte alla stessa altezza */
  .node__text { min-height: calc(3 * 1.45em); }
  /* nodo largo: foto grande a sinistra, due piccole a destra */
  .node--wide .mo--n { grid-template-columns: 2fr 1fr; }
  .node--wide .mo--n .mo__hero { grid-column: 1; grid-row: span 2; aspect-ratio: auto; }
  .node--wide .mo__rest { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------ CTA a metà pagina
   un nodo in più, aperto: "il tuo progetto" */
/* riga sobria tra due flussi: filetti sottili, testo e un link (niente box arancio) */
.aiw-cta {
  display: grid;
  gap: 10px;
  padding-block: 24px;
  border-top: 1px solid var(--pf-line);
  border-bottom: 1px solid var(--pf-line);
}
.aiw-cta__k {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--pf-text-muted);
}
.aiw-cta__t { font-size: 1.125rem; line-height: 1.35; color: var(--pf-text); max-width: 52ch; }
.aiw-cta__t span { color: var(--pf-text-muted); }
.aiw-cta__a {
  justify-self: start;
  display: inline-flex; gap: 8px; align-items: center;
  min-height: 44px;
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--aca-orange);
  background: none; border: 0; padding: 0;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.aiw-cta__a:hover { color: var(--pf-text); }
.aiw-cta__a:hover .btn__arrow { transform: translateX(3px); }
.aiw-cta__a .btn__arrow { transition: transform var(--dur-fast) var(--ease); }
@media (min-width: 900px) {
  .aiw-cta { grid-template-columns: 140px minmax(0, 1fr) auto; align-items: center; column-gap: 32px; }
}