/* =============================================================================
   ARGOMENTI — moduli a sinistra, grafica di punti luce a destra
   La grafica la disegna la scena 3D (argomenti3d.js) dentro il rettangolo di
   .arg-scena: qui il riquadro e' trasparente, con cornice, etichette e didascalia.
   ============================================================================= */

/* la sezione non deve piu' velare ne' sfocare la scena che le sta dietro */
.section--topics {
  background: transparent !important;   /* 12/10: via il velo orizzontale, le sue sfumature facevano fasce verticali */
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
}
html.arg-attivo #raw-3d-canvas { opacity: 1 !important; }

.arg {
  /* 13/10: il bordo sinistro sta sulla linea del titolo; il blocco si allarga solo verso destra, fino a 1,5rem dal bordo */
  --arg-w: min(1320px, calc(100% + (100vw - 100%) / 2 - 1.5rem));
  width: var(--arg-w);
  margin: clamp(2rem, 4vw, 3rem) 0 0 0;
  display: grid;
  grid-template-columns: minmax(330px, .74fr) minmax(0, 1.26fr);
  gap: clamp(1.6rem, 3.5vw, 3.2rem);
  align-items: center;
}

/* ---------- i moduli ---------- */
.arg-moduli {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15, 23, 42, .78), rgba(10, 16, 32, .86));
  overflow: hidden;
}
.arg-mod { position: relative; border-top: 1px solid var(--line); }
.arg-mod:first-child { border-top: 0; }
.arg-mod__btn {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  width: 100%; padding: 1.25rem 1.4rem; border: 0; background: none; color: inherit; text-align: left;
  font: inherit; cursor: pointer; transition: background .3s;
}
.arg-mod__btn:hover { background: rgba(34, 211, 238, .04); }
.arg-mod__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 12px; }
.arg-mod__num {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line); font-family: "Space Grotesk", "SpaceGrotesk", sans-serif; font-weight: 600; font-size: .88rem;
  color: var(--muted); font-variant-numeric: tabular-nums; transition: border-color .3s, box-shadow .3s;   /* 13/10: cifra e sfondo cambiano insieme (lo sfondo sfumato non si anima: la cifra restava illeggibile) */
}
.arg-mod__testo { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.arg-mod__tit {
  font-family: "Space Grotesk", "SpaceGrotesk", sans-serif; font-weight: 600; font-size: .86rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--soft); transition: color .3s;
}
.arg-mod__sotto { font-size: .9rem; color: var(--muted); line-height: 1.45; }
.arg-mod__segno { position: relative; width: 14px; height: 14px; opacity: .6; }
.arg-mod__segno::before, .arg-mod__segno::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--muted); transition: transform .35s; }
.arg-mod__segno::after { transform: rotate(90deg); }
.arg-mod.is-on .arg-mod__segno::after { transform: rotate(0deg); }

.arg-mod__corpo { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .5s cubic-bezier(.22, .61, .36, 1); }
.arg-mod.is-on .arg-mod__corpo { grid-template-rows: 1fr; }
/* 13/10: gli spazi in fondo ci sono sempre (da chiuso li nasconde la tendina): prima sparivano di colpo e la colonna scattava */
.arg-mod__temi { overflow: hidden; list-style: none; margin: 0; padding: 0 1.4rem .4rem calc(1.4rem + 42px + 1rem); }
.arg-mod__nota {
  overflow: hidden; margin: 0; padding: 0 1.4rem 1.3rem calc(1.4rem + 42px + 1rem);
  font-size: .86rem; line-height: 1.55; color: var(--muted); font-style: italic;
  opacity: 0; transition: opacity .5s .15s;
}
.arg-mod.is-on .arg-mod__nota { opacity: 1; }
.arg-mod__dentro { min-height: 0; overflow: hidden; }
.arg-mod__temi li {
  position: relative; padding: .55rem 0 .55rem 1.3rem; border-top: 1px solid var(--line);
  color: var(--soft); font-size: .95rem; line-height: 1.45;
  opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.arg-mod__temi li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 6px; height: 6px; border: 1.5px solid var(--accent); transform: rotate(45deg); }
