/* ═══════════════════════════════════════════════
   INFOGRAFICHE — home e Automazioni (e immagini per i social: scripts/build_infografiche.py)
   Testo vero in HTML/SVG, niente immagini: leggere, nitide, leggibili dagli screen reader.
   Confronto prima/dopo: il grigio è il lavoro di oggi, il ciano del marchio è il dopo (fondo #1b2040, entrambi oltre 3:1).
   ═══════════════════════════════════════════════ */
:root {
  --ig-before: #8d95aa;   /* oggi, a mano */
  --ig-after:  #11a3d4;   /* con le automazioni */
}
.ig { margin: 2.2rem 0 0; }
.ig figcaption {
  margin-top: 1.4rem; max-width: 60ch;
  font-size: var(--fs-meta); color: var(--t3); line-height: 1.6;
}
.ig figcaption strong { color: var(--text); font-weight: 500; }
.ig figcaption a { color: var(--accent); text-underline-offset: .2em; }
.ig-icon {
  width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}

/* 1. Come funziona: tre tappe su una linea, numerate */
.ig-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem;
  position: relative;
}
.ig-step { position: relative; }
.ig-node {
  position: relative; z-index: 1;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 1.3rem;
  background: var(--surface-2); color: var(--accent);
  box-shadow: 0 0 0 6px var(--page-bg);
}
.ig-node b {
  position: absolute; top: -4px; right: -4px;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--navy);
  font-size: var(--fs-tag); font-weight: 700; font-variant-numeric: tabular-nums;
}
/* la linea che unisce le tappe, con la punta verso la tappa successiva */
.ig-step:not(:last-child)::after {
  content: ''; position: absolute; top: 31px; left: 76px; right: -2.5rem; height: 2px;
  background: linear-gradient(to right, rgba(var(--accent-rgb),.55), rgba(var(--accent-rgb),.15));
}
.ig-step:not(:last-child)::before {
  content: ''; position: absolute; top: 27px; right: -2.35rem; width: 8px; height: 8px;
  border-top: 2px solid rgba(var(--accent-rgb),.5); border-right: 2px solid rgba(var(--accent-rgb),.5);
  transform: rotate(45deg);
}
.ig-step h3 { font-family: var(--fd); font-size: var(--fs-title-card); font-weight: 700; margin-bottom: .5rem; }
.ig-step p { font-size: var(--fs-body-sm); color: var(--t2); line-height: 1.65; max-width: 32ch; }
.ig-example {
  margin-top: 2rem; padding: 1.1rem 1.3rem; border-radius: 14px; background: var(--surface-1);
  font-size: var(--fs-body-sm); color: var(--t2); line-height: 1.6;
}
.ig-example strong { color: var(--text); font-weight: 500; }
@media (max-width: 760px) {
  .ig-steps { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .ig-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 1.1rem; }
  .ig-node { margin-bottom: 0; grid-row: span 2; }
  .ig-step:not(:last-child)::after { top: 72px; left: 31px; right: auto; bottom: -1.8rem; width: 2px; height: auto;
    background: linear-gradient(to bottom, rgba(var(--accent-rgb),.55), rgba(var(--accent-rgb),.15)); }
  .ig-step:not(:last-child)::before { display: none; }
}

