/* MARCA_85323_PROVA_SEI_PASSI_A_SCHEDE — la pagina della prova, sotto il modulo (consegna 85323, 30/9/2026).
   «e anche il prova , dove ci sono i 6 punti a sfilza lunga e non sono belli , adattali e adeguati
   al resto del sito» (Giovanni, 24/9). I sei passi come schede compatte (3+3 su schermo grande, due
   colonne sul medio, una linea del tempo al telefono), con il testo lungo nel «Di più»; le altre due
   sezioni («Cosa conviene avere sottomano» e «Cosa succede oggi») nello stesso stile: filo di colore
   in cima, titolo centrato a due colori, schede che si alzano sotto il mouse. Solo token di temi.css:
   chiaro e scuro vanno da soli. Lo carica solo iscrizione.html (e le sue copie nelle altre lingue).
   Il modulo di iscrizione NON e' toccato. Per toglierlo: consegna 85324. */

/* 1. le teste delle sezioni: occhiello, titolo a due colori, riga sotto */
.ip-testa{margin-bottom:clamp(28px,4vw,44px)}
.ip-testa .occhiello{margin-bottom:14px}
.ip-testa h2 .parole{vertical-align:top}
/* la frase che cambia sta allineata a sinistra nella sua casella: centrata lascerebbe un buco prima */
.ip-testa h2 .parole-giro{text-align:left}

/* 2. i sei passi */
.ip-passi{list-style:none;margin:0;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
/* chiuse, le schede di una riga sono alte uguali; se se ne apre una, le altre non si allungano a vuoto */
.ip-passi:has(.ip-dipiu[open]){align-items:start}
.ip-passo{
  position:relative;min-width:0;margin:0;max-width:none;
  display:flex;flex-direction:column;gap:8px;
  padding:22px 22px 14px;border-radius:var(--r-l);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr);
}
.ip-passo::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--logo-gradient)}
.ip-numero{
  display:block;font-size:44px;line-height:1;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  /* il numero «a contorno»: il filo nel colore del sito, il pieno appena velato */
  color:color-mix(in srgb,var(--accent) 16%,transparent);
  -webkit-text-stroke:1.5px var(--accent);
}
.ip-passo h3{margin:4px 0 0;font-size:clamp(17px,1.6vw,19px);line-height:1.25}
.ip-riga{margin:0;max-width:none;font-size:15px;line-height:1.5;color:var(--ink-2)}

/* il «Di più»: un pulsante vero, largo quanto la scheda, che si apre sul posto */
.ip-dipiu{margin-top:auto;padding-top:4px;border-top:1px solid var(--line-soft)}
.ip-dipiu > summary{
  display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 0;cursor:pointer;list-style:none;
  font-size:14px;font-weight:800;color:var(--accent);
}
.ip-dipiu > summary::-webkit-details-marker{display:none}
.ip-dipiu > summary::marker{content:""}
.ip-dipiu > summary::after{
  content:"";width:7px;height:7px;margin:-3px 0 0 2px;
  border-right:2.2px solid currentColor;border-bottom:2.2px solid currentColor;transform:rotate(45deg);
  transition:transform var(--tr),margin var(--tr);
}
.ip-dipiu[open] > summary::after{transform:rotate(225deg);margin-top:3px}
.ip-dipiu > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (hover:hover){.ip-dipiu > summary:hover{text-decoration:underline;text-underline-offset:3px}}
.ip-dipiu > p{margin:2px 0 10px;max-width:none;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* 3. «Cosa conviene avere sottomano»: le tre schede con lo stesso filo di colore */
.ip-schede{grid-template-columns:repeat(3,minmax(0,1fr))}
.ip-scheda{position:relative;overflow:hidden}
.ip-scheda::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--logo-gradient)}

/* 4. «Cosa succede oggi»: gli stessi riquadri, con il filo in cima invece che di lato */
.ip-oggi .contenitore{max-width:960px}
.ip-oggi .testa-sezione{margin-inline:auto;text-align:center;margin-bottom:clamp(28px,4vw,44px)}
.ip-oggi .testa-sezione h2 .parole{vertical-align:top}
.ip-oggi .testa-sezione h2 .parole-giro{text-align:left}
.ip-oggi .riquadro p{max-width:none}
.ip-oggi .riquadro{position:relative;overflow:hidden;border-left:1px solid var(--line);border-radius:var(--r-l);
  padding:22px;box-shadow:var(--shadow-sm)}
.ip-oggi .riquadro::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--logo-gradient)}
.ip-oggi .riquadro-avviso::before{background:var(--warn)}

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ip-passo:hover,.ip-scheda:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
}

/* 5. il movimento leggero: le schede salgono una dopo l'altra quando arrivano sullo schermo.
      Lo accende js/iscrizione-passi.js (classe ip-attesa, poi ip-visto). Senza quel file, o con
      «riduci movimento», le schede sono semplicemente ferme e visibili. */
@media (prefers-reduced-motion:no-preference){
  .ip-attesa > *{opacity:0;translate:0 18px}
  .ip-attesa.ip-visto > *{opacity:1;translate:0 0;transition:opacity .55s cubic-bezier(.2,.7,.2,1),translate .55s cubic-bezier(.2,.7,.2,1),
    transform var(--tr),box-shadow var(--tr),border-color var(--tr);transition-delay:calc(var(--ip-i,0) * 70ms),calc(var(--ip-i,0) * 70ms),0s,0s,0s}
  .ip-dipiu[open] > p{animation:ip-apri .3s cubic-bezier(.2,.7,.2,1) both}
  @keyframes ip-apri{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
}

@media print{.ip-attesa > *{opacity:1 !important;translate:none !important}}

/* 6. schermi medi e telefono */
@media (max-width:1023px){
  .ip-passi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ip-schede{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:699px){
  /* al telefono: una linea del tempo, il numero a sinistra e il filo che li unisce */
  .ip-passi{grid-template-columns:minmax(0,1fr);gap:12px}
  .ip-passo{display:grid;grid-template-columns:52px minmax(0,1fr);align-content:start;column-gap:14px;row-gap:4px;padding:16px 16px 8px 14px}
  .ip-passo::before{inset:0 auto 0 0;width:4px;height:auto}
  .ip-numero{grid-row:1 / span 3;font-size:34px;padding-top:2px}
  .ip-passo h3{margin-top:0}
  .ip-passo > *:not(.ip-numero){grid-column:2}
  .ip-passi .ip-passo:not(:last-child)::after{content:"";position:absolute;left:39px;bottom:-13px;width:2px;height:14px;background:var(--line-strong)}
  .ip-passo{overflow:visible}
  .ip-passo::before{border-radius:var(--r-l) 0 0 var(--r-l)}
}
/* MARCA_85323_PROVA_SEI_PASSI_A_SCHEDE:fine */