/*
Theme Name: ICM Blocks
Theme URI: https://www.istitutodiculturameridionale.it
Author: Goodea
Description: Tema a blocchi (Full Site Editing) per l'Istituto di Cultura Meridionale. Palette navy/oro/crema, Oswald + Work Sans auto-ospitati, sezioni gestibili tramite block pattern.
Version: 1.9.3
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: icm-blocks
Tags: full-site-editing, block-patterns, institutional, one-column, custom-colors
*/

/* =========================================================
   Istituto di Cultura Meridionale — tema a blocchi
   Palette: navy #264A6B + oro #B8963E + crema #F6F1E7
   Font: Oswald (titoli) + Work Sans (testo), auto-ospitati
   via theme.json — nessuna chiamata a Google Fonts (GDPR).
   Il grosso di questo foglio proviene dal template statico
   ICM-template-7-politica-brera-v2, portato invariato.
   ========================================================= */

:root{
  /* Navy Brera (era navy Politica) */
  --navy:#264A6B; --navy-2:#335A7E; --navy-dark:#1E3D5A; --navy-soft:#DCE4EC;
  /* La ex-famiglia "wine" ora mappa su navy Brera: i pieni pieni/CTA
     diventano navy (testo bianco → contrasto pieno), niente bordeaux */
  --wine:#264A6B; --wine-2:#335A7E; --wine-dark:#1E3D5A; --wine-soft:#EFE7D6;
  /* Oro Brera */
  --gold:#B8963E; --gold-2:#C9A961; --gold-soft:#E4D2A6;
  /* Fondo crema Brera + linee calde */
  --paper:#F6F1E7; --paper-2:#EFE7D6; --line:#E0D6C2;
  --ink:#264A6B; --text:#2A3944; --text-soft:#5A6976;
  --white:#FFFFFF;
  --display:'Oswald',Impact,sans-serif;
  --sans:'Work Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --maxw:1240px; --r:6px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.po-container{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* ---------- Tipografia ---------- */
h1,h2{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:.005em;text-transform:uppercase}
h3,h4{font-family:var(--display);font-weight:600;line-height:1.1}
.po-eyebrow{font-family:var(--sans);font-weight:800;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--wine);display:inline-flex;align-items:center;gap:10px}
.po-eyebrow::before{content:"";width:26px;height:3px;background:var(--wine);display:inline-block}
.po-eyebrow.light{color:var(--gold-2)}.po-eyebrow.light::before{background:var(--gold-2)}
.po-eyebrow.center{justify-content:center}

