/* ============================================================================
   associazione.css — la pagina «L'associazione». Si carica dopo base.css

   È una pagina che si legge: una colonna sola, stretta abbastanza da non
   stancare l'occhio, con due fasce chiare a spezzare mission e vision. I
   colori, i raggi e le distanze sono quelli del disegno: qui non si inventa
   niente, si compone con quello che c'è già.
   ============================================================================ */

/* --- la riga delle tre ancore, sotto la banda --- */
.ass-punti{background:#fff;border-bottom:1px solid var(--filo);position:sticky;top:0;z-index:5}
.ass-punti .dentro{display:flex;gap:1.6rem;flex-wrap:wrap;min-height:52px;align-items:center}
.ass-punti a{font-size:.94rem;color:var(--grigio);padding:.25rem 0;border-bottom:2px solid transparent}
.ass-punti a:hover{color:var(--ink);border-bottom-color:var(--verde)}

/* --- i blocchi di testo --- */
.ass-testo{padding:3rem 0}
.ass-testo.chiaro{background:var(--nebbia);border-top:1px solid var(--filo);border-bottom:1px solid var(--filo)}
.ass-testo .dentro{max-width:44rem}
.ass-testo h2{font-size:1.8rem;margin-bottom:1.2rem}
.ass-corpo p{font-size:1.05rem;line-height:1.75;margin:0 0 1.1rem}
.ass-corpo h2,.ass-corpo h3{font-size:1.2rem;margin:1.8rem 0 .6rem}
.ass-corpo ul,.ass-corpo ol{margin:0 0 1.2rem;padding-left:1.3rem}
.ass-corpo li{margin-bottom:.5rem;line-height:1.7}
.ass-corpo blockquote{margin:1.4rem 0;padding-left:1.1rem;border-left:3px solid var(--verde);
  color:var(--grigio);font-size:1.05rem}
.ass-corpo img{border-radius:var(--r);margin:1.2rem 0}

/* Arrivando a una sezione da un collegamento — le tre ancore qui sopra, o le
   scorciatoie della home — la pagina si ferma un po' prima: senza, il titolo
   finiva sotto la testata, che resta fissa in cima. */
#chi-siamo,#mission,#vision,#statuto,#contatti{scroll-margin-top:46px}

/* --- DALL'IDEA AL PROGETTO ------------------------------------------------
   Quattro cerchi numerati uniti da un filo punteggiato. Il filo è disegnato
   con un bordo tratteggiato su uno pseudo-elemento, messo DIETRO i cerchi:
   se passasse sopra, taglierebbe i numeri. I cerchi hanno il fondo pieno
   apposta, così coprono il filo dove si sovrappone.
   Sul telefono la fila diventa una colonna e il filo scende. */
.ass-passi{list-style:none;margin:2.6rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center}
.ass-passi li{position:relative;padding:0 .6rem}

/* il filo fra un passo e il successivo: parte dal centro di questo e arriva
   al centro del prossimo, e sta dietro (z-index 0 contro 1 dei cerchi) */
.ass-passi li::before{content:"";position:absolute;top:27px;left:50%;width:100%;
  border-top:2px dotted #C9CDDD;z-index:0}
.ass-passi li:last-child::before{display:none}

.ass-passi .num{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;margin:0 auto .8rem;border-radius:50%;
  background:#fff;border:2px solid var(--verde);color:var(--verde);
  font-family:var(--display);font-weight:500;font-size:1.5rem;line-height:1}
.ass-passi .passo{display:block;color:var(--verde);font-size:.95rem;margin-bottom:.3rem}
.ass-passi .dice{display:block;font-size:.92rem;color:var(--grigio);line-height:1.55}
.ass-passi .dice b{color:var(--ink)}

/* --- gli stralci dello statuto --- */
/* Gli stralci: in fila, ma CENTRATI e a capo da soli. Con cinque pagine
   vengono tre sopra e due sotto, e le due restano in mezzo invece di
   accostarsi a sinistra — che con una griglia a colonne fisse succedeva. */
.ass-stralci{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:1.8rem 0 0}
.ass-stralci a{flex:0 0 180px;display:block;border:1px solid var(--filo);border-radius:10px;
  overflow:hidden;background:#fff;transition:transform .15s,border-color .15s}
.ass-stralci a:hover{transform:translateY(-2px);border-color:var(--verde)}
.ass-stralci img{display:block;width:100%;height:auto}

/* --- il direttivo --- */
.ass-direttivo{padding:3.2rem 0}
.ass-direttivo h2{font-size:1.8rem;margin-bottom:2rem;text-align:center}
/* le persone stanno al centro, anche quando l'ultima riga non e' piena */
.ass-carte{display:flex;flex-wrap:wrap;justify-content:center;gap:2.4rem 2.8rem}
.ass-persona{width:200px;text-align:center}
.ass-persona img,.ass-persona .ass-iniziali{display:block;width:175px;height:175px;margin:0 auto 1.1rem;
  border-radius:50%;object-fit:cover;background:var(--nebbia-2)}
.ass-persona .ass-iniziali{display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:600;font-size:2.2rem;color:var(--grigio)}
/* il nome nel carattere del testo, la carica in corsivo sotto */
.ass-persona b{display:block;font-family:var(--testo);font-weight:600;font-size:1.02rem;line-height:1.35}
.ass-persona small{display:block;margin-top:.1rem;font-size:.98rem;font-style:italic;color:var(--ink)}

/* --- lo statuto --- */
/* il pulsante per scaricare: in mezzo, sotto gli stralci */
.ass-scarica{margin-top:2rem;text-align:center}
.ass-scarica img{max-width:260px;height:auto;display:inline-block}

/* --- i contatti --- */
.ass-contatti{padding:3.2rem 0 4.2rem;background:var(--nebbia);border-top:1px solid var(--filo)}
.ass-contatti h2{font-size:1.8rem;margin-bottom:1.6rem}
.ass-due{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:2.4rem;align-items:start}
.ass-riferimenti dl{margin:1.4rem 0 0}
.ass-riferimenti dt{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grigio);margin-top:1.1rem}
.ass-riferimenti dd{margin:.2rem 0 0;line-height:1.6}
/* l'aspetto di ogni riga, scelto in redazione: dimensione, grassetto, corsivo */
.ass-riferimenti .ass-piccolo{font-size:.86rem}
.ass-riferimenti .ass-grande{font-size:1.2rem;line-height:1.4}
.ass-riferimenti .ass-g{font-weight:600}
.ass-riferimenti .ass-c{font-style:italic}
/* Il contorno del modulo — riquadro, titolo, frase — NON si riscrive qui:
   viene da modulo.css, ed è lo stesso in ogni pagina che ha il modulo. Una
   regola più specifica scritta qui lo farebbe differire, ed è esattamente
   quello che era successo. */

@media(max-width:860px){
  .ass-due{grid-template-columns:1fr;gap:1.8rem}
}
@media(max-width:700px){
  .ass-testo{padding:2.2rem 0}
  .ass-testo h2,.ass-direttivo h2,.ass-contatti h2{font-size:1.5rem}
  /* sul telefono: una colonna, e il filo scende invece di attraversare */
  .ass-passi{grid-template-columns:1fr;gap:1.2rem;text-align:left}
  .ass-passi li{display:grid;grid-template-columns:54px 1fr;
    column-gap:1rem;align-items:center;padding:0}
  .ass-passi li::before{top:54px;left:27px;width:0;height:100%;
    border-top:0;border-left:2px dotted #C9CDDD}
  .ass-passi .num{margin:0;grid-row:span 2}
  .ass-passi .passo{margin-bottom:.1rem}
  .ass-punti{position:static}
  .ass-punti .dentro{gap:1rem}
  /* sul telefono due persone per riga, sempre al centro */
  .ass-carte{gap:1.8rem 1.2rem}
  .ass-persona{width:calc(50% - .6rem)}
  /* sul telefono: uno sotto l'altro, in colonna e centrati */
  .ass-stralci{flex-direction:column;align-items:center;gap:1rem}
  .ass-stralci a{flex:none;width:min(240px,70%)}
  .ass-persona img,.ass-persona .ass-iniziali{width:140px;height:140px;margin-bottom:.8rem}

}

/* --- LA LENTE: lo stralcio aperto sopra la pagina --------------------------
   «dialog» con showModal() fa da sé il velo e il tasto Esc. Qui si toglie il
   riquadro bianco che il browser mette per conto suo, e si dà all'immagine
   tutto lo spazio che c'è, meno un po' d'aria. */
.lente{max-width:none;max-height:none;width:100%;height:100%;padding:0;border:0;
  background:transparent;overflow:hidden}
.lente::backdrop{background:rgba(9,10,26,.88)}
.lente img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  max-width:92vw;max-height:92vh;width:auto;height:auto;
  border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.45);background:#fff}
.lente-chiudi{position:absolute;top:1rem;right:1rem;width:44px;height:44px;
  border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);
  color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.lente-chiudi:hover{background:#fff;color:var(--ink);border-color:#fff}
@media(max-width:700px){
  .lente img{max-width:96vw;max-height:88vh}
  .lente-chiudi{top:.6rem;right:.6rem}
}