/* Confartigianato Agrigento — la sezione «Servizi per le imprese» (testi dell'utente del 4 novembre 2026, direzione A).
   Modelli: materiale/modello-pagina/servizi.html (pagina della sezione), servizio-credito.html, servizio-contributi.html,
   servizio-sicurezza.html e servizio-edili.html (pagine di servizio), stessi numeri. Pattern della categoria «Servizi per le imprese» (inc/servizi.php):
   - pagina della sezione: «Frase grande», «Servizi: elenco» (riga con titolo, descrizione e cifra che compare al passaggio),
     «Invito ad associarsi»;
   - pagine di servizio: «Servizio: introduzione», «Servizio: gruppo» (con elenco o con una frase), «Servizio: avviso» (Novità),
     «Servizio: vuoi saperne di più?» (fascia blu); in fondo «Altri servizi», che aggiunge il tema.
   Il colore della sezione (--sez, giallo #F8C262 per «Servizi per le imprese») sul bianco solo per fili, sottolineature delle cifre
   e segno dell'avviso: mai per il testo.

   Si appoggia a sezioni.css (.cs, etichette, --sez, movimento): li carica insieme functions.php, e l'editor (add_editor_style).
   Come in sezioni.css, il movimento comincia con :where(.testo): nell'editor è tutto fermo.
   Differenze rispetto al modello, solo tecniche:
   - il .dentro del modello è il margine --bordo delle sezioni; gruppi, avviso e riga dei corsi (classe .ps) sono sezioni una dopo
     l'altra: tra loro c'è lo spazio della griglia del modello (64 px), sopra la prima e sotto l'ultima quello del contenitore (100 px);
   - in «Servizi: elenco» il link sta sul titolo e copre tutta la riga, come la riga-link del modello. Per questo al passaggio
     il titolo si sposta con i margini e non con transform: un elemento spostato così diventerebbe il riferimento del link
     che copre la riga (::after), che coprirebbe solo il titolo. La freccia la aggiunge il tema;
   - l'avviso è un gruppo con due paragrafi: «Novità» e il testo;
   - i pulsanti della fascia blu sono blocchi Pulsante; le icone (telefono, busta) sono maschere SVG scritte qui;
   - il logo che fa da titolo del gruppo è un'immagine in linea dentro il titolo, con la larghezza scritta nell'editor
     (nel modello l'altezza, --h, e la larghezza massima, --w): nel sito la larghezza diventa --larghezza (inc/loghi.php). */

/* ---------- Pagina della sezione · Frase grande ---------- */
.sv-intro{padding:120px var(--bordo, 32px) 40px}
.cs .sv-grande{max-width:980px;font-size:clamp(36px,4.6vw,64px);font-weight:300;line-height:1.1;letter-spacing:-.01em;color:var(--blu);text-wrap:pretty}
.cs .sv-seconda{max-width:620px;margin:40px 0 0 auto;padding-top:24px;border-top:1px solid var(--filo);font-size:24px;line-height:1.45}

/* ---------- Servizi: elenco («Di cosa hai bisogno?») ----------
   Una riga per servizio; al passaggio il filo giallo attraversa la riga, il titolo scivola e compare la cifra. */
