/* Confartigianato Agrigento — la sezione «Servizi per le persone» (testi dell'utente del 4 novembre 2026).
   Modelli: materiale/modello-pagina/persone.html (pagina della sezione), persona-anap.html, persona-caaf.html, persona-ancos.html,
   stessi numeri. Pattern della categoria «Servizi per le persone» (inc/persone.php): «Frase in fascia blu con schede» (la pagina
   della sezione, dal 4 novembre 2026 alle 19:07), «Frase con foto» (resta fra i pattern, ma lì non si usa più), «Nota piccola»,
   «5 per mille». Le pagine figlie usano anche i pattern «Servizio: …» (servizi.css) e, nella testata, il
   «Logo nella testata» (style.css, .margine-logo).
   Il colore della sezione (--sez, azzurro #51C2DD per la terza voce del «Menu del logo») sul bianco solo per fili, lineetta,
   sottolineature e voce attiva della barra: mai per il testo.

   Si appoggia a sezioni.css (.cs, etichette, --sez): li carica insieme functions.php, e l'editor (add_editor_style). Differenze
   rispetto al modello, solo tecniche:
   - «Frase in fascia blu con schede»: una sola sezione (.cs.pf) con la fascia (gruppo .pf-fascia), il titolo nascosto (classe sr
     di comune.css) e le schede (gruppo .pf-schede, un gruppo .pf-scheda per scheda). Nel modello ogni scheda è un link intero:
     qui il link sta sul titolo e copre tutta la scheda con ::after, come le righe di «Servizi: elenco»; la freccia di «Scopri» è
     una maschera SVG scritta qui. Il «blu scuro» del pezzo acceso (nel modello var(--marchio), che il modello non definisce) è
     il blu del marchio, #02205d, come nella testata. L'accensione (.acceso, .attive) la fa assets/js/persone.js;
   - «5 per mille»: il «×» piccolo e il pulsante «Copia» li aggiungono il tema e persone.js; il titolo «Il 5 per mille» è per i
     lettori di schermo (nell'editor si vede, per poterlo scrivere). */