/* ---------- Buttons ---------- */
.po-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:15px 30px;border-radius:var(--r);border:2px solid transparent;cursor:pointer;transition:transform .18s,background .22s,color .22s,border-color .22s,box-shadow .22s}
.po-btn-red{background:var(--gold);color:var(--navy-dark)}
.po-btn-red:hover{background:var(--gold-2);transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(184,150,62,.55)}
.po-btn-navy{background:var(--navy);color:#fff}
.po-btn-navy:hover{background:var(--navy-2);transform:translateY(-2px)}
.po-btn-gold,.po-btn-dark{background:var(--gold);color:var(--navy-dark)}
.po-btn-gold:hover,.po-btn-dark:hover{background:var(--gold-2);transform:translateY(-2px)}
.po-btn-out{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.po-btn-out:hover{background:rgba(255,255,255,.12);border-color:#fff}
.po-btn-outdark{background:transparent;color:var(--wine);border-color:var(--wine)}
.po-btn-outdark:hover{background:var(--wine);color:#fff}

/* ---------- Top bar ---------- */
.po-topbar{background:var(--navy-dark);color:#C7D2DD;font-size:12.5px;font-weight:500;letter-spacing:.03em}
.po-topbar .po-container{display:flex;justify-content:space-between;align-items:center;height:40px}
.po-topbar a{color:#C7D2DD}.po-topbar a:hover{color:#fff}
.po-topbar .right{display:flex;gap:20px}

/* ---------- Header ---------- */
.po-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:3px solid var(--wine);transition:box-shadow .3s}
.po-header.scrolled{box-shadow:0 10px 30px -20px rgba(11,34,57,.5)}
.po-nav{display:flex;align-items:center;justify-content:space-between;height:82px;gap:20px}
.po-brand{display:flex;align-items:center}
.po-brand img{height:52px;width:auto}
.po-menu{display:flex;align-items:center;gap:26px;list-style:none}
.po-menu a{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);padding:6px 0;border-bottom:3px solid transparent;transition:color .2s,border-color .2s}
.po-menu a:hover,.po-menu a.active{color:var(--wine);border-color:var(--wine)}
.po-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:10px;z-index:70}
.po-burger span{width:26px;height:3px;background:var(--navy);display:block;border-radius:2px;transition:transform .3s,opacity .3s}
.po-header.open .po-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.po-header.open .po-burger span:nth-child(2){opacity:0}
.po-header.open .po-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- HERO ---------- */
.po-hero{position:relative;background:linear-gradient(105deg,#1E3D5A 0%,#264A6B 42%,#335A7E 100%);color:#fff;overflow:hidden}
.po-hero::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(70% 90% at 80% 10%,rgba(184,150,62,.20),transparent 60%),radial-gradient(60% 80% at 0% 100%,rgba(184,150,62,.12),transparent 60%)}
/* SLIDER SFONDO HERO (v2) */
.po-hero-slider{position:absolute;inset:0;z-index:0}
.po-hero-slider .po-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:po-heroFade 28s infinite}
.po-hero-slider .po-slide:nth-child(1){animation-delay:0s}
.po-hero-slider .po-slide:nth-child(2){animation-delay:7s}
.po-hero-slider .po-slide:nth-child(3){animation-delay:14s}
.po-hero-slider .po-slide:nth-child(4){animation-delay:21s}
.po-hero-slider::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(30,61,90,.90) 0%,rgba(38,74,107,.74) 45%,rgba(38,74,107,.36) 100%)}
@keyframes po-heroFade{0%{opacity:0}3%{opacity:1}22%{opacity:1}28%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.po-hero-slider .po-slide{animation:none}.po-hero-slider .po-slide:nth-child(1){opacity:1}}
.po-hero .po-container{position:relative;z-index:2;padding:104px 32px 116px}
.po-hero .po-hero-text{max-width:660px}
.po-hero h1{font-size:clamp(42px,5.6vw,82px);color:#fff;margin:18px 0 22px}
.po-hero h1 .accent{color:var(--gold-2)}
.po-hero p.lead{font-size:18px;color:#DCE4EC;max-width:560px;line-height:1.65;margin-bottom:32px}
.po-hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.po-hero-media{position:relative}
.po-hero-media img{border-radius:var(--r);width:100%;height:520px;object-fit:cover;position:relative;z-index:2}
.po-hero-media .badge{position:absolute;z-index:3;left:-16px;bottom:30px;background:var(--gold);color:var(--navy-dark);font-family:var(--display);font-weight:700;text-transform:uppercase;padding:14px 20px;border-radius:var(--r);font-size:15px;box-shadow:0 18px 34px -16px rgba(11,34,57,.5)}
/* form volontari/iscrizione sopra l'hero */
.po-heroform{position:relative;z-index:3;margin:-44px auto 0;max-width:var(--maxw)}
.po-heroform .box{background:var(--wine);color:#fff;border-radius:var(--r);padding:30px 34px;display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:16px;align-items:end;margin:0 32px;box-shadow:0 30px 60px -34px rgba(11,34,57,.7)}
.po-heroform .intro h3{font-family:var(--display);font-size:24px;text-transform:uppercase;color:#fff}
.po-heroform .intro p{font-size:13.5px;color:var(--navy)}
.po-heroform label{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:6px}
.po-heroform input{width:100%;padding:13px 14px;border:none;border-radius:var(--r);font-family:var(--sans);font-size:14px;background:#fff;color:var(--text)}

/* ---------- Sezioni ---------- */
.po-section{padding:96px 0}
.po-section.tight{padding:66px 0}
.po-section.gray,.po-section.cream{background:var(--paper-2)}
.po-section.navy{background:var(--navy);color:#fff}
.po-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:48px}
.po-section-head h2{font-size:clamp(34px,4.6vw,56px);color:var(--navy);margin-top:12px}
.po-section.navy .po-section-head h2{color:#fff}
.po-section-head.center{flex-direction:column;align-items:center;text-align:center}
.po-link{font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--wine);display:inline-flex;gap:8px;transition:gap .2s}
.po-link:hover{gap:13px}

/* ---------- About (split) ---------- */
.po-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.po-split.reverse .po-split-media{order:-1}
.po-split h2{font-size:clamp(32px,4vw,52px);color:var(--navy);margin:12px 0 20px}
.po-split p{font-size:16px;line-height:1.8;margin-bottom:16px;color:var(--text);max-width:560px}
.po-figure{position:relative}
.po-figure img{border-radius:var(--r);width:100%;height:520px;object-fit:cover;position:relative;z-index:2}
.po-figure .cap{position:absolute;z-index:3;bottom:16px;left:16px;right:16px;background:rgba(11,34,57,.86);color:#fff;padding:12px 18px;font-size:12.5px;letter-spacing:.04em;border-radius:var(--r)}
.po-figure .cap b{color:var(--gold-2)}
.po-figure.placeholder{display:flex;align-items:center;justify-content:center;height:520px;border-radius:var(--r);background:var(--navy);color:rgba(228,210,166,.6);font-family:var(--display);text-transform:uppercase}

/* ---------- Split con ritratto verticale (Chi siamo) ----------
   I ritratti sono foto in verticale: la cornice standard, alta 520px
   e in object-fit:cover, taglierebbe testa o piedi. Qui la colonna
   immagine si restringe e la cornice segue il formato 3:4, così il
   ritratto resta intero e il testo — più lungo — respira a fianco. */
/* Centrato, non allineato in alto: il profilo del Presidente è molto
   più lungo del ritratto, e con align-items:start restava mezzo metro
   di vuoto sotto la foto. Centrando, lo stacco si divide sopra e sotto
   e legge come una scelta. */
.po-split.portrait{grid-template-columns:.85fr 1.15fr;align-items:center}
/* Selettore allineato a quello del ponte Gutenberg più sotto
   (figure.po-figure img): senza il tipo "figure" questa regola
   vincerebbe per un solo punto di specificità, e basterebbe un
   ritocco laggiù per far collassare il ritratto a 520px ritagliati. */
figure.po-figure.portrait img{height:auto;aspect-ratio:3/4;max-height:700px}
/* Variante per le fotografie di gruppo: il riquadro fisso di 520px è
   quasi quadrato e su uno scatto 3:2 ritaglia il 14% per lato, cioè
   proprio le persone ai bordi. Qui la figura tiene le sue proporzioni
   e non taglia nessuno. */
figure.po-figure.wide img{height:auto;aspect-ratio:3/2}

/* ---------- Pannello al posto di un ritratto mancante ----------
   Finché non arriva la fotografia, la colonna media mostra un
   pannello navy con monogramma: stessa cornice oro dell'immagine,
   così la sezione resta compiuta invece di sembrare incompleta. */
.po-panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--navy);border-radius:var(--r);padding:56px 34px;min-height:520px}
/* z-index negativo, non positivo: nelle foto è l'immagine a coprire i
   due lati interni della cornice, ma un pannello colora il proprio
   sfondo, che si dipinge sotto ai figli. Con z-index:1 le linee oro
   attraversavano il pannello come un doppio bordo fuori registro. */
.po-panel::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:3px solid var(--gold);border-radius:var(--r);z-index:-1}
.po-panel .mono{width:118px;height:118px;border-radius:50%;border:2px solid var(--gold-2);color:var(--gold-2);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:42px;font-weight:700;letter-spacing:.04em;margin-bottom:26px}
.po-panel .name{font-family:var(--display);font-size:26px;font-weight:700;line-height:1.15;text-transform:uppercase;color:#fff}
.po-panel .role{margin-top:10px;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.po-panel .note{margin-top:22px;font-size:13.5px;line-height:1.65;color:#9FB0BE;max-width:290px}
.po-split.portrait .po-panel{min-height:640px}

/* Due split consecutivi nella stessa sezione (le due sedi). */
.po-split h3{font-size:clamp(26px,3vw,38px);color:var(--navy);margin:12px 0 20px;text-transform:uppercase}
.po-split + .po-split{margin-top:88px}
/* Il margine va riaffermato qui: il reset del ponte Gutenberg
   (.is-layout-flow > *) azzera i margini di tutti i figli diretti. */
.po-section-head.center p:not(.po-eyebrow){max-width:760px;margin:18px auto 0}

/* Chiusa di sezione: una riga in carattere display, centrata. */
.po-closing{max-width:820px;margin:72px auto 0;padding-top:46px;border-top:1px solid var(--line);text-align:center}
.po-closing p{font-family:var(--display);font-weight:500;font-size:clamp(19px,2.1vw,26px);line-height:1.45;color:var(--navy);text-transform:none;margin:0}

/* ---------- Partecipa (3 card, ex-donation) ---------- */
.po-support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.po-scard{background:#fff;border:1px solid var(--line);border-top:4px solid var(--wine);border-radius:var(--r);padding:36px 30px;text-align:center;transition:transform .3s,box-shadow .3s}
.po-scard:hover{transform:translateY(-6px);box-shadow:0 28px 50px -30px rgba(11,34,57,.4)}
.po-scard .ic{width:64px;height:64px;border-radius:50%;background:var(--wine-soft);color:var(--wine);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-family:var(--display);font-size:26px;font-weight:700}
.po-scard h3{font-size:22px;color:var(--navy);margin-bottom:10px;text-transform:uppercase}
.po-scard p{font-size:14.5px;color:var(--text-soft);line-height:1.6;margin-bottom:18px}

/* ---------- Work / video ---------- */
.po-work .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.po-video{position:relative;border-radius:var(--r);overflow:hidden}
.po-video img{width:100%;height:440px;object-fit:cover}
.po-video .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.po-video .play span{width:84px;height:84px;border-radius:50%;background:var(--wine);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;padding-left:5px;box-shadow:0 18px 40px -14px rgba(11,34,57,.8);transition:transform .25s}
.po-video:hover .play span{transform:scale(1.08)}
.po-work h2{font-size:clamp(30px,3.8vw,48px);color:var(--navy);margin:12px 0 18px}
.po-work p{font-size:16px;line-height:1.8;color:var(--text);max-width:520px}

/* ---------- Valori (promesse, sezione navy) ---------- */
.po-values{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.po-values::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 70% at 100% 0%,rgba(184,150,62,.14),transparent 60%)}
.po-values .po-container{position:relative;z-index:2}
.po-values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);overflow:hidden}
.po-vitem{background:var(--navy);padding:34px 30px;transition:background .25s}
.po-vitem:hover{background:var(--navy-2)}
.po-vitem .ic{width:54px;height:54px;border-radius:var(--r);background:var(--wine);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:22px;margin-bottom:18px}
.po-vitem h3{font-size:21px;color:#fff;margin-bottom:10px;text-transform:uppercase}
.po-vitem p{font-size:14px;color:#9FB0BE;line-height:1.6}

/* ---------- Counters ---------- */
.po-counters .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.po-counters h2{font-size:clamp(30px,3.8vw,48px);color:var(--navy);margin:12px 0 18px}
.po-counters p{font-size:16px;line-height:1.75;color:var(--text);max-width:520px;margin-bottom:28px}
.po-countrow{display:flex;gap:36px;flex-wrap:wrap}
.po-count .n{font-family:var(--display);font-size:clamp(44px,5vw,64px);font-weight:700;color:var(--wine);line-height:1}
.po-count .t{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);margin-top:6px}

/* ---------- Quote / testimonial ---------- */
.po-quote{background:var(--paper-2);text-align:center;padding:96px 0}
.po-quote .q{font-family:var(--display);font-size:88px;line-height:.6;color:var(--wine);font-weight:700}
.po-quote blockquote{font-family:var(--display);font-weight:500;font-size:clamp(24px,3.2vw,40px);line-height:1.3;max-width:980px;margin:18px auto 0;color:var(--navy);text-transform:none}
.po-quote cite{display:block;margin-top:24px;font-family:var(--sans);font-style:normal;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}

/* ---------- Sostenitori / persone ---------- */
.po-people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.po-person{background:var(--navy);color:#fff;border-radius:var(--r);overflow:hidden;text-align:center;padding:40px 28px;position:relative;transition:transform .3s,box-shadow .3s}
.po-person:hover{transform:translateY(-6px);box-shadow:0 28px 50px -28px rgba(11,34,57,.5)}
.po-person::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:var(--wine)}
.po-person .mono{width:84px;height:84px;border-radius:50%;background:var(--wine);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:30px;font-weight:700;margin:0 auto 20px}
.po-person h3{font-size:22px;color:#fff;margin-bottom:4px;text-transform:uppercase}
.po-person .role{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2)}
.po-person p{font-size:14px;color:#9FB0BE;line-height:1.6;margin-top:12px}

/* ---------- News cards ---------- */
.po-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.po-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.po-card:hover{transform:translateY(-7px);box-shadow:0 28px 54px -28px rgba(11,34,57,.4)}
.po-card-media{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--navy)}
.po-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.po-card:hover .po-card-media img{transform:scale(1.06)}
.po-card-media.mono{display:flex;align-items:center;justify-content:center;background:var(--navy)}
.po-card-media.mono .mark{font-family:var(--display);font-size:54px;color:rgba(228,210,166,.5);font-weight:700}
.po-tag{position:absolute;top:0;left:0;background:var(--wine);color:#fff;font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;z-index:2}
.po-card-body{padding:24px 26px 30px;display:flex;flex-direction:column;flex:1}
.po-card .date{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--gold);text-transform:uppercase}
.po-card h3{font-size:20px;color:var(--navy);margin:10px 0 12px;line-height:1.15}
.po-card p{font-size:14.5px;color:var(--text-soft);line-height:1.6;flex:1}
.po-card .read{margin-top:18px;font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--wine);display:inline-flex;gap:7px;transition:gap .2s}
.po-card:hover .read{gap:12px}
.po-pagination{display:flex;justify-content:center;margin-top:54px}

/* ---------- Newsletter band ---------- */
.po-newsletter{background:var(--wine);color:#fff;text-align:center}
.po-newsletter .po-container{padding:80px 32px}
.po-newsletter h2{font-size:clamp(30px,4vw,52px);color:#fff;max-width:760px;margin:12px auto 14px}
.po-newsletter p{color:#C7D2DD;font-size:16px;max-width:540px;margin:0 auto 26px}
.po-nl-form{display:flex;gap:12px;max-width:520px;margin:0 auto;flex-wrap:wrap}
.po-nl-form input{flex:1;min-width:200px;padding:15px 18px;border:none;border-radius:var(--r);font-family:var(--sans);font-size:15px}

/* ---------- Page hero (interne) ---------- */
.po-pagehero{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:116px 0 66px}
.po-pagehero-bar{position:absolute;top:0;left:0;width:100%;height:5px;background:var(--wine);z-index:4}
.po-pagehero.has-img .po-ph-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.24}
.po-pagehero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,34,57,.5),rgba(11,34,57,.92))}
.po-pagehero .po-ph-frame{display:none}
.po-pagehero .po-container{position:relative;z-index:3}
.po-breadcrumb{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9FB0BE;margin-bottom:16px}
.po-breadcrumb a:hover{color:#fff}.po-breadcrumb span{color:var(--gold-2)}
.po-pagehero h1{font-size:clamp(40px,5.2vw,74px);color:#fff;max-width:980px}
.po-pagehero p.sub{font-family:var(--sans);font-size:18px;font-weight:500;color:#C7D2DD;max-width:640px;margin-top:16px;text-transform:none;line-height:1.55}

/* ---------- Prose ---------- */
.po-prose{max-width:780px}
.po-prose p{font-size:17.5px;line-height:1.85;margin-bottom:20px;color:var(--text)}
.po-prose p:first-of-type::first-letter{font-family:var(--display);font-size:56px;line-height:.8;float:left;padding:6px 14px 0 0;color:var(--wine);font-weight:700}

/* ---------- Campaign / citazione ---------- */
.po-campaign{background:var(--paper-2);color:var(--navy);text-align:center;padding:96px 0}
.po-campaign blockquote{font-family:var(--display);font-weight:500;font-size:clamp(26px,4vw,48px);line-height:1.25;max-width:1000px;margin:0 auto;text-transform:uppercase}
.po-campaign blockquote em{font-style:normal;color:var(--wine)}
.po-campaign cite{display:block;margin-top:22px;font-family:var(--sans);font-style:normal;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.po-campaign.dark{background:var(--navy);color:#fff}
.po-campaign.dark blockquote em{color:var(--gold-2)}.po-campaign.dark cite{color:var(--gold-2)}

/* ---------- Numbered list ---------- */
.po-numlist{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.po-numlist .it{background:#fff;border:1px solid var(--line);border-left:4px solid var(--wine);border-radius:var(--r);padding:28px 28px;display:flex;gap:18px;align-items:flex-start}
.po-numlist .it .n{font-family:var(--display);font-size:36px;font-weight:700;color:var(--wine);line-height:.85;flex-shrink:0}
.po-numlist .it p{font-size:15.5px;line-height:1.55;color:var(--text)}

/* ---------- Feature cards ---------- */
.po-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.po-fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:36px 34px;position:relative;transition:transform .3s,box-shadow .3s}
.po-fcard:hover{transform:translateY(-6px);box-shadow:0 28px 54px -30px rgba(11,34,57,.4)}
.po-fcard .badge{display:inline-block;background:var(--navy-soft);color:var(--navy);font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:var(--r);margin-bottom:15px}
.po-fcard .num{position:absolute;top:26px;right:30px;font-family:var(--display);font-size:44px;color:var(--paper-2);font-weight:700}
.po-fcard h3{font-size:23px;color:var(--navy);margin-bottom:13px;text-transform:uppercase}
.po-fcard p{font-size:15px;line-height:1.7;color:var(--text-soft)}

/* ---------- Statline ---------- */
.po-statline{display:flex;align-items:center;gap:22px;padding:22px 28px;background:var(--navy);color:#fff;border-radius:var(--r);margin-bottom:44px;width:fit-content}
.po-statline .n{font-family:var(--display);font-size:62px;font-weight:700;color:var(--gold-2);line-height:.8}
.po-statline .t{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Contact ---------- */
.po-contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-bottom:54px}
.po-contact-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--wine);border-radius:var(--r);padding:36px 34px}
.po-contact-card h3{font-size:26px;color:var(--navy);margin-bottom:20px;text-transform:uppercase}
.po-contact-card .row{margin-bottom:16px;font-size:15px;line-height:1.5}
.po-contact-card .row b,.po-contact-card .row strong{display:block;font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--wine);margin-bottom:3px}
.po-contact-card .row a:hover{color:var(--wine)}

/* ---------- Form ---------- */
.po-form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:46px 44px;max-width:820px;margin:0 auto;box-shadow:0 30px 60px -42px rgba(11,34,57,.4)}
.po-form h2{font-size:30px;color:var(--navy);margin:10px 0 6px}
.po-form .desc{color:var(--text-soft);margin-bottom:26px}
.po-form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.po-field{margin-bottom:20px}
.po-field label{display:block;font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text-soft);margin-bottom:8px}
.po-field input,.po-field textarea{width:100%;font-family:var(--sans);font-size:15px;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);color:var(--text);transition:border-color .2s,box-shadow .2s}
.po-field input:focus,.po-field textarea:focus{outline:none;border-color:var(--wine);box-shadow:0 0 0 3px rgba(11,34,57,.13)}
.po-field textarea{min-height:140px;resize:vertical}

/* ---------- CTA (interne) ---------- */
.po-cta{padding:26px 0 92px}
.po-cta .box{position:relative;background:var(--navy);color:#fff;text-align:center;border-radius:var(--r);overflow:hidden;padding:80px 32px}
.po-cta .box::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 130% at 50% 0%,rgba(184,150,62,.24),transparent 66%)}
.po-cta .inner{position:relative;z-index:2}
.po-cta h2{font-size:clamp(32px,4.4vw,54px);color:#fff;max-width:780px;margin:12px auto 16px}
.po-cta p{font-family:var(--sans);font-size:17px;color:#C7D2DD;max-width:560px;margin:0 auto 10px;text-transform:none}
.po-cta .mailrow{font-weight:700;font-size:16px;color:var(--gold-2);margin:4px auto}
.po-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ---------- Footer ---------- */
.po-footer{background:var(--paper-2);color:var(--text-soft);padding:72px 0 32px;font-size:14.5px;border-top:3px solid var(--gold)}
.po-footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:44px;padding-bottom:42px;border-bottom:1px solid var(--line)}
.po-footer .fbrand{font-family:var(--display);font-size:22px;text-transform:uppercase;color:var(--ink);margin-bottom:16px;line-height:1.1;font-weight:700}
.po-footer .fbrand img{height:50px;margin-bottom:18px;filter:none;opacity:1}
.po-footer .cols p{line-height:1.7}
.po-footer h4{font-family:var(--display);font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:18px}
.po-footer ul{list-style:none}.po-footer ul li{margin-bottom:10px}
.po-footer ul a:hover{color:var(--gold)}
.po-footer .contact span{display:block;margin-bottom:11px;line-height:1.5}.po-footer .contact b{color:var(--ink)}
.po-footer .copy{padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--text-soft)}

/* ---------- Reveal / animazioni ---------- */
.reveal{opacity:0;transform:translateY(24px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.08s}.d2{animation-delay:.2s}.d3{animation-delay:.34s}.d4{animation-delay:.48s}
.po-reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.po-reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal,.po-reveal{animation:none;opacity:1!important;transform:none!important;transition:none}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1024px){.po-container{padding:0 24px}.po-split,.po-work .wrap,.po-counters .wrap{gap:40px}}
@media(max-width:920px){
  .po-burger{display:inline-flex}
  .po-menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 20px 30px -18px rgba(11,34,57,.4);padding:6px 0;max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .35s ease,opacity .25s,visibility .25s}
  .po-header.open .po-menu{max-height:80vh;opacity:1;visibility:visible}
  .po-menu li{width:100%}
  .po-menu a{display:block;padding:15px 24px;font-size:15px;border-bottom:1px solid var(--line)}
  .po-topbar .right .hide{display:none}
  .po-hero .po-container{grid-template-columns:1fr;gap:36px;padding:64px 24px 76px}
  .po-hero-media{order:-1}.po-hero-media img{height:380px}
  .po-heroform .box{grid-template-columns:1fr;gap:14px}
  .po-split,.po-work .wrap,.po-counters .wrap,.po-numlist,.po-feature-grid,.po-contact-grid,.po-form .grid2{grid-template-columns:1fr;gap:32px}
  .po-split.reverse .po-split-media{order:0}
  .po-support-grid,.po-values-grid,.po-people-grid,.po-footer .cols{grid-template-columns:1fr 1fr}
  .po-figure img,.po-figure.placeholder,.po-video img{height:360px}
  /* Il ritratto verticale ha specificità maggiore della regola qui
     sopra: va riportato a colonna singola esplicitamente. */
  .po-split.portrait{grid-template-columns:1fr;align-items:stretch}
  /* Si restringe la cornice, non l'immagine: così la didascalia in
     sovrimpressione resta allineata ai bordi della foto. */
  .po-figure.portrait{max-width:420px;margin-inline:auto}
  figure.po-figure.portrait img{height:auto;aspect-ratio:3/4;max-height:none}
  .po-panel,.po-split.portrait .po-panel{min-height:420px}
  /* Il ritratto torna sopra al testo: in colonna singola il profilo del
     Presidente è lungo oltre mille pixel e la foto sarebbe arrivata solo
     alla fine. Nel markup resta dopo, quindi l'ordine di lettura non
     cambia — si sposta solo la resa. */
  .po-split.portrait .po-split-media{order:-1}
  /* La didascalia esce dalla foto invece di coprirla: sul ritratto
     verticale, ridotto a 420px, il suo riquadro finiva sopra il logo
     dell'Istituto sul leggio. */
  figure.po-figure.portrait figcaption{position:static;margin-top:10px;border-radius:var(--r)}
}
@media(max-width:680px){
  .po-container{padding:0 20px}
  .po-section{padding:60px 0}
  .po-section-head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:34px}
  .po-news-grid,.po-support-grid,.po-values-grid,.po-people-grid,.po-footer .cols{grid-template-columns:1fr}
  .po-brand img{height:44px}
  .po-countrow{gap:24px}
  .po-cta .box,.po-newsletter .po-container{padding:52px 22px}
  .po-form{padding:30px 22px}
  .po-statline{width:auto}
  .po-topbar{display:none}
}

/* =========================================================
   PALETTE BRERA — override accenti ORO + fix contrasti
   I "pieni" (bottoni, tag, sezioni scure) restano navy; i filetti,
   gli occhielli e i dettagli tornano oro (firma editoriale Brera).
   ========================================================= */
/* Occhielli e filetti sottili → oro */
.po-eyebrow{color:var(--gold)}
.po-eyebrow::before{background:var(--gold)}
.po-header{border-bottom-color:var(--gold)}
.po-menu a:hover,.po-menu a.active{color:var(--gold);border-color:var(--gold)}
.po-link{color:var(--gold)}
.po-scard{border-top-color:var(--gold)}
.po-scard .ic{background:var(--gold-soft);color:var(--ink)}
.po-numlist .it{border-left-color:var(--gold)}
.po-contact-card{border-top-color:var(--gold)}
.po-person::after{background:var(--gold)}
.po-pagehero-bar{background:var(--gold)}

/* Icone dei Valori: sezione navy → cerchi oro (niente navy-su-navy) */
.po-vitem .ic{background:var(--gold);color:var(--ink)}
/* Play video → cerchio oro su immagine */
.po-video .play span{background:var(--gold);color:var(--ink)}

/* Form iscrizione sopra l'hero navy: banda oro con testo scuro */
.po-heroform .box{background:var(--gold);color:var(--ink)}
.po-heroform .intro h3{color:var(--navy-dark)}
.po-heroform .intro p,.po-heroform label{color:var(--navy)}

/* Newsletter (sezione navy): testo chiaro neutro invece del rosa */
.po-newsletter p{color:#C7D2DD}

/* =========================================================
   PONTE GUTENBERG ↔ CLASSI po-*
   Il markup dei blocchi core viene ricondotto alle classi del
   template statico, così il CSS sopra resta valido invariato.
   ========================================================= */

/* --- Reset del contenitore radice FSE --- */
.wp-site-blocks{overflow-x:hidden}
.wp-site-blocks > *{margin-block-start:0;margin-block-end:0}
.is-layout-flow > *,.is-layout-constrained > *{margin-block-start:0;margin-block-end:0}
.entry-content > *+*{margin-block-start:20px}

/* Le sezioni sono alignfull: annulliamo i vincoli di larghezza WP,
   la larghezza la governa .po-container come nel template statico. */
.is-layout-constrained > .alignfull{margin-left:0;margin-right:0;max-width:none}
.po-container.is-layout-constrained > *{max-width:none}
.po-container.is-layout-flow > *,.po-container.is-layout-constrained > *{margin-block:0}

/* Il reset qui sopra azzera anche i margini che danno il ritmo alle
   sezioni con più blocchi in colonna (le due sedi, la chiusa): senza
   questo recupero il testo di Palazzo Arlotta finisce sotto al pannello
   di Palazzo Caetani. Serve una specificità maggiore, non un ordine
   diverso: il reset è a due classi e vincerebbe comunque. */
.po-container.is-layout-flow > .po-section-head,
.po-container.is-layout-constrained > .po-section-head{margin-block-end:48px}
.po-container.is-layout-flow > .po-split + .po-split,
.po-container.is-layout-constrained > .po-split + .po-split{margin-block-start:88px}
.po-container.is-layout-flow > .po-closing,
.po-container.is-layout-constrained > .po-closing{margin-block-start:72px}
/* Stessa cosa per gli altri blocchi a una sola classe con un margine "di ritmo":
   il reset a (0,1,0) li batte perché viene dopo. Riaffermati con specificità maggiore. */
.is-layout-flow > .po-statline,.is-layout-constrained > .po-statline{margin-block-end:44px}
.po-container.is-layout-flow > .po-contact-grid,.po-container.is-layout-constrained > .po-contact-grid{margin-block-end:54px}
.is-layout-flow > .po-cta-actions,.is-layout-constrained > .po-cta-actions{margin-block-start:26px}
.po-container.is-layout-flow > .wp-block-query-pagination,.po-container.is-layout-constrained > .wp-block-query-pagination{margin-block-start:54px}
/* Newsletter: titolo e testo stanno direttamente nel .po-container, il cui reset a (0,2,0) batte .po-newsletter h2/p */
.po-newsletter .po-container.is-layout-flow > h2,.po-newsletter .po-container.is-layout-constrained > h2{margin-block:12px 14px}
.po-newsletter .po-container.is-layout-flow > p:not(.po-eyebrow),.po-newsletter .po-container.is-layout-constrained > p:not(.po-eyebrow){margin-block-end:26px}
.po-heroform .intro.is-layout-flow > h3{margin-block-end:6px}
/* La banda oro deve sovrapporsi all'hero di 44px come nel template statico */
.entry-content.is-layout-flow > .po-heroform,.entry-content.is-layout-constrained > .po-heroform{margin-block-start:-44px}

/* --- Bottoni core/button --- */
.wp-block-button.po-btn-red > .wp-block-button__link,
.wp-block-button.po-btn-gold > .wp-block-button__link{background:var(--gold);color:var(--navy-dark)}
.wp-block-button.po-btn-red > .wp-block-button__link:hover,
.wp-block-button.po-btn-gold > .wp-block-button__link:hover{background:var(--gold-2);transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(184,150,62,.55)}
.wp-block-button.po-btn-navy > .wp-block-button__link{background:var(--navy);color:#fff}
.wp-block-button.po-btn-navy > .wp-block-button__link:hover{background:var(--navy-2);transform:translateY(-2px)}
.wp-block-button.po-btn-out > .wp-block-button__link{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
.wp-block-button.po-btn-out > .wp-block-button__link:hover{background:rgba(255,255,255,.12);border-color:#fff}
.wp-block-button.po-btn-outdark > .wp-block-button__link{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.wp-block-button.po-btn-outdark > .wp-block-button__link:hover{background:var(--navy);color:#fff}
.wp-block-button > .wp-block-button__link{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:15px 30px;border-radius:var(--r);border:2px solid transparent;transition:transform .18s,background .22s,color .22s,border-color .22s,box-shadow .22s}
.wp-block-buttons{display:flex;gap:14px;flex-wrap:wrap}
.po-hero-actions.wp-block-buttons{margin-top:0}

/* --- Navigazione core/navigation → .po-menu --- */
.po-menu.wp-block-navigation .wp-block-navigation__container,
.po-menu.wp-block-navigation__container{display:flex;align-items:center;gap:26px;list-style:none}
.po-menu .wp-block-navigation-item__content{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);padding:6px 0;border-bottom:3px solid transparent;transition:color .2s,border-color .2s}
.po-menu .wp-block-navigation-item__content:hover,
.po-menu .current-menu-item .wp-block-navigation-item__content{color:var(--gold);border-color:var(--gold)}
/* Il menu mobile nativo di WP viene disattivato: usiamo il burger del tema */
.po-menu .wp-block-navigation__responsive-container-open,
.po-menu .wp-block-navigation__responsive-container-close{display:none!important}

/* --- Query Loop delle news → .po-news-grid / .po-card --- */
.po-news-grid.wp-block-post-template{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.po-news-grid > li.wp-block-post{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.po-news-grid > li.wp-block-post:hover{transform:translateY(-7px);box-shadow:0 28px 54px -28px rgba(11,34,57,.4)}
.po-news-grid .wp-block-post-featured-image{aspect-ratio:16/10;overflow:hidden;background:var(--navy);margin:0}
.po-news-grid .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.po-news-grid > li:hover .wp-block-post-featured-image img{transform:scale(1.06)}
.po-news-grid .po-card-body{padding:24px 26px 30px;display:flex;flex-direction:column;flex:1}
.po-news-grid .wp-block-post-date{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--gold);text-transform:uppercase}
.po-news-grid .wp-block-post-title{font-family:var(--display);font-size:20px;color:var(--navy);margin:10px 0 12px;line-height:1.15;text-transform:none}
.po-news-grid .wp-block-post-excerpt{font-size:14.5px;color:var(--text-soft);line-height:1.6;flex:1}
.po-news-grid .wp-block-post-excerpt__more-link{display:inline-block;margin-top:18px;font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold)}
.po-news-grid .wp-block-post-terms{position:absolute;top:0;left:0;background:var(--navy);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;z-index:2}

/* --- Paginazione core --- */
.wp-block-query-pagination{display:flex;justify-content:center;gap:10px;margin-top:54px;font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.wp-block-query-pagination a:hover{color:var(--gold)}
.wp-block-query-pagination .current{color:var(--gold)}

/* --- Contenuto singolo articolo --- */
.po-prose .wp-block-image{margin:28px 0}
.po-prose h2,.po-prose h3{color:var(--navy);margin:34px 0 14px}
.po-prose ul,.po-prose ol{margin:0 0 20px 22px}
.po-prose li{margin-bottom:8px;line-height:1.8}
.po-prose blockquote{border-left:4px solid var(--gold);padding-left:22px;margin:28px 0;font-size:19px;line-height:1.7;color:var(--navy)}

/* --- Contact Form 7 dentro i box del tema --- */
.po-heroform .wpcf7 form{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:end}
.po-heroform .wpcf7 input[type=email],.po-heroform .wpcf7 input[type=text]{width:100%;padding:13px 14px;border:none;border-radius:var(--r);font-family:var(--sans);font-size:14px;background:#fff;color:var(--text)}
.po-heroform .wpcf7 input[type=submit],.po-nl-form .wpcf7 input[type=submit]{background:var(--navy);color:#fff;border:none;border-radius:var(--r);font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:15px 30px;cursor:pointer;transition:background .22s}
.po-heroform .wpcf7 input[type=submit]:hover,.po-nl-form .wpcf7 input[type=submit]:hover{background:var(--navy-2)}
.po-nl-form .wpcf7 form{display:flex;gap:12px;max-width:520px;margin:0 auto;flex-wrap:wrap}
.po-nl-form .wpcf7 input[type=email]{flex:1;min-width:200px;padding:15px 18px;border:none;border-radius:var(--r);font-family:var(--sans);font-size:15px}
.wpcf7 .wpcf7-response-output{border-radius:var(--r);font-size:14px;margin:14px 0 0}
/* i campi CF7 stanno dentro <label> e <span class="wpcf7-form-control-wrap">: niente maiuscole ereditate, riga a sé */
.wpcf7 label .wpcf7-form-control-wrap{display:block;margin-top:8px}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 textarea{text-transform:none;letter-spacing:0;font-weight:400}
.wpcf7 input:focus,.wpcf7 textarea:focus{outline:none}
/* Safari: senza appearance:none ignora sfondo/padding di input[type=submit] e dei campi */
.wpcf7 input,.wpcf7 textarea{-webkit-appearance:none;appearance:none;box-sizing:border-box;margin:0}
.po-heroform .wpcf7 form p,.po-nl-form .wpcf7 form p{margin:0}
.po-heroform .wpcf7 .wpcf7-response-output{grid-column:1/-1}
.po-nl-form .wpcf7 form p{display:contents}
.po-nl-form .wpcf7 .wpcf7-response-output{flex-basis:100%}
.po-nl-form .wpcf7 input[type=email]{color:var(--text)}
.po-nl-form .wpcf7 .wpcf7-form-control-wrap{display:contents}
.po-nl-form .wpcf7 input[type=submit]{flex:0 0 auto;min-width:0;background:var(--gold);color:var(--navy-dark)}
.po-nl-form .wpcf7 input[type=submit]:hover{background:var(--gold-2)}
/* lo spinner di CF7 esce dal flusso: altrimenti sposta a sinistra email+bottone e il gruppo non è centrato */
/* .po-nl-form è a sua volta flex: il div .wpcf7 deve occupare tutta la riga, non la larghezza del suo contenuto */
.po-nl-form > .wpcf7{flex:1 1 100%;width:100%;min-width:0}
.po-nl-form > p:empty{display:none}
.po-nl-form .wpcf7 form{position:relative;justify-content:center}
.po-nl-form .wpcf7 .wpcf7-spinner{position:absolute;right:-36px;top:12px;margin:0}
/* modulo esteso della pagina Contatti (.po-form) */
.po-form .wpcf7 form p{margin:0}
.po-form .wpcf7 .po-field label{margin-bottom:0}
.po-form .wpcf7 input[type=submit]{margin-top:6px}
.po-form .wpcf7-not-valid-tip{font-family:var(--sans);font-size:12px;color:var(--wine);margin-top:6px}

/* --- Barra amministrazione --- */
.admin-bar .po-header{top:32px}
@media(max-width:782px){.admin-bar .po-header{top:46px}}

/* --- Responsive del ponte --- */
@media(max-width:920px){
  .po-menu.wp-block-navigation .wp-block-navigation__container{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 20px 30px -18px rgba(11,34,57,.4);padding:6px 0;max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .35s ease,opacity .25s,visibility .25s}
  .po-header.open .po-menu.wp-block-navigation .wp-block-navigation__container{max-height:80vh;opacity:1;visibility:visible}
  .po-menu .wp-block-navigation-item{width:100%}
  .po-menu .wp-block-navigation-item__content{display:block;padding:15px 24px;font-size:15px;border-bottom:1px solid var(--line)}
  .po-heroform .wpcf7 form{grid-template-columns:1fr}
}
@media(max-width:680px){
  .po-news-grid.wp-block-post-template{grid-template-columns:1fr}
}

/* --- Raccordi per il markup dei pattern --- */
.po-quote blockquote{border:none;padding:0}
.po-quote blockquote p{font-family:var(--display);font-weight:500;font-size:inherit;line-height:1.3;color:var(--navy);margin:0}
.po-quote blockquote cite{display:block;margin-top:24px;font-family:var(--sans);font-style:normal;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.po-link-wrap{margin:0}
.po-scard .po-link-wrap{margin-top:4px}
.po-brand.wp-block-site-logo{display:flex;align-items:center;margin:0}
.po-brand.wp-block-site-logo img{height:52px;width:auto;max-width:none}
.po-footer .fbrand .wp-block-site-logo img{height:50px;width:auto;margin-bottom:18px}
.po-section-head > .wp-block-group{max-width:none}
.po-heroform .box > .wp-block-group.intro{grid-column:1}
/* il numero in alto a destra delle card non deve sovrapporsi al titolo (succede sui titoli lunghi e su mobile) */
.po-fcard h3{padding-right:64px}
.po-heroform .box > p{grid-column:2/-1;margin:0}
/* Banda oro con CF7: testo introduttivo sopra, modulo centrato sotto (richiesta del 14 set 2026).
   Il paragrafo con lo shortcode viene spezzato dal <div class="wpcf7">: resta un <p> con solo spazi, da nascondere. */
.po-heroform .box{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px;padding:34px 34px 36px}
.po-heroform .box > .wp-block-group.intro{grid-column:1;max-width:640px}
.po-heroform .box > p{display:none}
.po-heroform .box > .wpcf7{grid-column:1;width:100%;max-width:760px;text-align:left}
.po-heroform .wpcf7 form{position:relative}
.po-heroform .wpcf7 .wpcf7-spinner{position:absolute;right:-36px;bottom:10px;margin:0}
/* il <p> del submit contiene anche spazi bianchi che aggiungono una riga sotto il tasto: flex li annulla */
.po-heroform .wpcf7 form p{display:flex;align-items:flex-end}
.po-heroform .wpcf7 form label{flex:1;margin-bottom:0}
.po-heroform .wpcf7 input[type=text],.po-heroform .wpcf7 input[type=email],.po-heroform .wpcf7 input[type=submit]{height:46px;padding-top:0;padding-bottom:0}
.po-newsletter .po-eyebrow.center{justify-content:center;display:flex}
.po-hero-text > *{max-width:none}
/* La barra decorativa del page hero non deve creare spazio nel flusso */
.po-pagehero > .po-pagehero-bar{position:absolute}
/* Nel riquadro della CTA l'occhiello è un paragrafo, non uno <span>:
   .po-cta p ne sovrascriverebbe corpo e maiuscoletto, si ripristinano qui. */
.po-cta .inner p.po-eyebrow{display:flex;font-size:12px;letter-spacing:.2em;text-transform:uppercase;max-width:none;margin:0 auto 4px}
/* "plain" toglie il capolettera: apre la pagina il primo blocco di testo,
   un secondo capolettera più in basso spezzerebbe la lettura. */
.po-prose.plain p:first-of-type::first-letter{float:none;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;padding:0}

/* =========================================================
   IMMAGINI MODIFICABILI DAL CLIENTE
   Le foto sono blocchi Immagine di Gutenberg (non HTML fisso),
   così hanno il pulsante "Sostituisci" nell'editor. Qui il CSS
   che le fa comportare come nel template statico.
   ========================================================= */

/* Slider hero: quattro blocchi Immagine sovrapposti in dissolvenza */
.po-hero-slider .po-slide{position:absolute;inset:0;opacity:0;margin:0;animation:po-heroFade 28s infinite}
.po-hero-slider .po-slide img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.po-hero-slider .po-slide figcaption{display:none}

/* Foto incorniciate (chi siamo, contatori) */
figure.po-figure{margin:0}
figure.po-figure img{border-radius:var(--r);width:100%;height:520px;object-fit:cover;position:relative;z-index:2}
/* Senza ".cap": il blocco Immagine di Gutenberg non consente classi
   personalizzate sulla didascalia, e aggiungerle a mano nel contenuto
   di una pagina la farebbe segnalare come "contenuto non valido"
   nell'editor. Si aggancia quindi direttamente al figcaption. */
figure.po-figure figcaption{position:absolute;z-index:3;bottom:16px;left:16px;right:16px;background:rgba(11,34,57,.86);color:#fff;padding:12px 18px;font-size:12.5px;letter-spacing:.04em;border-radius:var(--r);text-align:left;margin:0}
figure.po-figure figcaption b{color:var(--gold-2)}

/* Immagine con pulsante play */
.po-video figure{margin:0}
.po-video figure img{width:100%;height:440px;object-fit:cover;display:block;border-radius:0}

@media(max-width:920px){
  figure.po-figure img,.po-video figure img{height:360px}
}

/* =========================================================
   NAVIGAZIONE — separazione dei ruoli
   Il blocco Navigazione di Gutenberg applica la classe indicata
   nell'editor SIA al <nav> SIA alla <ul> interna. Le regole del
   template statico, scritte per una sola <ul>, finivano così per
   colpire anche il contenitore: sotto i 920px collassava il <nav>
   e il menu mobile non si apriva più. Qui il <nav> torna a essere
   un semplice contenitore e la <ul> porta tutto il menu.
   ========================================================= */
nav.po-menu.wp-block-navigation{display:block;position:static;max-height:none;overflow:visible;opacity:1;visibility:visible;background:none;border:none;box-shadow:none;padding:0;gap:0;transition:none}
ul.po-menu.wp-block-navigation__container{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}

@media(max-width:920px){
  nav.po-menu.wp-block-navigation{position:static}
  ul.po-menu.wp-block-navigation__container{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 20px 30px -18px rgba(11,34,57,.4);
    padding:6px 0;max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height .35s ease,opacity .25s,visibility .25s}
  .po-header.open ul.po-menu.wp-block-navigation__container{max-height:80vh;opacity:1;visibility:visible}
  .po-menu .wp-block-navigation-item{width:100%}
  .po-menu .wp-block-navigation-item__content{display:block;padding:15px 24px;font-size:15px;border-bottom:1px solid var(--line)}
}

/* Gallerie fotografiche degli articoli (blocco Galleria di Gutenberg,
   importate dal sito originale). theme.json azzera blockGap per le
   sezioni della home, quindi la galleria erediterebbe gap 0: si
   ridà spazio tramite la variabile che WordPress usa per calcolare
   la larghezza delle colonne, non con "gap" diretto. */
.po-prose .wp-block-gallery{--wp--style--gallery-gap-default:12px;margin:28px 0}
/* theme.json (blockGap 0) stampa «:root :where(.is-layout-flex){gap:0}» che
   vince sul gap del blocco: si riafferma qui con specificità maggiore. */
.po-prose .wp-block-gallery.is-layout-flex{gap:var(--wp--style--unstable-gallery-gap,12px)}
.po-prose .wp-block-gallery figure.wp-block-image img{border-radius:var(--r)}
.po-prose .wp-block-image{margin:28px 0}
.po-prose .wp-block-image img{border-radius:var(--r);height:auto}
.po-prose .wp-block-image.alignleft{margin:6px 28px 16px 0}
.po-prose .wp-block-image.alignright{margin:6px 0 16px 28px}
.po-prose iframe{max-width:100%}

/* =========================================================
   SOTTOMENU «News» → News / Gallery / Video Gallery
   Il blocco Navigazione rende la voce con figli come
   <li class="wp-block-navigation-item has-child"> con dentro il
   link, la freccina e una <ul class="wp-block-navigation__submenu-container">.
   Le regole del core non bastano: il ponte qui sopra riscrive
   .po-menu con specificità alta e il pannello ereditava la riga
   orizzontale della barra. Qui torna a essere una colonna
   sovrapposta, con i colori del tema.
   ========================================================= */
.po-menu .wp-block-navigation-item.has-child{position:relative;display:flex;align-items:center}
/* Il core tiene il pannello chiuso con height:0/width:0/visibility:hidden
   su un selettore a tre classi, e lo apre mettendo aria-expanded="true"
   sul bottone: con "open-on-hover-click" l'apertura la fa il JS del core,
   non un :hover del CSS. Qui non si combatte quel meccanismo, si aggiunge
   solo l'aspetto — e per batterne la specificità servono i tag nav e ul. */
nav.po-menu ul.wp-block-navigation__submenu-container{
  margin:0;padding:0;list-style:none;background:#fff;border:0;box-shadow:none}
nav.po-menu .wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ ul.wp-block-navigation__submenu-container,
nav.po-menu .wp-block-navigation-item.has-child.is-menu-open > ul.wp-block-navigation__submenu-container,
nav.po-menu .wp-block-navigation-item.has-child:hover > ul.wp-block-navigation__submenu-container,
nav.po-menu .wp-block-navigation-item.has-child:focus-within > ul.wp-block-navigation__submenu-container{
  position:absolute;top:100%;left:-18px;z-index:60;
  height:auto;width:auto;min-width:214px;overflow:visible;
  opacity:1;visibility:visible;
  padding:8px 0;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 22px 34px -20px rgba(11,34,57,.45);
  /* Il core accompagna l'apertura con «transition:opacity .1s»: un
     decimo di secondo impercettibile che però lascia il pannello a
     opacity 0 finché la transizione non parte. Il menu si apre e basta. */
  transition:none}
nav.po-menu ul.wp-block-navigation__submenu-container .wp-block-navigation-item{width:100%;display:block}
/* Dentro il pannello il core reimposta colore e spaziatura con un
   selettore a cinque classi («… .has-child .__submenu-container >
   .navigation-item > .navigation-item__content», padding .5em 1em):
   per riportare font, colore e maiuscoletto della barra serve almeno
   quella specificità, da cui il selettore lungo qui sotto. */
nav.po-menu .wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item > a.wp-block-navigation-item__content{
  display:block;padding:9px 18px;white-space:nowrap;border-bottom:0;
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--navy)}
nav.po-menu .wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content{color:var(--gold)}
nav.po-menu .wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item > a.wp-block-navigation-item__content:hover{color:var(--gold);background:var(--paper)}
/* La freccina: il core la stampa come <button> con lo sfondo del browser
   e un tracciato con solo stroke-width — senza stroke:currentColor
   resterebbe invisibile. */
.po-menu .wp-block-navigation__submenu-icon{
  display:inline-flex;align-items:center;padding:0 0 0 5px;margin:0;
  background:none;border:0;color:inherit;cursor:pointer}
.po-menu .wp-block-navigation__submenu-icon svg{width:12px;height:12px;fill:none;stroke:currentColor}

/* --- Pagine Gallery e Video Gallery --- */
/* .po-prose sta a 780px, giusto per un articolo ma stretto per una
   griglia di foto: queste due pagine usano tutta la colonna. */
.po-prose.po-wide{max-width:none}
.po-prose.po-wide > p{max-width:72ch}
.po-prose .po-lead{font-size:19px;line-height:1.7;color:var(--text-soft)}
.po-prose .po-gallery-title{margin:46px 0 2px;font-size:24px}
.po-prose .po-gallery-meta{font-size:13.5px;letter-spacing:.02em;color:var(--text-soft);margin:0 0 16px}
.po-prose .po-gallery-meta a{color:var(--gold);font-weight:600}
.po-prose .po-gallery{margin:0 0 10px}
/* Le foto degli eventi sono un misto di verticali e orizzontali: lasciate
   alla loro proporzione naturale la griglia diventa una scala e la pagina
   supera i 26.000px. Ritaglio 4:3 uniforme nella griglia; la lightbox
   continua a mostrare l'immagine intera. */
.po-prose .po-gallery figure.wp-block-image{aspect-ratio:4/3;overflow:hidden}
.po-prose .po-gallery figure.wp-block-image img{width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.po-prose .po-sep{margin:46px 0 26px;border:0;border-top:1px solid var(--line)}

.po-prose .po-videogrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 28px;margin:36px 0 0}
.po-prose .po-videocard{margin:0}
.po-prose .po-videocard .wp-block-embed{margin:0}
.po-prose .po-videocard .wp-block-embed__wrapper{border-radius:var(--r);overflow:hidden;background:var(--navy-dark)}
.po-prose .po-videocard .po-gallery-title{margin:14px 0 2px;font-size:19px;line-height:1.35}

/* --- Gallery e Video Gallery automatiche (shortcode del tema) ---
   Le due pagine non contengono più le foto: [icm_gallery] e
   [icm_videogallery] le ricavano dagli articoli pubblicati. Il markup
   è del tema, quindi qui non serve inseguire le classi del core. */
.po-prose .po-gallery-title a{color:inherit;text-decoration:none}
.po-prose .po-gallery-title a:hover{color:var(--gold)}
.po-prose .po-gallery-auto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 10px}
.po-prose .po-gallery-auto .po-gphoto{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:var(--paper-2)}
.po-prose .po-gallery-auto .po-gphoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.po-prose .po-gallery-auto .po-gphoto:hover img{transform:scale(1.05)}
.po-gallery-nav{gap:20px;align-items:center;margin-top:44px}
.po-gallery-nav a{font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--wine)}
.po-gallery-nav a:hover{color:var(--gold)}
.po-gallery-nav .conta{font-family:var(--sans);font-size:13px;color:var(--text-soft)}
.po-prose .po-videoframe{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--navy-dark)}
.po-prose .po-videoframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- Lightbox del tema ---
   Quella del core vale solo per i blocchi Immagine: le foto della
   Gallery automatica sono markup nostro, quindi il pannello se lo
   costruisce site.js. */
.po-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(11,34,57,.95);padding:64px 24px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.po-lightbox.is-open{opacity:1;visibility:visible}
.po-lightbox figure{margin:0;max-width:1200px;text-align:center}
.po-lightbox img{max-width:100%;max-height:calc(100vh - 190px);border-radius:var(--r);box-shadow:0 30px 60px -30px #000}
.po-lightbox figcaption{margin-top:16px;font-family:var(--sans);font-size:14px;color:#D8E0E8}
.po-lightbox figcaption .conta{display:block;margin-top:6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-2)}
.po-lightbox button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;line-height:1;
  font-family:var(--sans);opacity:.75;transition:opacity .2s}
.po-lightbox button:hover,.po-lightbox button:focus-visible{opacity:1}
.po-lb-close{top:18px;right:22px;font-size:34px;padding:8px 14px}
.po-lb-prev,.po-lb-next{top:50%;transform:translateY(-50%);font-size:48px;padding:14px 20px}
.po-lb-prev{left:6px}
.po-lb-next{right:6px}

/* =========================================================
   SOVRASCRITTURE MOBILE — devono restare in fondo al file
   Il blocco "ponte Gutenberg" qui sopra contiene regole desktop
   con selettori di specificità uguale o maggiore: una media query
   non aggiunge specificità, quindi le stesse regole scritte più in
   alto venivano semplicemente annullate. Tutto ciò che deve valere
   solo sotto una certa larghezza va scritto DOPO il ponte.
   ========================================================= */

@media(max-width:920px){
  /* Ritmo verticale delle sezioni, ridotto rispetto al desktop. */
  .po-container.is-layout-flow > .po-split + .po-split,
  .po-container.is-layout-constrained > .po-split + .po-split{margin-block-start:56px}
  .po-container.is-layout-flow > .po-closing,
  .po-container.is-layout-constrained > .po-closing{margin-block-start:48px}
  .po-container.is-layout-flow > .po-section-head,
  .po-container.is-layout-constrained > .po-section-head{margin-block-end:34px}

  /* Header: il bottone Contattaci non va nascosto — è l'unico
     collegamento alla pagina Contatti, che non compare nel menu —
     ma va rimpicciolito, altrimenti spinge il burger fuori schermo
     e il menu diventa irraggiungibile. */
  .po-nav{gap:12px}
  /* Due classi anche qui: il ponte dichiara ".po-brand.wp-block-site-logo
     img{height:52px}", che batterebbe un ".po-brand img" da solo. */
  .po-brand.wp-block-site-logo img,.po-brand img{height:44px}
  .po-header-cta{flex:0 0 auto}
  /* Tre classi, per battere il ".wp-block-button > .wp-block-button__link"
     del ponte senza toccare gli altri bottoni oro del sito. */
  .po-header-cta .wp-block-button > .wp-block-button__link{white-space:nowrap;padding:11px 14px;font-size:12px;letter-spacing:.04em}

  /* Sottomenu: nel menu a tendina mobile il dropdown non ha senso (non
     c'è hover) — le tre voci restano sempre aperte e rientrate. Lo stato
     chiuso del core («.wp-block-navigation .has-child .wp-block-navigation__submenu-container»,
     tre classi) va battuto in specificità: da qui i tag nav e ul più le
     quattro classi del selettore. Un elenco di selettori non aiuta —
     ognuno conta la propria specificità, quindi serve questo, singolo. */
  nav.po-menu .wp-block-navigation-item.has-child{display:block}
  nav.po-menu .wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container{
    position:static;height:auto;width:auto;min-width:0;overflow:visible;
    opacity:1;visibility:visible;transition:none;
    padding:0;border:0;border-radius:0;box-shadow:none;background:var(--paper)}
  nav.po-menu .wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item > a.wp-block-navigation-item__content{
    padding:13px 24px 13px 42px;font-size:14px;border-bottom:1px solid var(--line)}
  .po-menu .wp-block-navigation__submenu-icon{display:none}
  /* Con le tre voci del sottomenu sempre aperte il menu arriva a ~554px:
     su un telefono corto supera l'80vh del pannello, che è in
     overflow:hidden — l'ultima voce diventerebbe irraggiungibile. */
  .po-header.open ul.po-menu.wp-block-navigation__container{overflow-y:auto;-webkit-overflow-scrolling:touch}

  /* Video: una colonna sola sotto i 920px. */
  .po-prose .po-videogrid{grid-template-columns:1fr;gap:30px}

  /* Gallery automatica: due colonne, e la lightbox senza margini
     sprecati — su un telefono lo spazio è tutto per la fotografia. */
  .po-prose .po-gallery-auto{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .po-lightbox{padding:56px 10px}
  .po-lightbox img{max-height:calc(100vh - 170px)}
  .po-lb-prev,.po-lb-next{font-size:34px;padding:10px 12px}
  .po-gallery-nav{gap:12px;flex-wrap:wrap}
}

@media(max-width:480px){
  /* Sotto i 480px la riga dell'header è al limite: logo e bottone
     si stringono ancora per lasciare spazio al burger. */
  .po-brand.wp-block-site-logo img,.po-brand img{height:38px}
  .po-header-cta .wp-block-button > .wp-block-button__link{padding:9px 11px;font-size:11px}
}

@media(max-width:360px){
  /* Schermi stretti (iPhone SE, Galaxy base). La riga dell'header è
     già alla sua larghezza minima e non si comprime oltre: senza
     questo ulteriore giro di dimagrimento il burger finisce fuori
     dallo schermo e il menu diventa irraggiungibile, per giunta
     senza alcun segnale visibile perché l'overflow è nascosto. */
  .po-nav{gap:8px}
  .po-brand.wp-block-site-logo img,.po-brand img{height:32px}
  .po-header-cta .wp-block-button > .wp-block-button__link{padding:8px 9px;font-size:10px;letter-spacing:.02em}
  .po-burger{padding:8px}
}

@media(min-width:921px) and (max-width:1180px){
  /* Fascia intermedia (tablet in orizzontale, portatili piccoli): qui il
     burger non c'è ancora e le otto voci del menu, alla misura desktop,
     andavano a capo su due righe spezzando la riga dell'header. Passo e
     corpo si stringono quanto basta a farle tornare su una riga sola.
     Tre classi sul bottone, per battere il ponte senza toccare gli altri
     bottoni oro del sito. */
  .po-nav{gap:14px}
  .po-menu.wp-block-navigation .wp-block-navigation__container{gap:14px}
  .po-menu .wp-block-navigation-item__content{font-size:12.5px;letter-spacing:.02em}
  .po-brand.wp-block-site-logo img,.po-brand img{height:46px}
  .po-header-cta .wp-block-button > .wp-block-button__link{padding:12px 18px;font-size:12px}
}


/* Video della home (sezione «Un ponte tra il Mezzogiorno e il mondo").
   Il video si mostra nelle sue proporzioni, senza ritaglio: verticale
   com'è oggi, ma se il cliente lo sostituisce con uno orizzontale la
   regola regge lo stesso, perché larghezza e altezza seguono il file.
   Il riquadro si stringe attorno al video e resta centrato nella colonna. */
.po-work .po-video:has(video){justify-self:center;max-width:100%;background:var(--navy-dark)}
.po-video .wp-block-video{margin:0}
.po-video video{display:block;width:auto;height:auto;max-width:100%;max-height:640px}
@media(max-width:920px){
  .po-video video{max-height:72vh}
}