/* Confartigianato Agrigento — testo e blocchi delle pagine interne, uguali nel sito e nell'editor.
   Nel sito lo carica functions.php dopo style.css; nell'editor lo carica add_editor_style(), insieme a editor.css.
   :is(.testo,.is-root-container) = il contenuto della pagina: .testo nel sito, .is-root-container nell'editor.
   Numeri dal modello delle pagine interne (materiale/modello-pagina/index.html), tono elegante.
   Differenze rispetto al modello, solo tecniche:
   - nei pattern le cifre e gli anni sono il grassetto delle voci di un elenco, le schede e le persone sono colonne;
   - le foto segnaposto del modello sono i riquadri .foto e .tondo: si vedono finché non si sceglie un'immagine;
   - le righe grigie finte del modello (.righe) non ci sono: nei pattern c'è il paragrafo segnaposto.
   Colori (--blu, --grigio, --tenue, --chiaro) e margine --bordo: nel sito da comune.css e style.css, nell'editor da editor.css. */

/* ---------- Foto: riquadro e tondo ----------
   Finché non si sceglie un'immagine si vede il segnaposto del modello (righe oblique e «Foto»). */
.foto,.tondo::after{display:flex;align-items:center;justify-content:center;background:var(--chiaro) repeating-linear-gradient(135deg,transparent 0 14px,rgba(30,61,143,.06) 14px 15px);color:var(--grigio);font-size:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.foto{position:relative;overflow:hidden}
.foto::before,.tondo::after{content:'Foto'}
.foto .wp-block-image{position:absolute;inset:0;z-index:1;margin:0}
.tondo{position:relative;width:100%;aspect-ratio:1}
.tondo::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px dashed rgba(30,61,143,.35)}
.tondo::after{position:absolute;inset:5%;border-radius:50%}
.tondo .wp-block-image,.tondo > img{position:absolute;inset:5%;z-index:1;margin:0;border-radius:50%;overflow:hidden}
.tondo > img{width:90%;height:90%;object-fit:cover}
.foto .wp-block-image img,.tondo .wp-block-image img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- Testo delle pagine (Privacy, Cookie): tono elegante come il modello ----------
   Titoli di peso 500, righe sottili, niente tratteggio. */
:is(.testo,.is-root-container) > :is(h2,h3,h4,h5,h6){margin-top:1.8em;margin-bottom:.5em;color:var(--blu);font-weight:500;line-height:1.15;text-wrap:balance}
:is(.testo,.is-root-container) > h2{font-size:36px;letter-spacing:-.005em}
:is(.testo,.is-root-container) > h3{font-size:27px}
:is(.testo,.is-root-container) > :is(h4,h5,h6){font-size:21px}
:is(.testo,.is-root-container) > :first-child{margin-top:0}
:is(.testo,.is-root-container) a{color:var(--blu);text-decoration-thickness:1px;text-underline-offset:.2em}
:is(.testo,.is-root-container) a:hover{text-decoration-thickness:2px}
:is(.testo,.is-root-container) a:focus-visible{outline:3px solid var(--blu);outline-offset:2px;border-radius:2px}
:is(.testo,.is-root-container) > :is(ul,ol){padding-left:1.3em}
:is(.testo,.is-root-container) > :is(ul,ol) li{margin-bottom:.4em;padding-left:.3em}
:is(.testo,.is-root-container) > :is(ul,ol) li::marker{color:var(--blu)}
:is(.testo,.is-root-container) > blockquote{margin-top:1.6em;margin-bottom:1.6em;padding:.1em 0 .1em 1.1em;border-left:1px solid var(--blu);color:var(--blu);font-size:26px;line-height:1.3}
:is(.testo,.is-root-container) :is(img,video,iframe){max-width:100%;height:auto}
:is(.testo,.is-root-container) pre{overflow-x:auto}
:is(.testo,.is-root-container) > figure{margin-top:1.6em;margin-bottom:1.6em}
:is(.testo,.is-root-container) figcaption,:is(.testo,.is-root-container) .wp-caption-text{margin-top:.5em;color:var(--grigio);font-size:1rem}
:is(.testo,.is-root-container) > hr{margin-top:2.5em;margin-bottom:2.5em;border:0;border-top:1px solid var(--tenue)}
/* Tabelle: righe sottili, intestazione blu in maiuscolo spaziato.
   Le regole con .wp-block-table battono quelle del blocco Tabella di WordPress, che si caricano dopo.
   Se la tabella non entra, scorre dentro il suo riquadro; le ombre ai lati dicono che c'è altro da vedere. */
