/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  margin: 0 0 var(--space-sm);
  line-height: 1.15;
}

p { margin: 0 0 var(--space-sm); }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-primary);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--fs-small);
  background: var(--color-primary);
  color: #fff;
  border: 2px solid var(--color-primary);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateY(-2px); }

.btn-outline {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,.6);
}
.btn-outline:hover { background: rgba(255,255,255,.15); border-color: #fff; }

/* Animazione fade-in-up applicata via JS (IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  .scroll-hint::before { animation: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-ink);
}
.site-logo img { height: 46px; width: auto; }
/* Quando c'è un logo immagine, il nome testuale accanto non va mostrato
   (evita doppia identità visiva: logo + scritta). Il markup omette lo
   <span> del nome in questo caso (vedi render.js), questa regola è solo
   una protezione in più. */
.site-logo:has(img) .site-logo-text { display: none; }
.site-logo .fallback-mark {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: .4rem;
}
.nav-toggle span {
  width: 24px; height: 2px; background: var(--color-ink); border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-weight: 500;
  font-size: .95rem;
}
.nav-links a { position: relative; padding: .3rem 0; color: var(--color-text); transition: color var(--transition); }
.nav-links a:hover { color: var(--color-primary); }
.nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px; background: var(--color-primary);
  transition: width var(--transition);
}
.nav-links a:hover::after { width: 100%; }

.nav-cta .btn { padding: .6rem 1.3rem; }
.nav-btn { padding: .55rem 1.3rem !important; background: var(--color-primary); color: #fff !important; border-radius: 999px; }
.nav-btn:hover { background: var(--color-primary-dark); }
.nav-btn::after { display: none; }

/* Mobile nav */
@media (max-width: 900px) {
  /* Il backdrop-filter sullo sticky header crea un containing block per gli
     elementi fixed: il drawer mobile finirebbe confinato nei 92px dell'header. */
  .site-header {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-toggle { display: flex; }

  .main-nav {
    position: fixed;
    top: 92px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100dvh - 92px);
    background: #fff;
    background-color: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-lg) var(--space-md);
    gap: var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--transition);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 12px 30px rgba(17, 38, 58, .08);
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }

  .nav-links {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    font-size: 1.1rem;
  }
  .nav-links > li { width: 100%; }
}


/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  /* Hero ridotto (circa un terzo di pagina) di default: usato su tutte le
     pagine tranne la home, che invece resta a tutta altezza (vedi sotto).
     Il padding verticale è ridotto rispetto alla regola generica "section"
     perché con un hero basso quel padding (8rem) da solo supererebbe già
     l'altezza desiderata. */
  min-height: clamp(280px, 34vh, 460px);
  padding: var(--space-lg) 0;
  display: flex;
  align-items: center;
  color: #fff;
  text-align: center;
  background: linear-gradient(180deg, rgba(17,38,58,.55), rgba(17,38,58,.75)),
              linear-gradient(135deg, var(--color-primary-dark), var(--color-primary) 60%, var(--color-accent));
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Solo in home l'hero occupa (quasi) tutta la viewport, come sezione di apertura. */
body[data-page="home"] .hero {
  min-height: 86vh;
}

/* L'indicatore "scorri per continuare" ha senso solo sull'hero a tutta pagina. */
body:not([data-page="home"]) .scroll-hint {
  display: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.08), transparent 40%);
  pointer-events: none;
}

.hero .container { position: relative; z-index: 1; margin: 0 auto; }

.hero-inner { max-width: 780px; margin: 0 auto; }

.hero h1 {
  font-size: var(--fs-hero);
  color: #fff;
  margin-bottom: var(--space-sm);
}

.hero .subtitle {
  font-size: 1.3rem;
  font-weight: 500;
  color: rgba(255,255,255,.9);
  margin-bottom: var(--space-lg);
}

.hero-actions { display: flex; justify-content: center; gap: var(--space-sm); flex-wrap: wrap; }

.scroll-hint {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 2px solid rgba(255,255,255,.6);
  border-radius: 20px;
}
.scroll-hint::before {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  width: 4px; height: 8px;
  background: #fff; border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollHint 1.8s infinite;
}
@keyframes scrollHint {
  0% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}

/* ==========================================================================
   Section base
   ========================================================================== */
section { padding: var(--space-2xl) 0; }
section:nth-of-type(even) { background: var(--color-bg-alt); }

.section-head { max-width: 680px; margin-bottom: var(--space-lg); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* About */
.about-grid {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
.about .section-head { max-width: 720px; margin: 0 auto; text-align: center; }
.about p { font-size: 1.15rem; color: var(--color-text); max-width: 760px; margin: 0 auto; text-align: center; }

/* Solutions */
.solutions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.solutions-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
  font-weight: 600;
}
.solutions-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .solutions-grid { grid-template-columns: 1fr; }
  .solutions-media { order: -1; }
}

/* Solutions, variante "stats" (imageText con variant:"stats"): al posto della
   foto, una griglia 2x2 di numeri — usata per "Le nostre soluzioni" in home. */
.solutions-text-body p:last-child { margin-bottom: 0; }
.solutions-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-xl);
}
.solutions-stat .value {
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--color-accent);
}
.solutions-stat .label {
  display: block;
  margin-top: .3rem;
  color: var(--color-text);
  font-size: .95rem;
}