/* ---------- Frase con foto ---------- */
.pe-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:center;padding:110px var(--bordo, 32px) 40px}
.cs .pe-frase{font-size:clamp(32px,3.8vw,52px);font-weight:300;line-height:1.15;letter-spacing:-.01em;color:var(--blu);text-wrap:pretty}
.cs .pe-foto{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--carta)}
.cs .pe-foto img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- Frase in fascia blu con schede ----------
   Fascia blu a tutta larghezza con la frase in bianco; i pezzi «per chi è…» sono link, sottolineati nel colore della sezione
   (azzurro #51C2DD): passandoci sopra o con il tab l'azzurro riempie il pezzo e il testo diventa blu scuro. Sotto, le schede
   bianche salgono di 120 px sopra il bordo della fascia, con un'ombra morbida, come un foglio appoggiato. */
.cs.pf{padding:0 0 120px}
.pf-fascia{padding:120px var(--bordo, 32px) 184px;background:var(--blu)}
.cs .pf-frase{max-width:17em;font-size:clamp(30px,4.8vw,66px);font-weight:300;line-height:1.15;letter-spacing:-.01em;color:#fff;text-wrap:pretty}
.cs .pf-frase a{color:#fff;font-weight:500;text-decoration:none;background:linear-gradient(var(--sez),var(--sez)) left 92% / 100% .09em no-repeat;transition:background-size .45s var(--entra),color .3s ease}
.cs .pf-frase a:hover,.cs .pf-frase a:focus-visible,.cs .pf-frase a.acceso{background-size:100% 100%;color:#02205d}
.cs .pf-frase a:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:0}
.cs .pf-schede{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:-120px var(--bordo, 32px) 0;background:#fff;box-shadow:0 40px 80px -40px rgba(2,32,93,.35)}
.cs .pf-scheda{position:relative;display:flex;flex-direction:column;gap:14px;padding:36px 32px 40px;color:var(--inchiostro);transition:opacity .35s ease,background .3s ease}
.cs .pf-scheda + .pf-scheda{border-left:1px solid var(--filo)}
/* il filo nel colore della sezione in alto, quando la scheda è accesa */
.cs .pf-scheda::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--sez);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--entra)}
.cs .pf-scheda:hover::before,.cs .pf-scheda:focus-within::before,.cs .pf-scheda.acceso::before{transform:scaleX(1)}
.cs .pf-schede.attive .pf-scheda{opacity:.35}
.cs .pf-schede.attive .pf-scheda.acceso{opacity:1;background:var(--carta)}
.cs .pf-logo{margin:0}
.cs .pf-logo img{display:block;height:110px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.cs .pf-tit{font-size:30px;font-weight:300;line-height:1.1;color:var(--blu)}
.cs .pf-tit a{color:inherit;text-decoration:none}
/* tutta la scheda porta alla pagina, come le righe di «Servizi: elenco» */
.cs .pf-tit a::after{content:'';position:absolute;inset:0;z-index:1}
.cs .pf-tit a:focus-visible{outline:0}
.cs .pf-tit a:focus-visible::after{outline:2px solid var(--blu);outline-offset:-2px}
.cs .pf-desc{font-size:19px;line-height:1.5}
.cs .pf-vai{display:inline-flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px;font-size:14px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blu)}
.cs .pf-vai::after{content:'';flex:none;width:20px;height:20px;background:currentColor;transition:transform .4s var(--entra);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px 20px no-repeat}
.cs .pf-scheda:hover .pf-vai::after,.cs .pf-scheda:focus-within .pf-vai::after{transform:translateX(6px)}

/* ---------- 5 per mille ---------- */
.cinque{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center;padding:96px var(--bordo, 32px);background:var(--carta)}
.cs .cinque-tit{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cs .cinque-cifra{font-size:clamp(84px,11vw,160px);font-weight:300;line-height:.9;letter-spacing:-.03em;color:var(--blu)}
.cs .cinque-cifra span{margin:0 .04em;font-size:.6em;color:var(--grigio)}
.cs .cinque-testo{font-size:24px;line-height:1.45}
.cs .cf{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:28px;padding-top:22px;border-top:1px solid var(--filo)}
.cs .cf-et{width:100%;font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--grigio)}
.cs .cf-num{font-size:clamp(34px,4.4vw,56px);font-weight:300;letter-spacing:.08em;color:var(--blu);font-variant-numeric:tabular-nums;user-select:all;background:linear-gradient(var(--sez),var(--sez)) left 92% / 100% .1em no-repeat}
.cf-copia{min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--blu);color:#fff;font:600 15px/1 'Barlow Semi Condensed',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.cf-copia:focus-visible{outline:2px solid var(--blu);outline-offset:4px}
.cf-ok{font-size:16px;color:var(--grigio)}

/* ---------- Nota piccola ---------- */
.nota-piccola{padding:28px var(--bordo, 32px)}
.cs.nota-piccola p{font-size:16px;color:var(--grigio)}

/* ---------- Schermi medi: una colonna; le schede una sotto l'altra, salgono di 84 px ---------- */
@media (max-width:900px){
.pe-intro,.cinque{grid-template-columns:minmax(0,1fr);gap:28px}
.pf-fascia{padding-top:72px;padding-bottom:140px}
.cs .pf-schede{grid-template-columns:minmax(0,1fr);margin-top:-84px}
.cs .pf-scheda + .pf-scheda{border-left:0;border-top:1px solid var(--filo)}
.cs.pf{padding-bottom:80px}
}

/* ---------- Telefono ---------- */
@media (max-width:720px){
.pe-intro{padding-top:72px}
.cs .pf-scheda{padding:28px 24px 32px}
.cs .pf-logo img{height:84px}
.cs .pf-tit{font-size:26px}
.cs .cinque-testo{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
.cs .pf-frase a,.cs .pf-scheda,.cs .pf-scheda::before,.cs .pf-vai::after{transition:none}
}