/* 2. La giornata prima e dopo: barre orizzontali a coppie, sempre con il valore scritto */
.ig-legend { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-bottom: 1.6rem; font-size: var(--fs-meta); color: var(--t2); }
.ig-legend span { display: inline-flex; align-items: center; gap: .5rem; }
.ig-legend i { width: 14px; height: 10px; border-radius: 3px; }
.ig-legend .b { background: var(--ig-before); }
.ig-legend .a { background: var(--ig-after); }
.ig-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; max-width: 820px; }
.ig-bar-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: .4rem 1.6rem; align-items: center; }
.ig-bar-label { font-size: var(--fs-body-sm); color: var(--text); line-height: 1.4; }
.ig-bar-label small { display: block; font-size: var(--fs-meta); color: var(--t3); margin-top: .15rem; }
.ig-bar-pair { display: grid; gap: 2px; }   /* 2px di stacco tra le due barre */
.ig-bar { display: flex; align-items: center; gap: .6rem; min-height: 20px; }
.ig-bar i {
  display: block; height: 12px; width: var(--w); min-width: 0;
  border-radius: 0 4px 4px 0;   /* estremo del dato arrotondato, attaccato alla linea di base */
}
.ig-bar.b i { background: var(--ig-before); }
.ig-bar.a i { background: var(--ig-after); }
.ig-bar span { font-size: var(--fs-meta); color: var(--t2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ig-bar.a span { color: var(--text); }
.ig-total {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem;
  margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); max-width: 820px;
}
.ig-total-label { font-size: var(--fs-body-sm); color: var(--t2); }
.ig-total-value { font-family: var(--fd); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 700; color: var(--text); }
.ig-total-value .arrow { color: var(--accent); padding: 0 .35rem; }
@media (max-width: 680px) {
  .ig-bar-row { grid-template-columns: minmax(0, 1fr); }
}

/* 3. Cosa fa l'automazione, cosa resta a te: due colonne a righe accoppiate */
.ig-split { max-width: 980px; }
.ig-split-head, .ig-split-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ig-split-head p {
  display: flex; align-items: center; gap: .6rem; padding: 0 1.4rem .9rem;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.ig-split-head p:first-child { color: var(--accent); }
.ig-split-head p:last-child { color: var(--text); }
.ig-split-row p {
  padding: 1rem 1.4rem; font-size: var(--fs-body-sm); line-height: 1.55; color: var(--t2);
  border-top: 1px solid var(--line);
}
.ig-split-row p:first-child { background: rgba(var(--accent-rgb),.06); }
.ig-split-row p:last-child { color: var(--text); }
.ig-split-row:last-child p:first-child { border-radius: 0 0 0 14px; }
.ig-split-head p:first-child { border-radius: 14px 0 0 0; padding-top: 1rem; background: rgba(var(--accent-rgb),.06); }
.ig-split-head p:last-child { padding-top: 1rem; }
.ig-split-note {
  margin-top: 1.4rem; display: flex; gap: .8rem; align-items: flex-start; max-width: 70ch;
  font-size: var(--fs-body-sm); color: var(--text); line-height: 1.6;
}
.ig-split-note .ig-icon { color: var(--accent); margin-top: .1rem; }
@media (max-width: 680px) {
  .ig-split-head { display: none; }
  .ig-split-row { grid-template-columns: minmax(0, 1fr); margin-bottom: .9rem; border-radius: 14px; overflow: hidden; background: var(--surface-1); }
  .ig-split-row p { border-top: 0; }
  .ig-split-row:last-child p:first-child { border-radius: 0; }
  .ig-split-row p::before { display: block; margin-bottom: .25rem; font-size: var(--fs-tag); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
  /* etichetta solo visiva ("/ ''"): i lettori di schermo leggono già il prefisso sr-only */
  .ig-split-row p:first-child::before { content: "L'automazione"; content: "L'automazione" / ""; color: var(--accent); }
  .ig-split-row p:last-child::before { content: "Tu"; content: "Tu" / ""; color: var(--t3); }
}

/* 4. Dove vanno i tuoi dati: tre blocchi in fila, l'ultimo con le due strade */
.ig-data {
  display: grid; grid-template-columns: minmax(0, 1fr) 2.2rem minmax(0, 1fr) 2.2rem minmax(0, 1.25fr);
  align-items: stretch; max-width: 1080px;
}
.ig-box {
  padding: 1.3rem 1.3rem 1.4rem; border-radius: 14px; background: var(--surface-1);
}
.ig-box h3 { display: flex; align-items: center; gap: .6rem; font-family: var(--fd); font-size: 1.1rem; font-weight: 700; margin-bottom: .6rem; }
.ig-box h3 .ig-icon { color: var(--accent); }
.ig-box p { font-size: var(--fs-body-sm); color: var(--t2); line-height: 1.6; }
.ig-box p + p { margin-top: .5rem; }
.ig-box strong { color: var(--text); font-weight: 500; }
.ig-arrow { display: grid; place-items: center; color: rgba(var(--accent-rgb),.6); }
.ig-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ig-ways { display: grid; gap: .6rem; }
.ig-way { padding: .8rem .9rem; border-radius: 10px; background: var(--surface-2); }
.ig-way b { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-body-sm); color: var(--text); font-weight: 500; margin-bottom: .25rem; }
.ig-way b .ig-icon { width: 18px; height: 18px; color: var(--accent); }
.ig-way span { display: block; font-size: var(--fs-meta); color: var(--t2); line-height: 1.5; }
.ig-data-end { margin-top: 1rem; max-width: 31em; }   /* circa 75 battute per riga */
@media (max-width: 900px) {
  .ig-data { grid-template-columns: minmax(0, 1fr); }
  .ig-arrow { height: 2rem; }
  .ig-arrow svg { transform: rotate(90deg); }
}