/* Split feature: blocco a tutta larghezza, foto a bordo pagina da un lato e
   pannello colorato con testo dall'altro (nessun .container, per uscire dal
   layout centrato). Di base l'immagine è a sinistra e il pannello a destra;
   con la classe "is-reverse" (dato dal campo JSON "reverse") si scambiano. */
.block-split-feature { padding: 0; }
.split-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
}
/* Campo "matchTextHeight" (indipendente da "graphic"/foto vera): niente
   altezza minima fissa. Il grid di default allinea le due colonne alla
   stessa altezza ("align-items: stretch"), quindi rimuovere solo il minimo
   forzato basta a far sì che l'immagine non superi mai l'altezza del
   pannello di testo accanto — cresce/si riduce insieme a lui invece di
   imporre un'altezza indipendente dal contenuto. Di default (flag assente)
   resta il comportamento originale, utile quando si vuole comunque una
   banda fotografica di una certa altezza anche con testo breve. */
.block-split-feature.match-text-height .split-feature { min-height: 0; }
.split-feature-media {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-lg);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
  color: var(--color-primary-dark);
  font-weight: 600;
}
/* L'immagine è "position: absolute" (non un figlio normale del flusso):
   altrimenti, anche togliendo il min-height sopra, le sue proporzioni
   naturali continuano comunque a "chiedere" un'altezza al grid in base alla
   larghezza della colonna — è esattamente questo, e non il minimo fisso, a
   far sì che la foto resti grande quanto tutto il blocco anche con
   matchTextHeight attivo. Tolta dal flusso, il grid ignora le sue
   proporzioni: l'altezza della riga la decide solo il pannello di testo, e
   l'immagine (con "inset: 0", che rispetta il padding del contenitore) si
   adatta di conseguenza restando comunque proporzionata via object-fit. */
.split-feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; margin: auto; }
/*
 * mediaFill=false (default): l'immagine resta "inset", cioè dentro il
 * contenitore con il margine colorato. In precedenza l'immagine aveva
 * inset:0 anche in questo caso e quindi copriva sempre tutta la colonna,
 * rendendo di fatto inutile il flag mediaFill.
 */
.split-feature-media:not(.is-fill) img {
  inset: var(--space-lg);
  width: calc(100% - 2 * var(--space-lg));
  height: calc(100% - 2 * var(--space-lg));
  object-fit: contain;
  margin: auto;
}
/* mediaFill=true: l'immagine tocca i bordi della sua colonna. */
/* "imageFill": l'immagine tocca i bordi della sua colonna invece di restare
   centrata con un margine colorato attorno (comportamento di default sopra). */
.split-feature-media.is-fill { padding: 0; }

/*
 * maxHeight: il limite si applica all'IMMAGINE, mai al contenitore.
 * Quando maxHeight è presente togliamo quindi il vincolo "inset + width/height
 * 100%" dell'immagine assoluta: l'immagine mantiene le proprie proporzioni,
 * viene centrata nel contenitore e può essere al massimo alta quanto il valore
 * impostato. Il contenitore continua invece ad avere l'altezza determinata
 * dal grid e dal pannello di testo.
 */
.split-feature-media.has-max-height img {
  inset: 50% auto auto 50%;
  width: auto;
  height: auto;
  max-width: calc(100% - 2 * var(--space-lg));
  max-height: min(var(--split-feature-max-height), calc(100% - 2 * var(--space-lg)));
  object-fit: contain;
  transform: translate(-50%, -50%);
  margin: 0;
}