.sv-bisogno{padding:90px var(--bordo, 32px) 120px}
.cs .sa-riga{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) 220px 22px;gap:28px;align-items:center;padding:30px 0;border-top:1px solid var(--filo)}
.cs .sa-riga:last-child{border-bottom:1px solid var(--filo)}
.cs .sa-riga::before{content:'';position:absolute;left:0;top:-1px;width:0;height:2px;background:var(--sez);transition:width .6s var(--entra)}
.cs .sa-titolo{margin:0;font-size:42px;font-weight:300;line-height:1.05;color:var(--blu);transition:margin .5s var(--entra)}
.cs .sa-titolo a{color:inherit;text-decoration:none}
/* tutta la riga porta alla pagina del servizio, come nel modello */
.cs .sa-titolo a::after{content:'';position:absolute;inset:0}
.cs .sa-titolo a:focus-visible{outline:0}
.cs .sa-titolo a:focus-visible::after{outline:2px solid var(--blu);outline-offset:4px}
.cs .sa-desc{font-size:17px;line-height:1.45;color:var(--grigio)}
.cs .sa-cifra{justify-self:end;font-size:40px;font-weight:300;line-height:1;color:var(--blu);white-space:nowrap;opacity:0;transform:translateX(-12px);transition:opacity .35s ease,transform .5s var(--entra)}
.cs .sa-riga .fr{color:var(--blu);transition:transform .4s var(--entra)}
.cs .sa-riga:hover::before,.cs .sa-riga:has(a:focus-visible)::before{width:100%}
.cs .sa-riga:hover .sa-titolo,.cs .sa-riga:has(a:focus-visible) .sa-titolo{margin-left:12px;margin-right:-12px}
.cs .sa-riga:hover .sa-cifra,.cs .sa-riga:has(a:focus-visible) .sa-cifra{opacity:1;transform:none}
.cs .sa-riga:hover .fr{transform:translateX(6px)}
/* senza mouse (telefono, tablet) la cifra è sempre visibile */
@media (hover:none){.cs .sa-cifra{opacity:1;transform:none}}
/* cifre: sottolineate nel colore della sezione (nella riga e, nelle pagine di servizio, il grassetto) */
.cs .sa-cifra,.cs .ps-lista strong,.cs .ps-testo strong,.cs .ps-avviso strong{background:linear-gradient(var(--sez),var(--sez)) left 92% / 100% .12em no-repeat}

/* ---------- Invito ad associarsi ---------- */
.sv-associati{padding:56px var(--bordo, 32px);background:var(--carta)}
.cs.sv-associati p{font-size:24px;line-height:1.4}
.cs.sv-associati strong{font-weight:600;color:var(--blu)}
.cs.sv-associati a,.cs.ps-corsi a{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--sez);text-underline-offset:6px}

/* ---------- Pagine di servizio ---------- */
/* Servizio: introduzione */
.ps-intro{padding:100px var(--bordo, 32px) 0}
.cs.ps-intro p{max-width:760px;font-size:26px;line-height:1.45}
/* Gruppi, avviso e riga dei corsi, uno dopo l'altro: 64 px tra loro, 100 px sopra il primo (72 dopo l'introduzione) e sotto l'ultimo */
.cs.ps{padding:64px var(--bordo, 32px) 0}
:not(.ps) + .cs.ps,.cs.ps:first-child{padding-top:100px}
.ps-intro + .cs.ps{padding-top:72px}
.cs.ps:not(:has(+ .ps)){padding-bottom:100px}
/* Servizio: gruppo: titolo a sinistra, a destra l'elenco o una frase sola, con il filo tra le righe */
.ps-gruppo{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}
.cs .ps-tit{font-size:34px;font-weight:500;line-height:1.1;color:var(--blu)}
/* logo dell'ente nel titolo del gruppo (decisione dell'utente del 4 novembre 2026, 17:29): dove il gruppo parla di un ente con il logo,
   il titolo È il logo (immagine dentro l'H2, testo alternativo = nome dell'ente) e il nome non si scrive. Se il titolo dice anche altro
   («Per la tua impresa»), il logo sta sopra. Sul telefono l'80%, come nel modello. */