:is(.testo,.is-root-container) .wp-block-table{overflow-x:auto;
background:linear-gradient(90deg, #fff 40%, rgba(255,255,255,0)) 0 0 / 24px 100% no-repeat local,
linear-gradient(270deg, #fff 40%, rgba(255,255,255,0)) 100% 0 / 24px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(30,61,143,.2), rgba(30,61,143,0)) 0 0 / 10px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(30,61,143,.2), rgba(30,61,143,0)) 100% 0 / 10px 100% no-repeat scroll}
:is(.testo,.is-root-container) table{width:100%;border-collapse:collapse;font-size:17px;line-height:1.45}
:is(.testo,.is-root-container) th,:is(.testo,.is-root-container) td,:is(.testo,.is-root-container) .wp-block-table th,:is(.testo,.is-root-container) .wp-block-table td{padding:.8em 1.2em .8em 0;border:0;border-bottom:1px solid var(--tenue);text-align:left;vertical-align:top}
:is(.testo,.is-root-container) th:last-child,:is(.testo,.is-root-container) td:last-child{padding-right:0}
:is(.testo,.is-root-container) thead,:is(.testo,.is-root-container) .wp-block-table thead{border-bottom:0}
:is(.testo,.is-root-container) th,:is(.testo,.is-root-container) .wp-block-table th{padding-bottom:.75em;border-bottom:1px solid var(--blu);color:var(--blu);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
:is(.testo,.is-root-container) tbody td:first-child{color:var(--blu)}

/* ---------- I blocchi: i cinque pattern dell'editor (cartella patterns/), come nel modello, tono elegante ---------- */
.sezione{padding:104px var(--bordo, 32px)}
.sezione h2{margin:0;color:var(--blu);font-size:48px;font-weight:500;line-height:1.05;letter-spacing:-.005em;text-wrap:balance}
/* Le colonne di WordPress diventano la griglia del modello (le regole del blocco Colonne qui non contano). */
.sezione .wp-block-columns{display:grid;margin:0}
/* 1 · Testo con foto accanto */
.affianco{border-top:1px solid var(--tenue)}
.affianco .wp-block-columns{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}
.affianco .wp-block-column{align-self:center}
.affianco .foto{aspect-ratio:4/3;border-radius:20px}
.affianco p{margin:20px 0 0}
/* 2 · Cifre: in ogni voce la cifra è il grassetto, la didascalia il resto */
.cifre{padding:88px var(--bordo, 32px);background:var(--blu);color:#fff}
.cifre ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.cifre li{padding:4px 32px;border-left:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.82)}
.cifre li:first-child{padding-left:0;border-left:0}
.cifre strong{display:block;margin-bottom:12px;color:#fff;font-size:76px;font-weight:500;line-height:1}
/* 3 · Linea del tempo: in ogni voce l'anno è il grassetto, la riga il resto */
.storia ol{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin:56px 0 0;padding:0;list-style:none}
.storia ol::before{content:'';position:absolute;left:0;right:0;top:9px;border-top:1px solid var(--tenue)}
.storia li{position:relative;padding-top:44px;color:var(--grigio)}
.storia li::before{content:'';position:absolute;left:4px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--blu);box-shadow:0 0 0 5px #fff,0 0 0 6px rgba(30,61,143,.3)}
.storia strong{display:block;margin-bottom:12px;color:var(--blu);font-size:44px;font-weight:500;line-height:1}
/* 4 · Riquadri: ogni colonna è una scheda; il link del nome vale per tutta la scheda */
.riquadri{background:#f7f8fc}
.sezione .schede{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:48px}
.schede > .wp-block-column{position:relative;display:flex;flex-direction:column;gap:10px;min-height:220px;padding:28px;box-sizing:border-box;border:1px solid var(--tenue);border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(14,30,80,.04);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.schede > .wp-block-column:hover{border-color:rgba(30,61,143,.45);box-shadow:0 14px 30px rgba(14,30,80,.08);transform:translateY(-2px)}
/* la freccia del modello */
.schede > .wp-block-column::after{content:'';flex:none;width:22px;height:22px;margin-top:auto;background:var(--blu);
-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px 22px 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px 22px no-repeat}
.schede h3{margin:0;color:var(--blu);font-size:27px;font-weight:500;line-height:1.1}
.schede h3 a{color:inherit;text-decoration:none}
.schede h3 a::before{content:'';position:absolute;inset:0;border-radius:16px}
.schede h3 a:focus-visible{outline:0}
.schede h3 a:focus-visible::before{outline:3px solid var(--blu);outline-offset:3px}
.schede p{margin:0;color:var(--grigio)}
/* 5 · Persone */
.persone .wp-block-columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:56px;text-align:center}
.persone .tondo{max-width:240px;margin:0 auto 22px}
.persone .tondo::before{border:1px solid rgba(30,61,143,.25)}
.persone h3{margin:0;color:var(--blu);font-size:26px;font-weight:500;line-height:1.15}
.persone p{margin:6px 0 0;color:var(--grigio)}

/* ---------- Telefono ---------- */
@media (max-width:720px){
:is(.testo,.is-root-container) > h2{font-size:28px}
:is(.testo,.is-root-container) > h3{font-size:23px}
:is(.testo,.is-root-container) > blockquote{font-size:22px}
:is(.testo,.is-root-container) table{font-size:16px}
/* Sul telefono le colonne restano leggibili: se la tabella non entra, scorre nel suo riquadro e la pagina resta ferma. */
:is(.testo,.is-root-container) .wp-block-table td{min-width:8em}
.sezione{padding:72px var(--bordo, 20px)}
.sezione h2{font-size:36px}
.affianco .wp-block-columns{grid-template-columns:minmax(0,1fr);gap:32px}
.cifre{padding:64px var(--bordo, 20px)}
.cifre ul{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
.cifre li{padding:0 0 0 20px;font-size:17px}
.cifre li:nth-child(odd){padding-left:0;border-left:0}
.cifre strong{font-size:54px}
.storia ol{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:40px;padding-left:40px}
.storia ol::before{left:9px;right:auto;top:0;bottom:0;border-top:0;border-left:2px solid var(--tenue)}
.storia li{padding-top:0}
.storia li::before{left:-36px;top:10px}
.storia strong{font-size:36px}
.sezione .schede{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:36px}
.schede > .wp-block-column{min-height:0;padding:22px}
.schede > .wp-block-column::after{margin-top:4px}
/* Persone: due per riga, l'ultima da sola al centro (come flex-wrap con justify-content:center nel modello). */
.persone .wp-block-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px;margin-top:40px}
.persone .wp-block-column:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - 10px)}
.persone .tondo{max-width:150px;margin-bottom:14px}
.persone h3{font-size:21px}
.persone p{font-size:16px}
}

/* ---------- Animazioni spente sul dispositivo ---------- */
@media (prefers-reduced-motion:reduce){
.schede > .wp-block-column{transition:none}
}