.split-feature-media.is-fill.has-max-height img {
  max-width: 100%;
  max-height: min(var(--split-feature-max-height), 100%);
}
.split-feature-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Il contenuto resta ancorato al lato del pannello che confina con la foto
     (la "giunzione" tra le due metà), non al bordo esterno del browser: su
     schermi molto larghi il pannello si allarga (è a tutta larghezza, per
     restare "full bleed"), ma il testo non deve seguirlo fino al bordo dello
     schermo, altrimenti finisce lontanissimo dal contenuto centrato del
     resto del sito. Di default la giunzione è a sinistra (foto a sinistra,
     pannello a destra); con "reverse" si inverte, vedi sotto. */
  align-items: flex-start;
  padding: var(--space-2xl) var(--space-xl);
  color: #fff;
}
.split-feature-panel.theme-primary { background: var(--color-primary); }
.split-feature-panel.theme-dark { background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); }
.split-feature-panel .eyebrow { color: rgba(255,255,255,.85); }
.split-feature-panel h2 { color: #fff; }
.split-feature-panel p { color: rgba(255,255,255,.92); margin-bottom: var(--space-md); }
.split-feature-inner { max-width: 460px; }

.block-split-feature.is-reverse .split-feature-media { order: 2; }
.block-split-feature.is-reverse .split-feature-panel { order: 1; align-items: flex-end; }
.block-split-feature.is-reverse .split-feature-inner { text-align: right; }

@media (max-width: 860px) {
  .split-feature { grid-template-columns: 1fr; min-height: 0; }
  .split-feature-media { order: -1 !important; aspect-ratio: 4 / 3; }
  .split-feature-panel { order: 2 !important; padding: var(--space-xl) var(--space-md); align-items: flex-start; }
  .split-feature-inner { max-width: none; }
  .block-split-feature.is-reverse .split-feature-inner { text-align: left; }
}

/* Split feature, variante "full": la foto riempie l'intero blocco (non solo
   metà) con un velo colorato sopra per leggibilità e il testo sovrapposto,
   invece del pannello pieno a fianco. "reverse" qui allinea il testo a
   sinistra (default) o a destra invece di scambiare i lati. */
.split-feature-full {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.split-feature-full::before {
  content: "";
  position: absolute;
  inset: 0;
}
/* :not(.is-empty) per non competere in specificità con le regole di fallback
   qui sotto quando non c'è nessuna immagine impostata (senza il :not(), la
   sfumatura vincerebbe comunque per specificità più alta anche su ::before
   "is-empty", risultato sbagliato individuato in fase di test). */
.block-split-feature.theme-primary .split-feature-full:not(.is-empty)::before {
  background: linear-gradient(100deg, rgba(29,113,184,.92) 0%, rgba(29,113,184,.75) 45%, rgba(29,113,184,.35) 100%);
}
.block-split-feature.theme-dark .split-feature-full:not(.is-empty)::before {
  background: linear-gradient(100deg, rgba(17,38,58,.92) 0%, rgba(17,38,58,.75) 45%, rgba(17,38,58,.35) 100%);
}
.block-split-feature.theme-primary.is-reverse .split-feature-full:not(.is-empty)::before { background: linear-gradient(260deg, rgba(29,113,184,.92) 0%, rgba(29,113,184,.75) 45%, rgba(29,113,184,.35) 100%); }
.block-split-feature.theme-dark.is-reverse .split-feature-full:not(.is-empty)::before { background: linear-gradient(260deg, rgba(17,38,58,.92) 0%, rgba(17,38,58,.75) 45%, rgba(17,38,58,.35) 100%); }
/* Nessuna immagine impostata: solo il colore del tema, senza sfumatura. */
.split-feature-full.is-empty::before { background: var(--color-primary); }
.block-split-feature.theme-dark .split-feature-full.is-empty::before {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
}

.split-feature-full-inner {
  position: relative;
  z-index: 1;
  display: flex;
}
.block-split-feature.is-reverse .split-feature-full-inner { justify-content: flex-end; }

.split-feature-text {
  max-width: 480px;
  color: #fff;
}
.split-feature-text .eyebrow { color: rgba(255,255,255,.85); }
.split-feature-text h2 { color: #fff; }
.split-feature-text p { color: rgba(255,255,255,.92); margin-bottom: var(--space-md); }
.block-split-feature.is-reverse .split-feature-text { text-align: right; }
.block-split-feature.is-reverse .split-feature-text .hero-actions,
.block-split-feature.is-reverse .split-feature-text .block-text-cta { justify-content: flex-end; }

@media (max-width: 860px) {
  .split-feature-full { min-height: 380px; padding: var(--space-xl) 0; }
  .split-feature-text { max-width: none; }
  .block-split-feature.is-reverse .split-feature-full-inner { justify-content: flex-start; }
  .block-split-feature.is-reverse .split-feature-text { text-align: left; }
}

/* Expertise */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.stat-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-sm);
  text-align: center;
}
.stat-card .value {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-primary);
}
.stat-card .label {
  display: block;
  margin-top: .4rem;
  font-size: var(--fs-small);
  color: var(--color-muted);
}

@media (max-width: 760px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Recognitions */
.recognitions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.recognition-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}
.recognition-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.recognition-card h3 { font-size: var(--fs-h3); color: var(--color-primary-dark); }
.recognition-card p { color: var(--color-muted); margin-bottom: 0; }

@media (max-width: 760px) {
  .recognitions-grid { grid-template-columns: 1fr; }
}