.cs .ps-tit img{display:block;width:var(--larghezza, auto);max-width:100%;height:auto;margin-bottom:18px}
.cs .ps-tit-logo img{margin-bottom:0}
.cs .ps-lista{margin:0;padding:0;list-style:none;border-top:1px solid var(--filo)}
.cs .ps-lista li,.cs .ps-testo{margin:0;padding:22px 0;border-bottom:1px solid var(--filo);font-size:24px;line-height:1.45}
.cs .ps-testo{border-top:1px solid var(--filo)}
/* le cifre in grassetto: più grandi e sottili */
.cs .ps-lista strong,.cs .ps-testo strong,.cs .ps-avviso strong{font-size:1.5em;font-weight:300;line-height:1;color:var(--blu);white-space:nowrap}
/* Servizio: avviso */
.cs .ps-avviso{position:relative;max-width:820px;padding:28px 32px 30px 36px;background:var(--carta);font-size:24px;line-height:1.45}
.cs .ps-avviso::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sez)}
.cs .ps-novita{margin-bottom:8px;font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--grigio)}
/* la riga dei corsi (pagina «Sicurezza e formazione») */
.ps-corsi{font-size:24px;line-height:1.45}
/* Servizio: vuoi saperne di più? */
.ps-invito{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px;padding:80px var(--bordo, 32px);background:radial-gradient(120% 90% at 85% 0%,rgba(255,255,255,.09),rgba(255,255,255,0) 55%),var(--blu);color:#fff}
.cs .ps-domanda{max-width:620px;font-size:30px;font-weight:300;line-height:1.3}
.cs .ps-domanda a{color:#fff;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:5px}
.cs .ps-domanda a:focus-visible{outline-color:#fff}
.cs .ps-azioni{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.cs .bot .wp-block-button__link{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 24px;border:0;border-radius:999px;background:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6);color:#fff;font-size:17px;font-weight:600;line-height:1;letter-spacing:.06em;text-decoration:none;transition:transform .25s ease}
.cs .bot.pieno .wp-block-button__link{background:#fff;color:var(--blu);box-shadow:none}
.cs .bot .wp-block-button__link:hover{transform:translateY(-2px)}
.cs .bot .wp-block-button__link:focus-visible{outline:3px solid #fff;outline-offset:4px}
.cs .bot .wp-block-button__link::before{content:'';flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--icona) center / 20px 20px no-repeat;mask:var(--icona) center / 20px 20px no-repeat}
.cs .ps-telefono{--icona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")}
.cs .ps-scrivici{--icona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}

/* ---------- Altri servizi: le pagine sorelle, in fondo alle pagine di servizio (le aggiunge il tema) ---------- */
.ps-altri .dentro{padding-top:90px;padding-bottom:110px}
.ps-altri ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin:0;padding:0;list-style:none;border-top:1px solid var(--filo)}
.ps-altri a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;border-bottom:1px solid var(--filo);font-size:24px;font-weight:300;text-decoration:none;transition:padding .4s var(--entra)}
.ps-altri a:hover{padding-left:8px}
.ps-altri a .fr{flex:none;transition:transform .4s var(--entra)}
.ps-altri a:hover .fr{transform:translateX(6px)}

/* ---------- Effetti allo scorrimento, solo nel sito ---------- */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference){
:where(.testo) .cs :is(.sa-riga,.sv-seconda,.ps-testo,.ps-avviso),:where(.testo) .cs .ps-lista li{animation:sale linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
:where(.testo) .cs .sv-grande{animation:sale linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
/* «Altri servizi» sta dopo il testo della pagina: il suo filo si allunga come quelli delle altre etichette */
.ps-altri .etichetta::after{animation:avanza linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
}
}
@media (prefers-reduced-motion:reduce){
.cs .sa-riga::before,.cs .sa-titolo,.cs .sa-cifra,.cs .sa-riga .fr,.ps-altri a,.ps-altri a .fr,.cs .bot .wp-block-button__link{transition:none}
}

/* ---------- Schermi medi: la cifra va sotto la descrizione, i gruppi in una colonna ---------- */
@media (max-width:900px){
.cs .sa-riga{grid-template-columns:minmax(0,1fr) 22px;gap:8px 16px}
.cs .sa-titolo,.cs .sa-desc{grid-column:1}
.cs .sa-cifra{grid-column:1;grid-row:3;justify-self:start;opacity:1;transform:none;font-size:30px}
.cs .sa-riga .fr{grid-column:2;grid-row:1}
.ps-gruppo{grid-template-columns:minmax(0,1fr);gap:20px}
.ps-altri ul{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Telefono ---------- */
@media (max-width:720px){
.sv-intro{padding-top:72px}
.cs .sv-seconda{font-size:20px}
.sv-bisogno{padding:64px var(--bordo, 20px) 80px}
.cs .sa-titolo{font-size:30px}
.cs.sv-associati p{font-size:20px}
.ps-intro{padding-top:64px}
.cs.ps-intro p,.ps-corsi{font-size:20px}
.cs.ps{padding-top:48px}
:not(.ps) + .cs.ps,.cs.ps:first-child{padding-top:64px}
.ps-intro + .cs.ps{padding-top:72px}
.cs.ps:not(:has(+ .ps)){padding-bottom:72px}
.cs .ps-tit{font-size:26px}
.cs .ps-tit img{width:calc(var(--larghezza) * .8)}
.cs .ps-lista li,.cs .ps-testo,.cs .ps-avviso{font-size:20px}
.cs .ps-avviso{padding:22px 20px 24px 24px}
.cs .ps-domanda{font-size:24px}
.ps-invito{padding-top:64px;padding-bottom:64px}
.ps-altri a{font-size:20px}
}