/* Sezione "Linee Hashimi" della home: titolo e 2 banner legati allo scroll. Caricato solo in home; token e header sono quelli del tema. */
.hxb-sez{border-top:1px solid var(--line)}
.hxb-sez__head{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(24px,3vw,40px)}
.hxb-sez__title{margin:0;font:900 clamp(40px,5.6vw,84px)/1.02 var(--f);text-transform:uppercase;letter-spacing:-.01em;color:var(--ink)}

/* ---------- banner. Stato di base (senza JS, riduci movimento, canvas che fallisce): composizione finale ferma ---------- */
/* --hxb-adm: la barra di WordPress di chi è loggato. La cornice si ferma sotto l'header (76 px più 1 di filetto) e sotto quella barra */
/* --g0…--g3 di base = quelli di Onde Blu; ogni banner mette i suoi nello style (template-parts/home-progetti.php) */
.hxb{--hxb-adm:0px;--frame-h:calc(100vh - var(--header-h) - 1px - var(--hxb-adm));--g0:#061531;--g1:#09204a;--g2:#0b2f6b;--g3:#1f56a8;position:relative;border-top:1px solid var(--line)}
.admin-bar .hxb{--hxb-adm:32px}
@media (max-width:782px){.admin-bar .hxb{--hxb-adm:46px}}
@media (max-width:600px){.admin-bar .hxb{--hxb-adm:0px}}
@supports (height:1svh){.hxb{--frame-h:calc(100svh - var(--header-h) - 1px - var(--hxb-adm))}}
.hxb__frame{display:grid;grid-template-columns:1fr 1fr;min-height:min(824px,var(--frame-h));background:#fff}
.hxb__text{display:flex;align-items:center;min-width:0;padding:clamp(24px,3vw,48px) clamp(24px,4vw,64px) clamp(24px,3vw,48px) max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)))}
.hxb__text-in{width:100%;max-width:520px}
.hxb__name{margin:0 0 clamp(24px,3vw,44px);font:900 clamp(34px,4.1vw,60px)/1.04 var(--f);text-transform:uppercase;letter-spacing:-.005em;color:var(--ink);text-wrap:balance}
.hxb__facts{margin:0;padding:0;font:500 clamp(15px,1.2vw,17px)/1.35 var(--f);color:var(--ink)}
.hxb__facts>div{display:grid;grid-template-columns:minmax(8em,.42fr) 1fr;gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.hxb__facts>div:last-child{border-bottom:1px solid var(--line)}
.hxb__facts dt{font-weight:700}
.hxb__facts dd{margin:0;font-variant-numeric:tabular-nums}
/* dice che le linee Hashimi sono render indicativi, non un lavoro consegnato */
.hxb__nota{margin:clamp(12px,1.2vw,18px) 0 0;font:500 clamp(13px,1vw,14px)/1.4 var(--f);color:var(--ink);text-wrap:pretty}
.hxb__stage{position:relative;isolation:isolate;overflow:hidden;min-width:0;background:radial-gradient(90% 62% at 52% 56%,var(--g2) 0%,var(--g1) 72%,var(--g0) 100%)}
.hxb__grain{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.hxb__glow{position:absolute;inset:0;opacity:0;background:radial-gradient(74% 46% at 50% 52%,var(--g3) 0%,transparent 100%);pointer-events:none;will-change:opacity}
.hxb__canvas{position:absolute;inset:0;width:100%;height:100%;display:none;opacity:0;transition:opacity .5s ease}
.hxb__canvas.is-ready{opacity:1}
.hxb__labels{display:none;position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.hxb__labels li{position:absolute;left:0;top:0;white-space:nowrap;font:500 clamp(13px,.95vw,15px)/1.15 var(--f);color:#fff;opacity:0;will-change:transform,opacity}
.hxb__still{position:absolute;inset:0;width:100%;height:100%}
.hxb__still img{width:100%;height:100%;object-fit:contain;object-position:50% 50%}

/* zig zag da computer e col telefono in orizzontale: data-side dice dove sta l'immagine. "right" è il valore di base, "left" la porta a sinistra e il testo a destra */
@media (min-width:821px),(max-height:500px) and (orientation:landscape){
	.hxb[data-side="left"] .hxb__stage{grid-column:1;grid-row:1}
	.hxb[data-side="left"] .hxb__text{grid-column:2;grid-row:1;padding-left:clamp(24px,4vw,64px);padding-right:max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)))}
	/* composizione ferma: il riquadro prende le proporzioni dell'immagine (720×824), altrimenti sugli schermi larghi i pezzi finiscono tagliati a metà del fondo. Mai oltre metà pagina */
	html:not(.hxb-live) .hxb__frame,.hxb.is-static .hxb__frame{grid-template-columns:1fr min(50%,calc(min(824px,var(--frame-h))*.874))}
	.hxb.is-still-hold .hxb__frame{grid-template-columns:1fr min(50%,calc(var(--frame-h)*.874))}
	html:not(.hxb-live) .hxb[data-side="left"] .hxb__frame,.hxb[data-side="left"].is-static .hxb__frame{grid-template-columns:min(50%,calc(min(824px,var(--frame-h))*.874)) 1fr}
	.hxb[data-side="left"].is-still-hold .hxb__frame{grid-template-columns:min(50%,calc(var(--frame-h)*.874)) 1fr}
}

/* ---------- banner vivo: fermo sotto l'header. L'altezza c'è già prima del primo disegno (la classe la mette lo script in head), così la pagina non salta ---------- */
.hxb-live .hxb:not(.is-static){height:calc(var(--frame-h) + var(--screens,3)*100vh)}
.hxb-live .hxb:not(.is-static) .hxb__frame{position:sticky;top:calc(var(--header-h) + 1px + var(--hxb-adm));height:var(--frame-h);min-height:0}
.hxb-live .hxb:not(.is-still):not(.is-static) .hxb__canvas{display:block}
.hxb-live .hxb:not(.is-still):not(.is-static) .hxb__labels{display:block}
.hxb-live .hxb:not(.is-still):not(.is-static) .hxb__still{display:none}
/* i pezzi non sono ancora arrivati e il banner è in vista (connessione lenta, salto a metà pagina): sotto il canvas un'anteprima sfocata già nel CSS, 40 px, nessun file in più da scaricare */
.hxb-live .hxb.is-carica .hxb__stage::before{content:"";position:absolute;inset:-28px;z-index:-1;background:var(--hxb-lo) 50%/cover no-repeat;filter:blur(16px);animation:hxb-lo .3s linear}
@keyframes hxb-lo{from{opacity:0}}
.hxb[data-hx-banner="onde-blu"]{--hxb-lo:url(data:image/webp;base64,UklGRl4BAABXRUJQVlA4IFIBAABQCQCdASooAC4APu1qrlOppSOipzgJITAdiUAZA6gOrVUoKpAcCuIFa3fJZ2svI4lXsy8ktyyI0IqR4L5uklg+9bQ8e9k54osfvOW2tRCJ8VZJQAD+9WSH9nT2axDbukKFcv/JgxuBo4dqs2p+VnmsD5g0t0emZKxYxZIvCMHposd5cMjMXNZWvwXTEXOhWBx1KuZw4W8WJxa8uYbUv+IaIdp+C9OVSHQvGSQ7UyIxq41HzRQ+Qqjr3GHS8NSGWJLk+Y9KvdP4uwL3BolwgsqIReWZAd4Po62BHbTLhoSBo6hyiaqXzOWLRpEK1LYz4FBSwqz00rT1XoEq+zOdFu1WUl+3N/xsYj965WRGedoeOyShyL2ViyqF/JhmTp6BEJg4QAenznNODKItEMQI8eNt17C5L/riVqWu7a7sPJ4OyczdMBZh+cB7HlWR6yD28GWwAA==)}
.hxb[data-hx-banner="onde-turchesi"]{--hxb-lo:url(data:image/webp;base64,UklGRnABAABXRUJQVlA4IGQBAABwCACdASooAC4APu1sq1AppiOiqrVcATAdiWgAygWs8Zga7LR0ljOxjH73UKioM+5GaJGxjwWTH3TGFUAJaRZd+ex8osfURhtSX2NQAP7itNts7laTRDngb530zLP+xHpL4bDGXdX0bw18TbOrEskBv+N/q4w/dcvqaiYBFJ4/M7JBANELIxGrNfkFdRnjOkvwqp/98vdOTPl7E5W2knX0r9W74SsbCxF4hHR7p+SKHDaXg1F4nK2w/KFA2+vPTv4BsT1vy8c+5U9/EXgLwYMTYwz5wesMC+or+4k19No1N8GDCe0R1/EAV3hH94rzKJCixkx8GEKeSGUSFgvHKcY2xj/bwJmHfR9TVrIhkNCVp6bDJAc0uObwFJAYD5MSkEdLacAzxYs/KxTMn7KRJrnWPyI0eCLTVzORq9yNXKVt8IunixsvqKtuVvq2VhNrTrR6pkPx1XiK6B7gRC+ADxVIQLYAAA==)}

/* animazione sopra e testo sotto solo se c'è altezza: il telefono in orizzontale resta su due colonne (engine.js ha la stessa soglia) */
@media (max-width:820px) and (min-height:501px),(max-width:820px) and (orientation:portrait){
	.hxb__frame{grid-template-columns:1fr;grid-template-rows:auto auto}
	.hxb__stage{grid-row:1;aspect-ratio:390/568;background:radial-gradient(100% 60% at 50% 56%,var(--g2) 0%,var(--g1) 74%,var(--g0) 100%)}
	.hxb__text{grid-row:2;padding:14px var(--gutter) 16px;align-items:flex-start}
	.hxb__text-in{max-width:none}
	.hxb__name{font-size:26px;margin-bottom:10px}
	.hxb__facts{font-size:14px}
	.hxb__facts>div{padding:6px 0;grid-template-columns:7.6em 1fr;gap:8px}
	.hxb__nota{margin-top:8px;font-size:12px;line-height:1.3}
	.hxb__labels li{font-size:12px}
	.hxb-live .hxb:not(.is-static) .hxb__frame{grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
	.hxb-live .hxb:not(.is-static) .hxb__stage{aspect-ratio:auto;min-height:0}
}
@media (max-height:500px) and (orientation:landscape){
	.hxb .hxb__text,.hxb[data-side="left"] .hxb__text{padding:8px 16px}
	.hxb__text-in{max-width:none}
	.hxb__name{font-size:clamp(18px,3.1vw,26px);margin-bottom:8px}
	.hxb__facts{font-size:12px;line-height:1.25}
	.hxb__facts>div{padding:3px 0;grid-template-columns:6.6em 1fr;gap:6px}
	.hxb__nota{margin-top:5px;font-size:11px;line-height:1.25}
	.hxb__labels li{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
	.hxb__canvas{transition:none}
}