/* Persone (fondatori, team) */
.block-people .section-head h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.block-people-intro {
  max-width: 720px;
  margin: 0 auto;
  color: var(--color-muted);
}
.people-grid {
  display: grid;
  /* auto-fit invece di un numero fisso di colonne: con 2 persone (es. Fondatori)
     le card restano centrate senza lasciare una colonna vuota, con 3+ (es. Team)
     si dispongono su una riga come una griglia normale. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  justify-content: center;
  gap: var(--space-lg) var(--space-md);
}
.people-card {
  text-align: center;
  padding: 0 var(--space-sm);
}
.people-avatar {
  position: relative;
  width: 136px;
  height: 136px;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border: 4px solid var(--color-white);
  box-shadow: var(--shadow-soft);
}
.people-avatar img { width: 100%; height: 100%; object-fit: cover; }
.people-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
}
.people-card h3 { font-size: var(--fs-h3); margin-bottom: .2rem; }
.people-role {
  display: block;
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: var(--fs-small);
  margin-bottom: .6rem;
}
.people-desc { color: var(--color-muted); font-size: var(--fs-small); }
.people-email {
  display: inline-block;
  margin-top: .4rem;
  color: var(--color-primary);
  font-size: var(--fs-small);
  font-weight: 600;
}
.people-email:hover { text-decoration: underline; }
.people-linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  margin: .6rem auto 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  transition: background var(--transition);
}
.people-linkedin:hover { background: var(--color-primary-dark); }

@media (max-width: 900px) {
  .people-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .people-grid { grid-template-columns: 1fr; }
}

/* Pollution stats */
.pollution-stats {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
}
.pollution-stats .section-head.center h2 { color: #fff; }
.pollution-stats .section-head.center .eyebrow { color: rgba(255,255,255,.75); }

.pollution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  text-align: center;
}
.pollution-grid .value {
  display: block;
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 700;
}
.pollution-grid .label {
  display: block;
  margin-top: .5rem;
  color: rgba(255,255,255,.85);
  font-size: var(--fs-small);
}
.pollution-source {
  text-align: center;
  margin-top: var(--space-lg);
  font-size: var(--fs-small);
  color: rgba(255,255,255,.7);
}

@media (max-width: 760px) {
  .pollution-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Logo slider (partner/riconoscimenti, ticker continuo)
   ========================================================================== */
.block-logo-slider { padding: var(--space-lg) 0; }
.logo-slider {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-slider-track {
  display: flex;
  width: max-content;
  animation: logoTicker 42s linear infinite;
  will-change: transform;
}
.logo-slider-group {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  padding-right: var(--space-2xl);
}
.logo-slider:hover .logo-slider-track { animation-play-state: paused; }
.logo-slider-item {
  flex: 0 0 auto;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-slider-item img { max-height: 100%; width: auto; }
.logo-slider-item span {
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-muted);
  white-space: nowrap;
}
@keyframes logoTicker {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}

/* ==========================================================================
   Immagine statica singola (es. loghi Sustainable Development Goals)
   ========================================================================== */
.block-image-static { padding: var(--space-lg) 0; }
.block-image-static-frame { max-width: 760px; margin: 0 auto; }
.block-image-static-frame img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.block-image-static-empty {
  aspect-ratio: 16 / 5;
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  color: var(--color-muted);
  font-size: .85rem;
  text-align: center;
}
.block-image-caption {
  text-align: center;
  color: var(--color-muted);
  font-size: var(--fs-small);
  margin-top: var(--space-sm);
  margin-bottom: 0;
}

/* ==========================================================================
   Video feature (poster + progetti, es. "EU Champion / Pure Project / CleanAirNet")
   ========================================================================== */
.block-video-feature { color: #fff; }
.block-video-feature.theme-primary { background: var(--color-primary); }
.block-video-feature.theme-dark { background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); }
.video-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-xl);
  /* Il box video è allineato verticalmente al centro rispetto alla colonna
     di testo accanto (che di solito è più alta, con più elementi), invece
     di restare ancorato in cima. */
  align-items: center;
}
.video-feature-media {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  color: var(--color-ink);
}
.video-feature-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
/* Video self-hosted (campo "videoFile"): player nativo del browser, stessa
   cornice/proporzioni del poster che sostituisce. */
.video-feature-media.has-video { background: #000; }
.video-feature-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-feature-media-label { font-size: .85rem; font-weight: 600; color: var(--color-muted); padding: 0 var(--space-md); text-align: center; }
.video-feature-play {
  position: relative;
  z-index: 1;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(29, 113, 184, .92);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
a.video-feature-media:hover .video-feature-play { background: var(--color-primary-dark); }
.video-feature-item h3 { color: #fff; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .01em; margin-bottom: .2rem; }
.video-feature-item h4 { color: #fff; font-size: 1.05rem; font-weight: 600; margin-bottom: .5rem; opacity: .95; }
.video-feature-item p { color: rgba(255, 255, 255, .9); margin-bottom: 0; }
.video-feature-divider { border: none; border-top: 1px solid rgba(255, 255, 255, .3); margin: var(--space-md) 0; }
.video-feature-outro { color: rgba(255, 255, 255, .85); margin-top: var(--space-md); font-size: .95rem; }
.block-video-feature .btn { margin-top: var(--space-sm); background: #fff; color: var(--color-primary-dark); border-color: #fff; }
.block-video-feature .btn:hover { background: rgba(255, 255, 255, .85); }

@media (max-width: 860px) {
  .video-feature-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Stats grid, variante "photo" (foto di sfondo, testo a sinistra, icone)
   ========================================================================== */
.block-stats.layout-photo {
  position: relative;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  background-size: cover;
  background-position: center;
}
.stats-photo-inner { max-width: 780px; }
.block-stats.layout-photo .eyebrow { color: rgba(255, 255, 255, .85); }
.block-stats.layout-photo h2 {
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
}
.stats-photo-intro { color: rgba(255, 255, 255, .85); max-width: 640px; }
.stats-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.stats-photo-item { display: flex; gap: .7rem; align-items: flex-start; }
.stats-photo-item svg { flex: 0 0 auto; width: 28px; height: 28px; margin-top: .1rem; }
.stats-photo-item .value { display: block; font-weight: 700; font-size: 1.3rem; font-family: var(--font-display); }
.stats-photo-item .label { display: block; font-size: .9rem; color: rgba(255, 255, 255, .85); }
/* L'allineamento a sinistra di .pollution-source per questo layout è definito
   più sotto (dopo le regole generiche .theme-dark / :not(.theme-dark) di
   .pollution-source, per vincere a parità di specificità sul cascade). */

@media (max-width: 760px) {
  .stats-photo-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CTA, variante "fullBleed" (banner a tutta larghezza, testo a sinistra)
   ========================================================================== */
.block-cta.layout-full {
  text-align: left;
  color: #fff;
  padding: var(--space-xl) 0;
}
.block-cta.layout-full.theme-primary { background: var(--color-primary); }
.block-cta.layout-full.theme-dark { background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); }
/* .cta-full-inner sta DENTRO .container (non più sulla stessa div: le due
   classi condividevano max-width/margin e si sovrascrivevano a vicenda,
   facendo perdere il centraggio a 1180px a schermi larghi — vedi fix
   2026-08-14). .container centra il box a 1180px come nell'header; questa
   regola limita solo la larghezza di lettura del testo al suo interno,
   ancorato al bordo sinistro di quel box già centrato. */
.cta-full-inner { max-width: 760px; }
.block-cta.layout-full h2 {
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}
.block-cta.layout-full p { color: rgba(255, 255, 255, .92); max-width: none; margin: 0 0 var(--space-md); }
.block-cta.layout-full .btn { background: #fff; color: var(--color-primary-dark); border-color: #fff; }
.block-cta.layout-full .btn:hover { background: rgba(255, 255, 255, .85); }

/* ==========================================================================
   Logo grid (Finanziamenti e Grants: righe di loghi + didascalia)
   ========================================================================== */
.logo-grid-title { margin-bottom: var(--space-lg); }
.logo-grid-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-2xl);
}
.logo-grid-row { border-top: 1px solid var(--color-border); padding-top: var(--space-md); }
.logo-grid-logos {
  min-height: 42px;
  margin-bottom: var(--space-sm);
}
/* Il logo occupa tutta la larghezza della sua colonna (stessa larghezza del
   blocco/elemento a cui appartiene), non un'altezza fissa: l'immagine si
   adatta in proporzione, senza deformarsi. */
.logo-grid-logos img { display: block; width: 100%; height: auto; }
.logo-grid-placeholder {
  display: inline-block;
  font-size: .76rem;
  font-weight: 600;
  color: var(--color-muted);
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: .4rem .7rem;
}
.logo-grid-caption { font-size: .88rem; color: var(--color-muted); }
.logo-grid-caption p { margin: 0 0 .4rem; }
.logo-grid-caption p:last-child { margin-bottom: 0; }
.logo-grid-disclaimer {
  margin-top: var(--space-lg);
  font-size: .78rem;
  font-style: italic;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}

@media (max-width: 760px) {
  .logo-grid-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-ink);
  color: rgba(255,255,255,.8);
  padding-top: var(--space-xl);
}

/* Scritta gigante a bassa opacità sopra i contatti, come sul sito originale
   ("BREATHE IS LIFE"). Testo modificabile dall'admin (site.watermark in
   Impostazioni globali), di default resta questa frase in inglese anche se
   il resto del sito è in italiano: è un vezzo di brand, non una traduzione. */
.footer-watermark {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 5.5rem);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .07);
  padding: var(--space-xl) var(--space-md) 0;
  overflow-wrap: break-word;
  user-select: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.footer-about h3, .footer-col h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: var(--space-sm);
}

.footer-about p { font-size: var(--fs-small); color: rgba(255,255,255,.65); max-width: 340px; }

.footer-social { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
.footer-social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  transition: background var(--transition), border-color var(--transition);
}
.footer-social a:hover { background: var(--color-primary); border-color: var(--color-primary); }

.footer-col ul li { margin-bottom: .6rem; font-size: var(--fs-small); }
.footer-col a:hover { color: #fff; }

.footer-contact { font-size: var(--fs-small); color: rgba(255,255,255,.65); }
.footer-contact p { margin-bottom: .4rem; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  font-size: .8rem;
  color: rgba(255,255,255,.5);
}
.footer-bottom a { color: rgba(255,255,255,.6); }
.footer-bottom a:hover { color: #fff; }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Blocchi di contenuto generici (usati da tutte le pagine interne)
   ========================================================================== */
.block-text-body {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.1rem;
  color: var(--color-text);
}
.block-text-cta { text-align: center; margin-top: var(--space-md); }

/* Variante scura per statsGrid (riusa .stats-grid/.stat-card) */
.block-stats.theme-dark {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
}
.block-stats.theme-dark .section-head.center h2 { color: #fff; }
.block-stats.theme-dark .eyebrow { color: rgba(255,255,255,.75); }
.block-stats.theme-dark .stat-card {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.25);
}
.block-stats.theme-dark .stat-card .value { color: #fff; }
.block-stats.theme-dark .stat-card .label { color: rgba(255,255,255,.85); }
.block-stats.theme-dark .pollution-source {
  text-align: center;
  margin-top: var(--space-lg);
  font-size: var(--fs-small);
  color: rgba(255,255,255,.7);
}
.block-stats:not(.theme-dark) .pollution-source {
  text-align: center;
  margin-top: var(--space-lg);
  font-size: var(--fs-small);
  color: var(--color-muted);
}
/* layout-photo è sempre a sinistra (testo del blocco allineato a sinistra),
   deve vincere sulle due regole sopra: stessa specificità ma dichiarata dopo. */
.block-stats.layout-photo .pollution-source {
  text-align: left;
  color: rgba(255, 255, 255, .75);
}

/* cardsGrid: riusa .recognitions-grid/.recognition-card, aggiunge data/link */
.block-cards.cols-3 .recognitions-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .block-cards.cols-3 .recognitions-grid { grid-template-columns: 1fr; }
}
.card-date {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: .2rem .6rem;
  border-radius: 999px;
  margin-bottom: .6rem;
}
.card-link {
  display: inline-block;
  margin-top: .6rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-primary);
}

/* CTA band */
.block-cta {
  text-align: center;
  background: var(--color-primary-light);
}
.block-cta h2 { margin-bottom: var(--space-xs); }
.block-cta p { max-width: 560px; margin: 0 auto var(--space-md); color: var(--color-text); }
.block-cta .btn-outline {
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.block-cta .btn-outline:hover { background: var(--color-primary-dark); color: #fff; }

/* CTA, variante "layout: photo" (foto di sfondo, testo centrato, link
   semplice invece di un bottone pieno — usato per "Contattaci subito" in
   Case Studies). Sfumatura di brand come segnaposto se "backgroundImage" non
   è ancora stata caricata, stesso meccanismo già usato per statsGrid
   layout:photo/hero. */
.block-cta.layout-photo {
  position: relative;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  background-size: cover;
  background-position: center;
}
.block-cta.layout-photo h2 { color: #fff; }
.block-cta.layout-photo p { color: rgba(255, 255, 255, .92); }
.block-cta.layout-photo .cta-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
  transition: color var(--transition);
}
.block-cta.layout-photo .cta-link:hover { color: rgba(255, 255, 255, .8); }

/* Contatti — info + form */
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.contact-info-grid h3 { font-size: 1rem; color: var(--color-primary-dark); margin-bottom: .4rem; }
.contact-info-grid p { color: var(--color-text); }

@media (max-width: 760px) {
  .contact-info-grid { grid-template-columns: 1fr; }
}

.contact-form { max-width: 640px; margin: 0 auto; }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 600px) { .contact-form-row { grid-template-columns: 1fr; } }

.contact-form label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  display: block;
  width: 100%;
  margin-top: .4rem;
  padding: .75rem .9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
}
.contact-form textarea { resize: vertical; }

.contact-form-consent {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .85rem;
  font-weight: 400;
  color: var(--color-muted);
}
.contact-form-consent input { width: auto; margin-top: .2rem; }

/* Honeypot: nascosto ai visitatori umani, resta visitabile dai bot semplici */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form-status { font-size: .9rem; min-height: 1.4em; }
.contact-form-status.success { color: var(--color-primary-dark); }
.contact-form-status.error { color: #b3261e; }

/* ==========================================================================
   Text block, variante "columns" (testo su più colonne, es. intro Tecnologia APA)
   ========================================================================== */
.block-text-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  align-items: start;
  max-width: none;
}
.block-text-column p:last-child { margin-bottom: 0; }
.block-text.layout-columns .block-text-column { color: var(--color-text); }

@media (max-width: 760px) {
  .block-text-columns { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* ==========================================================================
   Feature grid (colonne di punti elenco con chevron, es. caratteristiche APA)
   ========================================================================== */
.feature-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}
.feature-list li:last-child { margin-bottom: 0; }
.feature-bullet {
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: .2rem;
}

@media (max-width: 760px) {
  .feature-columns { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ==========================================================================
   Split feature, grafico decorativo (campo "graphic", es. "network")
   ========================================================================== */
.split-feature-media.has-graphic { padding: var(--space-lg); }
.split-feature-media.has-graphic svg { width: min(280px, 90%); height: auto; }

/* ==========================================================================
   Accordion grid (colonne con titolo + testo apribile + galleria, es.
   "Le nostre soluzioni" in Tecnologia APA)
   ========================================================================== */
.accordion-grid-intro {
  max-width: 760px;
  margin: 0 auto var(--space-xl);
  text-align: center;
  color: var(--color-text);
}
.accordion-grid-intro p:last-child { margin-bottom: 0; }

.accordion-grid-columns {
  display: grid;
  /* minmax(0, 1fr) e non solo "1fr": senza il minimo esplicito a 0, un
     contenuto largo (tipicamente proprio una galleria) può forzare una
     colonna oltre la sua quota, rompendo le "due colonne fisse" richieste. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-2xl);
}

.accordion-grid-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  padding: 0 0 var(--space-sm);
  font: inherit;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  text-align: left;
}

.accordion-grid-icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}
.accordion-grid-icon::before,
.accordion-grid-icon::after {
  content: "";
  position: absolute;
  background: var(--color-primary-dark);
  border-radius: 2px;
}
.accordion-grid-icon::before { left: 50%; top: 6px; bottom: 6px; width: 2px; transform: translateX(-50%); }
.accordion-grid-icon::after { top: 50%; left: 6px; right: 6px; height: 2px; transform: translateY(-50%); }
/* Chiuso (default): "più" (entrambe le barre). Aperto: si nasconde la barra
   verticale, lasciando solo il segno "meno" che invita a richiudere. */
.accordion-grid-column.is-open .accordion-grid-icon::before { display: none; }

.accordion-grid-collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .3s ease;
}
.accordion-grid-column:not(.is-open) .accordion-grid-collapse { grid-template-rows: 0fr; }
.accordion-grid-body { overflow: hidden; min-height: 0; }
.accordion-grid-text { padding-top: var(--space-md); }
.accordion-grid-text p:last-child { margin-bottom: 0; }

.accordion-grid-groups { margin: var(--space-md) 0 0; }
.accordion-grid-groups > div { margin-bottom: .8rem; }
.accordion-grid-groups > div:last-child { margin-bottom: 0; }
.accordion-grid-groups dt {
  display: inline;
  font-weight: 700;
  color: var(--color-ink);
}
.accordion-grid-groups dt::after { content: ": "; }
.accordion-grid-groups dd { display: inline; margin: 0; color: var(--color-text); }

.accordion-grid-list-wrap { margin-top: var(--space-md); }
.accordion-grid-list-label { font-weight: 700; color: var(--color-ink); margin-bottom: .5rem; }
.accordion-grid-list li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: .4rem;
  color: var(--color-text);
}
.accordion-grid-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Galleria: UNA foto alla volta, larga quanto la colonna, con rotazione
   automatica ogni 3s (vedi initAccordionGalleries() in render.js). Il click
   su una foto reale apre il lightbox condiviso (vedi più sotto) per scorrere
   l'intera galleria con le frecce. */
.accordion-grid-gallery { margin-top: var(--space-lg); }
.accordion-grid-gallery-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-alt);
}
.accordion-grid-gallery-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .6s ease;
}
.accordion-grid-gallery-item {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.accordion-grid-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.accordion-grid-gallery-item.is-clickable { cursor: zoom-in; }
.accordion-grid-gallery-item.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-border);
  color: var(--color-muted);
  font-size: .8rem;
  text-align: center;
  padding: var(--space-md);
}

.accordion-grid-gallery-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
}
.accordion-grid-gallery-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.accordion-grid-gallery-dot:hover,
.accordion-grid-gallery-dot:focus-visible {
  transform: scale(1.2);
  outline: none;
}
.accordion-grid-gallery-dot.is-active {
  background: var(--color-primary);
  transform: scale(1.2);
}

@media (max-width: 860px) {
  .accordion-grid-columns { grid-template-columns: 1fr; gap: var(--space-xl); }
}

@media (prefers-reduced-motion: reduce) {
  .accordion-grid-collapse { transition: none; }
  .accordion-grid-gallery-track { transition: none; }
}

/* ==========================================================================
   Lightbox condiviso per le gallery (accordionGrid): immagine grande +
   frecce prev/next per scorrere l'intera galleria di provenienza. Un solo
   elemento nel DOM, creato al primo utilizzo e riusato da tutte le gallery
   della pagina (vedi ensureGalleryLightbox() in render.js).
   ========================================================================== */
.gallery-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 20, 30, .92);
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.gallery-lightbox.is-open { display: flex; }
body.has-lightbox-open { overflow: hidden; }