.arg-mod.is-on .arg-mod__temi li { opacity: 1; transform: none; }
.arg-mod.is-on .arg-mod__temi li:nth-child(2) { transition-delay: .06s; }
.arg-mod.is-on .arg-mod__temi li:nth-child(3) { transition-delay: .12s; }
.arg-mod.is-on .arg-mod__temi li:nth-child(4) { transition-delay: .18s; }

.arg-mod.is-on { background: linear-gradient(90deg, rgba(34, 211, 238, .07), rgba(34, 211, 238, 0) 70%); }
.arg-mod.is-on .arg-mod__num { color: #02131a; border-color: transparent; background: linear-gradient(135deg, #22d3ee, #38bdf8); box-shadow: 0 0 22px rgba(34, 211, 238, .35); }
.arg-mod.is-on .arg-mod__tit { color: var(--text); }
.arg-mod__barra { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: transparent; }
.arg-mod__barra i { display: block; width: 100%; height: 0; background: linear-gradient(var(--accent), var(--accent2)); transition: height .6s cubic-bezier(.22, .61, .36, 1); }
.arg-mod.is-on .arg-mod__barra i { height: 100%; }

/* ---------- il riquadro della grafica ---------- */
.arg-scena {
  position: relative; aspect-ratio: 1 / 1; width: min(100%, 760px, calc(100vh - 120px)); justify-self: center;
  touch-action: pan-y;
}
/* senza WebGL o con "riduci movimento": un'immagine ferma della grafica */
.arg-statica { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 20px; display: none; }
html.arg-statico .arg-statica { display: block; }
html.arg-statico .arg-hud__live { display: none; }

/* ---------- telefono e fold: la grafica in alto, subito sotto i 4 moduli come pulsanti,
   poi gli argomenti del modulo scelto. La grafica resta in vista mentre si cambia modulo. */
@media (max-width: 900px) {
  /* 13/10: i bordi del velo hanno lo stesso tono delle sezioni accanto (Chi siamo sopra, Percorsi sotto): niente righe nette */
  .section--topics { background: linear-gradient(180deg, rgba(10, 16, 32, .82) 0, rgba(10, 16, 32, .05) 22%, rgba(10, 16, 32, .05) 62%, rgba(2, 6, 23, .4) 100%) !important; }
  .arg { grid-template-columns: 1fr; gap: .9rem; width: 100%; margin-left: 0; }
  .arg-scena { order: -1; justify-self: center; width: min(100%, 560px, calc(100svh - 300px)); min-width: 260px; }
  .arg-moduli { display: grid; grid-template-columns: 1fr 1fr; background: none; border: 0; border-radius: 0; overflow: visible; gap: .5rem; }
  .arg-mod { display: contents; }
  .arg-mod__btn {
    grid-template-columns: auto 1fr; gap: .6rem; padding: .7rem .75rem; border: 1px solid var(--line); border-radius: 12px;
    background: rgba(15, 23, 42, .8); min-height: 62px;
  }
  .arg-mod__num { width: 32px; height: 32px; border-radius: 9px; font-size: .78rem; }
  .arg-mod__tit { font-size: .74rem; letter-spacing: .06em; line-height: 1.3; }   /* 13/10: era .68rem (10,9px), troppo piccolo */
  .arg-mod__sotto, .arg-mod__segno, .arg-mod__barra { display: none; }
  .arg-mod.is-on .arg-mod__btn { border-color: rgba(34, 211, 238, .55); background: linear-gradient(135deg, rgba(34, 211, 238, .14), rgba(15, 23, 42, .85)); }
  .arg-mod__corpo { order: 2; grid-column: 1 / -1; display: none; }
  .arg-mod.is-on .arg-mod__corpo { display: block; border: 1px solid var(--line); border-radius: 14px; background: rgba(15, 23, 42, .78); padding: .3rem 0 0; }
  .arg-mod__temi, .arg-mod__nota { padding-left: 1rem; padding-right: 1rem; }
  .arg-mod.is-on .arg-mod__temi li:first-child { border-top: 0; }
}
@media (max-width: 380px) {
  .arg-mod__tit { font-size: .69rem; letter-spacing: .03em; }
}
@media (prefers-reduced-motion: reduce) {
  .arg-mod__corpo, .arg-mod__temi li, .arg-mod__barra i { transition: none; }
}

/* la tela propria della grafica, a formazione completata (vedi argomenti3d.js) */
.arg-tela { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; visibility: hidden; }
.arg-tela.on { visibility: visible; }

/* le scritte che fanno parte della grafica (posizionate dal JS) */
.arg-etichette { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.arg-et {
  position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; will-change: transform, opacity;
  font-family: "Space Grotesk", "SpaceGrotesk", sans-serif; font-size: .72rem; letter-spacing: .06em; color: var(--text);
  text-shadow: 0 0 10px rgba(2, 6, 23, .95), 0 0 3px rgba(2, 6, 23, .95);
}
.et-mercato { translate: -50% -100%; font-weight: 600; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #bae6fd; transition: color .3s, text-shadow .3s; }
.et-mercato b { margin-left: .35rem; font-size: .8rem; }
.et-mercato b.su { color: #34d399; }
.et-mercato b.giu { color: #fb7185; }
.et-mercato.colpito { color: #fff; text-shadow: 0 0 14px rgba(242, 193, 78, .9), 0 0 3px rgba(2, 6, 23, .95); }
.et-banca { translate: -50% -100%; color: #fde68a; font-weight: 700; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; }
.et-poc, .et-va { translate: 0 -50%; margin-left: .35rem; font-weight: 700; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.et-poc { color: #f87171; }
.et-va { color: #8b95a3; }
.et-prezzo { translate: -50% -170%; color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 560px) { .arg-et { font-size: .6rem; } .et-mercato { font-size: .58rem; letter-spacing: .06em; } .et-poc, .et-va { font-size: .56rem; } }

/* AREA STUDENTI: sfondo pieno con il motivo dei pannelli fonoassorbenti (come nella v3) */
.section--area { position: relative; background: #060d1f !important; overflow: hidden; }
.section--area::before { content: ""; position: absolute; inset: 0; background: url(../images/fonoassorbente.svg) 0 0 / 48px; opacity: .55; pointer-events: none; }
.section--area > .wrap { position: relative; z-index: 1; }

/* Macro & sistema: il globo si prende e si gira */
.arg[data-modulo="0"] .arg-scena { cursor: grab; -webkit-user-select: none; user-select: none; }
.arg[data-modulo="0"] .arg-scena.arg-trascina { cursor: grabbing; }

/* Fondamentale: banca centrale e mercati si toccano */
.arg[data-modulo="1"] .et-mercato, .arg[data-modulo="1"] .et-banca { pointer-events: auto; cursor: pointer; padding: .3rem .4rem; transition: color .3s, text-shadow .3s, opacity .4s; }
.arg[data-modulo="1"] .arg-scena.arg-punta { cursor: pointer; }
.et-mercato.scelto { color: #fff; text-shadow: 0 0 16px rgba(52, 211, 153, .9), 0 0 3px rgba(2, 6, 23, .95); }
.et-mercato.spento, .et-banca.spento { color: rgba(186, 230, 253, .4); }
.et-banca i { display: block; margin-top: .25rem; font-style: normal; font-size: .7rem; letter-spacing: .12em; text-align: center; }
.et-banca i.rialzo { color: #f2c14e; }
.et-banca i.taglio { color: #67e8f9; }
.et-mercato:focus-visible, .et-banca:focus-visible { outline: 1px solid #22d3ee; outline-offset: 2px; border-radius: 6px; }

/* Auction: POC e bordi della value area si toccano; il prezzo dice cosa sta succedendo */
.arg[data-modulo="2"] .et-poc, .arg[data-modulo="2"] .et-va { pointer-events: auto; cursor: pointer; padding: .3rem .4rem; }
.et-poc.scelto, .et-va.scelto { color: #fff; text-shadow: 0 0 14px rgba(103, 232, 249, .85), 0 0 3px rgba(2, 6, 23, .95); }
.et-poc.scelto { text-shadow: 0 0 14px rgba(239, 68, 68, .9), 0 0 3px rgba(2, 6, 23, .95); }
.et-prezzo i { display: block; margin-top: 0; font-style: normal; font-weight: 600; font-size: .6rem; letter-spacing: .08em; text-transform: none; color: #a5f3fc; white-space: nowrap; }
.et-prezzo { translate: -88% -150%; text-align: right; }
.et-poc:focus-visible, .et-va:focus-visible { outline: 1px solid #22d3ee; outline-offset: 2px; border-radius: 6px; }

/* tolte le frasi che descrivevano cosa succede */
.et-prezzo { display: none !important; }