/* Pagine per bisogno (mappatura-competenze, conoscenza-tacita…): generate da tools/bisogni.py.
   Usano le classi comuni delle interne. Qui: disegno dell'apertura, intervista d'esempio, passi con il filo,
   risultati con la schermata vera che cambia mentre si legge. Movimento in bisogni.js. */

/* ---------- apertura: titolo a sinistra, disegno animato a destra ---------- */
.bisogno-aperta .griglia { align-items: end; }
.bisogno-disegno { margin: 0; display: flex; flex-direction: column; gap: 10px; align-self: end; }
.bisogno-disegno .output-lettura { margin-left: 0; color: var(--imperial); }
.bisogno-disegno .output-grafica-piede { border-top-color: var(--linea-chiara, rgba(14, 46, 62, .12)); }

/* ---------- perché + intervista ---------- */
.bisogno-perche .griglia { align-items: center; }
.bisogno-perche .titolo-medio { margin-bottom: clamp(20px, 3vh, 32px); }
.perche-grande { font: 500 var(--t-t3)/1.18 var(--voce); letter-spacing: -.02em; color: var(--imperial); text-wrap: pretty; font-variation-settings: "SOFT" 100, "WONK" 0; }
.bisogno-perche .testo-2 { font-size: var(--t-lead); line-height: 1.5; }
.bisogno-sessione .sessione { width: 100%; }
.sessione-righe .r-segue::before { content: "approfondisce"; display: block; width: fit-content; margin-bottom: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(201, 61, 88, .45); color: #b23650; font: 500 var(--t-micro)/1.2 var(--display); }

/* ---------- come funziona: icone su un filo che si riempie ---------- */
.come-capo { align-self: start; }
@media (min-width: 901px) { .come-capo { position: sticky; top: calc(var(--testata, 76px) + 8vh); } }
.passi--filo { position: relative; border-bottom: 0; }
.passi--filo > li { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 24px; align-items: start; border-top: 0; padding: clamp(18px, 3vh, 30px) 0; }
.passi--filo > li::before { content: none; }
.passi--filo h3 { margin-top: 12px; }
.passo-icona { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1px solid rgba(14, 46, 62, .14); color: var(--imperial); box-shadow: 0 1px 2px rgba(14, 46, 62, .05), 0 14px 28px -20px rgba(14, 46, 62, .3); transition: background-color .5s var(--esce, ease-out), color .5s var(--esce, ease-out), border-color .5s; }
.icona { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.passi--filo::before, .passi--filo::after { content: ""; position: absolute; left: 27.5px; width: 1px; top: var(--filo-da, 0); height: var(--filo-alto, 0); }
.passi--filo::before { background: rgba(14, 46, 62, .14); }
.passi--filo::after { width: 3px; left: 26.5px; border-radius: 3px; background: linear-gradient(var(--sky-chiaro, #8eb7ce), var(--imperial)); transform-origin: top; transform: scaleY(var(--avanza, 1)); }
.passi--filo > li.acceso .passo-icona { background: var(--imperial); border-color: var(--imperial); color: #f9fffb; }

/* ---------- cosa ricevi: voci a sinistra, schermata vera a destra ---------- */
.ricevi-voci { display: grid; }
.ricevi-voce { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: clamp(22px, 3.4vh, 34px) 0; border-top: 1px solid rgba(14, 46, 62, .12); transition: opacity .5s; }
.ricevi-voce:last-child { border-bottom: 1px solid rgba(14, 46, 62, .12); }
.ricevi-icona { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #eef4f7; color: var(--imperial); transition: background-color .45s, color .45s; }
.ricevi-icona .icona { width: 22px; height: 22px; }
.ricevi-voce h3 { font: 600 var(--t-t4)/1.2 var(--display); letter-spacing: -.015em; margin: 10px 0 10px; text-wrap: balance; }
.ricevi-voce p { color: var(--sky-chiaro); line-height: 1.6; }
.ricevi-foto { margin: 18px 0 0; }
.ricevi-foto img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(14, 46, 62, .12); box-shadow: 0 1px 2px rgba(14, 46, 62, .05), 0 24px 48px -32px rgba(14, 46, 62, .3); }
.ricevi-foto figcaption { margin-top: 8px; font-size: var(--t-piccolo); color: var(--nebbia-chiara, #56707f); }
.ricevi-palco { display: none; }

@media (min-width: 1081px) {
  .bisogno-ricevi .griglia { align-items: start; }
  .ricevi-foto { display: none; }
  .ricevi-voce { min-height: 30vh; align-content: center; }
  .ricevi-palco { display: block; position: sticky; top: calc(var(--testata, 76px) + 7vh); }
  .palco-schermo { position: relative; display: block; aspect-ratio: 1200 / 750; border-radius: 18px; overflow: hidden; background: #eef4f7; border: 1px solid rgba(14, 46, 62, .12); box-shadow: 0 1px 2px rgba(14, 46, 62, .05), 0 40px 80px -48px rgba(14, 46, 62, .45); }
  .palco-vista { position: absolute; inset: 0; opacity: 0; clip-path: inset(0 0 100% 0); transform: scale(1.03); transition: opacity .5s ease-out, clip-path .9s cubic-bezier(.16, 1, .3, 1), transform 1.2s cubic-bezier(.16, 1, .3, 1); }
  .palco-vista.attiva { opacity: 1; clip-path: inset(0 0 0 0); transform: none; z-index: 1; }
  .palco-vista img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
  .palco-piede { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
  .palco-nome { font: 600 var(--t-testo)/1.3 var(--display); color: var(--imperial); }
  .ricevi-vivo .ricevi-voce:not(.attiva) { opacity: .42; }
  .ricevi-vivo .ricevi-voce:not(.attiva):hover { opacity: .75; }
  .ricevi-voce.attiva .ricevi-icona { background: var(--imperial); color: #f9fffb; }
  .ricevi-vivo .ricevi-voce { cursor: pointer; }
}

/* ---------- esempi e altri usi ---------- */
.esempio .rimando { margin-top: 0; font: 600 var(--t-t4)/1.2 var(--display); }
.esempio .rimando .icona { width: 20px; height: 20px; stroke-width: 2.2; transition: transform .4s var(--esce, ease-out); }
.esempio .rimando:hover .icona { transform: translate(3px, -3px); }
.bisogni-altri { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; margin-top: clamp(48px, 7vh, 80px); padding-top: 22px; border-top: 1px solid var(--linea); }
.bisogni-altri p { color: var(--nebbia); font-size: var(--t-piccolo); }
.bisogni-altri ul { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.bisogni-altri a { color: var(--imperial); font-weight: 600; text-underline-offset: 4px; }

@media (max-width: 900px) {
  .bisogno-disegno { margin-top: 24px; }
  .bisogno-sessione { margin-top: 12px; }
  .come-capo { margin-bottom: 8px; }
}
@media (max-width: 600px) {
  .passi--filo > li { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; }
  .passo-icona { width: 44px; height: 44px; }
  .passi--filo::before { left: 21.5px; } .passi--filo::after { left: 20.5px; }
  .passi--filo h3 { margin-top: 8px; }
  .ricevi-voce { grid-template-columns: 1fr; gap: 12px; }
  .ricevi-voce h3 { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .palco-vista, .passo-icona, .ricevi-voce, .ricevi-icona { transition: none; }
}

/* SplitText e text-wrap: balance non vanno d'accordo in WebKit: le prime righe escono di una parola sola.
   Qui i titoli vanno a capo normalmente. */
body[data-pagina="bisogno"] :is(.aperta-titolo, .titolo-sezione, .titolo-medio, .passo-dopo-testo > span) { text-wrap: wrap; }

/* il link Output dentro la frase: senza il margine dei rimandi, altrimenti la riga va a capo larga */
.bisogno-esempi .capo p .rimando { margin-top: 0; display: inline; }