.gallery-lightbox-stage {
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.gallery-lightbox-image {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.gallery-lightbox-counter { color: rgba(255, 255, 255, .75); font-size: .85rem; margin: 0; }

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
  position: absolute;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.gallery-lightbox-close:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover { background: rgba(255, 255, 255, .22); }

.gallery-lightbox-close {
  top: var(--space-md);
  right: var(--space-md);
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
}
.gallery-lightbox-prev,
.gallery-lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 1.3rem;
}
.gallery-lightbox-prev { left: var(--space-md); }
.gallery-lightbox-next { right: var(--space-md); }

@media (max-width: 640px) {
  .gallery-lightbox-prev, .gallery-lightbox-next { width: 42px; height: 42px; font-size: 1.05rem; }
  .gallery-lightbox-close { width: 38px; height: 38px; top: var(--space-sm); right: var(--space-sm); }
  .gallery-lightbox-prev { left: var(--space-sm); }
  .gallery-lightbox-next { right: var(--space-sm); }
}

/* ==========================================================================
   Logo carousel: ticker continuo, usato per validazioni e riconoscimenti
   ========================================================================== */
.logo-carousel-frame { margin: 0 auto; }
.logo-carousel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-carousel-track {
  display: flex;
  width: max-content;
  animation: logoTicker var(--logo-ticker-duration, 36s) linear infinite;
  will-change: transform;
}
.logo-carousel-group {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
}
.logo-carousel:hover .logo-carousel-track { animation-play-state: paused; }
.logo-carousel-item {
  flex: 0 0 150px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-carousel-item img { max-height: 100%; max-width: 100%; width: auto; }
.logo-carousel-item span {
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-muted);
  text-align: center;
}
.logo-carousel-empty { color: var(--color-muted); font-size: .9rem; text-align: center; width: 100%; }

.logo-carousel-banner { margin-top: var(--space-xl); border-radius: var(--radius-sm); overflow: hidden; }
.logo-carousel-banner img { width: 100%; height: auto; display: block; }
.logo-carousel-banner-empty {
  aspect-ratio: 16 / 5;
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  color: var(--color-muted);
  font-size: .85rem;
  text-align: center;
}

/* Split feature "full", banner interamente cliccabile (campo "href") */
a.split-feature-full { cursor: pointer; }

/* ==========================================================================
   Project showcase (schede progetto raggruppate per categoria, es. Case
   Studies): immagine + titolo, click apre il modale con testo rich text.
   ========================================================================== */
.project-showcase-title { margin-bottom: var(--space-xl); }

.project-category { margin-bottom: var(--space-xl); }
.project-category:last-child { margin-bottom: 0; }
.project-category-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
@media (max-width: 900px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .project-grid { grid-template-columns: 1fr; } }

.project-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.project-card-media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-alt);
}
.project-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition);
}
.project-card:hover .project-card-media img { transform: scale(1.04); }
.project-card-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-border);
  color: var(--color-muted);
  font-size: .75rem;
  text-align: center;
  padding: var(--space-sm);
}
.project-card-title { font-size: .9rem; font-weight: 600; color: var(--color-ink); }

/* ==========================================================================
   News grid (Eventi & Media): card con immagine, data, titolo, abstract e
   link "Leggi tutto" — l'intera card è cliccabile, non solo il link.
   ========================================================================== */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .news-grid { grid-template-columns: 1fr; } }

.news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 0;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.news-card-media { display: block; aspect-ratio: 16 / 10; background: var(--color-bg-alt); }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: .78rem;
  text-align: center;
  padding: var(--space-sm);
}
.news-card-body { display: flex; flex-direction: column; gap: .4rem; padding: var(--space-md); }
.news-card-date {
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.news-card-title { font-size: 1.05rem; font-weight: 700; color: var(--color-ink); line-height: 1.3; }
.news-card-abstract {
  font-size: .88rem;
  color: var(--color-muted);
  /* Limita a 3 righe con ellissi, per uniformare l'altezza delle card anche
     con abstract di lunghezza diversa. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-readmore { margin-top: .3rem; font-size: .85rem; font-weight: 600; color: var(--color-primary); }
.news-card:hover .news-card-readmore { color: var(--color-primary-dark); }

/* ==========================================================================
   Modale di contenuto condiviso (projectShowcase, newsGrid): immagine +
   riga di metadato opzionale (es. la data di una news) + titolo + testo
   rich text (grassetti, corsivi, sottolineati, link — autorati dall'admin
   col mini editor WYSIWYG). Stessa classe "has-lightbox-open" del lightbox
   delle gallery per bloccare lo scroll di sfondo mentre è aperto.
   ========================================================================== */
.content-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 20, 30, .75);
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.content-modal.is-open { display: flex; }
.content-modal-dialog {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  max-width: 720px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.content-modal-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(17, 38, 58, .06);
  color: var(--color-ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.content-modal-close:hover { background: rgba(17, 38, 58, .12); }
.content-modal-media { aspect-ratio: 16 / 9; background: var(--color-bg-alt); }
.content-modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.content-modal-body { padding: var(--space-lg); }
.content-modal-meta {
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 .4rem;
}
.content-modal-title { margin-bottom: var(--space-sm); }
.content-modal-text { color: var(--color-text); }
.content-modal-text p:last-child { margin-bottom: 0; }
.content-modal-text a { color: var(--color-primary); text-decoration: underline; }

@media (max-width: 640px) {
  .content-modal-body { padding: var(--space-md); }
}


/* ==========================================================================
   Colori configurabili dall'admin
   ========================================================================== */

/* Quando il pannello Split Feature riceve un colore chiaro personalizzato,
   passa automaticamente a testo scuro per mantenere leggibilità. */
.split-feature-panel.has-light-custom-bg { color: var(--color-ink); }
.split-feature-panel.has-light-custom-bg .eyebrow { color: var(--color-primary-dark); }
.split-feature-panel.has-light-custom-bg h2 { color: var(--color-ink); }
.split-feature-panel.has-light-custom-bg p { color: var(--color-text); }
.split-feature-panel.has-light-custom-bg .btn-outline {
  color: var(--color-primary-dark);
  border-color: currentColor;
}
.split-feature-panel.has-light-custom-bg .btn-outline:hover {
  color: #fff;
  background: var(--color-primary-dark);
}

/* Il valore configurato dall'admin prevale sui vecchi overlay theme-primary/dark. */
.split-feature-full.has-custom-overlay::before {
  background: var(--split-overlay-color, transparent) !important;
}

/* Miglior contrasto minimo per blocchi generici ai quali viene assegnato
   un colore scuro. Non forza il testo interno delle card bianche. */
.block.has-dark-block-bg { color: #fff; }
.block.has-dark-block-bg > .container > h2,
.block.has-dark-block-bg > .container > .section-head h2,
.block.has-dark-block-bg > .container > .section-head .eyebrow {
  color: #fff;
}


/* ---------------- Selettore lingua header ---------------- */
.nav-language-item {
  display: flex;
  align-items: center;
}
.nav-language-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-width: 58px;
  padding: .48rem .62rem;
  border: 1px solid rgba(17,38,58,.16);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .78rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.nav-language-btn:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-primary);
}
.nav-language-flag {
  display: inline-flex;
  width: 22px;
  height: 14px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(17,38,58,.12);
  flex: 0 0 auto;
}
.nav-language-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 900px) {
  .nav-language-item { justify-content: flex-start; }
  .nav-language-btn { margin-top: .25rem; }
}