/* ============================================================
   DESIGN TOKENS
   Questi valori di default sono sovrascritti a runtime dal blocco
   <style> generato in includes/header.php a partire da site_settings,
   cosi' il pannello admin puo' controllare tipografia/colore ovunque
   cambiando questi custom properties invece di duplicare regole CSS.
   ============================================================ */
:root {
  --font-family: 'Helvetica Neue', Arial, sans-serif;
  --font-family-heading: 'HelveticaNeueLTStd-Bold', 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'Cutive Mono', monospace, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.2;
  --letter-spacing-base: normal;
  --font-weight-base: 400;
  --color-text: #111111;
  --color-bg: #ffffff;
  --color-accent: #B08D57; /* colore secondario/interazione */
  --color-selection-bg: #B08D57;
  --color-selection-text: #ffffff;
  --radius-btn: 2px;
  --transition-fade: 0.6s ease;
}

/* ============================================================
   FONT: Helvetica Neue LT Std Bold (titoli, link header/nav)
   ------------------------------------------------------------
   E' un font a pagamento (Linotype/Monotype), non posso includerlo
   io: se possiedi la licenza e i file (.woff2), scommenta e compila
   il blocco qui sotto — altrimenti resta il fallback di sistema
   'Helvetica Neue' (praticamente identico su Mac, leggermente
   diverso su Windows/Linux dove userà Arial).

@font-face {
  font-family: 'HelveticaNeueLTStd-Bold';
  src: url('/assets/fonts/HelveticaNeueLTStd-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

/* Stesso discorso per la variante Light (usata nel copyright del footer):
   se possiedi il file .woff2 licenziato, scommenta e compila.
@font-face {
  font-family: 'HelveticaNeueLTStd-l';
  src: url('/assets/fonts/HelveticaNeueLTStd-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
*/

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* I controlli dei form non ereditano il font della pagina di default
   (i browser usano un font di sistema): questa regola forza Helvetica
   (var(--font-family), ereditato da body) su tutti i form del sito. */
input, textarea, select, button {
  font-family: inherit;
}
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-text);
  line-height: var(--line-height-base);
  background: var(--color-bg);
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--transition-fade); }
ul { list-style: none; }

/* Titoli sempre in Helvetica Neue LT Std Bold */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: 700;
}

/* Paragrafi in Cutive Mono ovunque compaia testo discorsivo */
p {
  font-family: var(--font-family-mono);
}

::selection { background: var(--color-selection-bg); color: var(--color-selection-text); }
::-moz-selection { background: var(--color-selection-bg); color: var(--color-selection-text); } /* Firefox */

/* Effetto fade-to-accent all'hover su tutti i link e bottoni interattivi */
a:hover,
.main-nav a:hover,
.footer-col a:hover,
.btn-primary:hover,
.btn-secondary:hover,
.filters a:hover {
  color: var(--color-accent);
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
}
.logo { font-family: var(--font-family-heading); font-weight: 700; letter-spacing: 1px; font-size: 1.1rem; text-transform: uppercase; }

/* Lockup fisso a sinistra: monogramma + testo verticale, sempre insieme.
   Il logo e' al 50% della dimensione precedente (44px -> 22px) sia qui
   che nel footer, come richiesto. */
.site-identity-fixed {
  position: fixed; left: 18px; top: 50%; z-index: 95;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.site-identity-fixed .site-logo-fixed {
  width: 22px; height: 22px;
}
.site-identity-fixed .site-logo-fixed img { width: 100%; height: 100%; object-fit: contain; }
.site-identity-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-family-mono);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px;
  color: var(--color-accent);
  white-space: nowrap; pointer-events: none;
}
@media (max-width: 768px) {
  .site-identity-fixed { left: 10px; gap: 10px; }
  .site-identity-fixed .site-logo-fixed { width: 18px; height: 18px; }
  .site-identity-vertical { font-size: 0.6rem; letter-spacing: 1.5px; }
}

/* Stessa immagine, riproposta nel footer, max 40x40px */
.footer-logo { display: block; width: 40px; height: 40px; margin-bottom: 14px; }
.footer-logo img { width: 100%; height: 100%; object-fit: contain; }

.main-nav a { font-family: var(--font-family-heading); font-weight: 700; font-size: 0.95rem; text-align: right; text-transform: uppercase; letter-spacing: 5.5px; padding: 12px 0; }

/* Il menu principale vive sempre dentro l'hamburger, non solo su mobile:
   l'hamburger è quindi sempre visibile e .main-nav parte sempre nascosto. */
.nav-toggle {
  display: flex;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 32px; height: 24px;
  background: none; border: none; cursor: pointer; padding: 0;
}
.nav-toggle span {
  width: 24px; height: 2px; background: var(--color-accent);
  transform-origin: center;
  transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
}
/* Animazione apertura: le due linee esterne ruotano a formare una X,
   la linea centrale sparisce; un blur momentaneo simula il motion blur. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  animation: navBlur 0.35s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  animation: navBlur 0.35s ease;
}
@keyframes navBlur {
  0%   { filter: blur(0); }
  40%  { filter: blur(2px); }
  100% { filter: blur(0); }
}

.main-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff;
  max-height: 0; overflow: hidden; transition: max-height 0.6s ease;
  border-bottom: 1px solid #eee;
}
.main-nav.open { max-height: 400px; }
/* Stessa larghezza massima (1200px) e stesso padding (20px) del
   .container/.header-inner: cosi' i link sono sempre allineati
   esattamente al bordo destro dell'hamburger, su qualunque schermo. */
.main-nav-inner {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0;
  max-width: 1200px; margin: 0 auto; padding: 8px 20px 20px;
}

/* ============================================================
   HERO / HOME
   ============================================================ */
.hero { padding: 80px 20px 60px; max-width: 800px; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 24px; font-weight: 700; }
.hero-content { font-size: 1.1rem; color: #333; margin-bottom: 32px; font-family: var(--font-family-mono); }

.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  font-family: var(--font-family-heading);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 2.5px;
  border: 1px solid transparent;
  transition: background var(--transition-fade), border-color var(--transition-fade), color var(--transition-fade);
}
.btn-primary { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.btn-secondary { border: 1px solid var(--color-text); color: var(--color-text);  }
.btn-primary:hover, .btn-secondary:hover {
  background: #fff;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ============================================================
   PORTFOLIO GRID
   ============================================================ */
.portfolio-grid-section { padding: 40px 20px 80px; }
.portfolio-grid-section h2 { margin-bottom: 32px; font-size: 1.8rem; }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* default a 3 colonne */
  gap: 24px;
  margin-bottom: 40px;
}
/* Varianti scelte da admin: aggiungere la classe sul contenitore .portfolio-grid
   -> .cols-1 (una colonna, grande formato) oppure .cols-2 (due colonne) */
.portfolio-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.portfolio-grid.cols-1 { grid-template-columns: 1fr; max-width: 900px; margin-left: auto; margin-right: auto; }

@media (max-width: 992px) { .portfolio-grid:not(.cols-1) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .portfolio-grid { grid-template-columns: 1fr; } }

.portfolio-item { display: block; overflow: hidden; }
.portfolio-item-img { overflow: hidden; aspect-ratio: 4/3; background: #f2f2f2; border-radius: var(--radius-btn); }
.portfolio-item-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.portfolio-item:hover .portfolio-item-img img { transform: scale(1.05); }
.portfolio-item-caption { padding: 14px 4px; display: flex; flex-direction: column; gap: 4px; }
.portfolio-item-caption .cat { font-family: var(--font-family-heading); font-size: 0.75rem; text-transform: uppercase; color: #888; letter-spacing: 0.5px; }
.portfolio-item-caption .title { font-family: var(--font-family-mono); font-weight: 600; transition: color var(--transition-fade); }
.portfolio-item:hover .portfolio-item-caption .title { color: var(--color-accent); }

/* Filtri portfolio: rettangolari, angoli smussati 3px, fade to accent all'hover */
.filters a {
  padding: 8px 16px; border: 1.5px solid #ddd; border-radius: var(--radius-btn); font-size: 0.85rem;
  font-family: var(--font-family-heading);
  transition: color var(--transition-fade), border-color var(--transition-fade), background var(--transition-fade);
}
.filters a.active, .filters a:hover { background: #fff; color: var(--color-accent); border-color: var(--color-accent); }

/* ============================================================
   PAGE CONTENT GENERICO (about, blog, contatti)
   ============================================================ */
.page-content { padding: 60px 20px; max-width: 900px; }
.page-content h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 28px; }
.rich-text p { margin-bottom: 18px; }

/* Frasi-manifesto: brevi affermazioni ad effetto (una riga o due) usate
   nell'about per scandire il testo. Applicare la classe "statement" al
   paragrafo dal rich text editor per attivare l'enfasi. */
.rich-text p.statement {
  font-size: 1.3rem;
  font-style: italic;
  color: var(--color-text);
  border-left: 2px solid var(--color-accent);
  padding-left: 20px;
  margin: 36px 0;
  max-width: 640px;
}

.filters { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 36px; }

/* ============================================================
   PROGETTO SINGOLO (griglia dinamica dei blocchi)
   ============================================================ */
.project-hero { padding: 60px 20px 40px; max-width: 900px; }
.project-hero .cat { font-family: var(--font-family-heading); font-size: 0.85rem; text-transform: uppercase; color: #888; }
.project-hero h1 { font-family: var(--font-family-mono); font-size: clamp(2rem, 5vw, 3rem); margin: 12px 0; }
.project-hero .excerpt { font-size: 1.1rem; color: #444; }

.project-blocks { display: flex; flex-direction: column; gap: 32px; padding-bottom: 60px; }
.block-image-full { overflow: hidden; }
.block-image-full img {
  width: 100%;
  transform: scale(1.08); /* margine per il movimento parallasse senza scoprire i bordi */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.block-image-full:not(.parallax-active) img { transform: none; } /* fallback statico se disattivato da backend o JS assente */
.block-image-half { max-width: 900px; }
.block-text { max-width: 800px; font-size: 1.05rem; }
.block-gallery { display: grid; gap: 16px; }
.gallery-2 { grid-template-columns: 1fr 1fr; }
.gallery-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) { .gallery-2, .gallery-3 { grid-template-columns: 1fr; } }
/* Il rapporto 16:9 si dichiara con aspect-ratio, non con il vecchio trucco
   del padding-top: 56.25%. Quella percentuale si calcola sulla larghezza del
   contenitore ESTERNO, non su quella del riquadro: dentro .container il video
   incorniciato veniva 900x653 invece di 900x506, quindi non era 16:9 e il
   player ci metteva le bande nere. */
.video-wrapper { position: relative; aspect-ratio: 16 / 9; max-width: 900px; margin: 0 auto; }
.video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Video a larghezza piena: il blocco non passa dal contenitore centrato,
   quindi qui si toglie anche il tetto di 900px del riquadro, altrimenti il
   video resterebbe stretto in mezzo a una fascia larga. Il rapporto 16:9
   resta, cosi' l'altezza cresce insieme alla larghezza. */
.block-video.is-full { width: 100%; padding: 0; }
.block-video.is-full .video-wrapper { max-width: none; margin: 0; }
.project-nav { padding: 20px; }

/* Immagine + testo affiancati */
.block-image-text {
  display: flex; align-items: center; gap: 40px; max-width: 1100px;
}
.block-image-text.reverse { flex-direction: row-reverse; }
.image-text-img, .image-text-copy { flex: 1; }
.image-text-img img { width: 100%; border-radius: 4px; }
.image-text-copy { font-size: 1.05rem; }
@media (max-width: 700px) {
  .block-image-text, .block-image-text.reverse { flex-direction: column; gap: 20px; }
}

/* Doppio blocco di testo
   FIX BUG: gli item di una grid hanno di default min-width:auto, quindi
   un contenuto largo (parola lunga, immagine, tabella incollata nel rich
   text) non si comprimeva mai sotto la larghezza della colonna e
   sfondava il layout ("il doppio testo affiancato non funziona").
   min-width:0 permette alla colonna di restringersi correttamente. */
.block-text-double {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1100px;
}
.block-text-double > .rich-text { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 700px) {
  .block-text-double { grid-template-columns: 1fr; gap: 24px; }
}

/* Interlinee configurabili tra elementi di un blocco progetto/about.
   L'admin puo' impostare --block-gap sul singolo blocco (style inline
   generato dal pannello) per override puntuale rispetto al gap globale. */
.project-blocks, .page-blocks { gap: var(--block-gap, 32px); }
.block[style*="--gap-override"] { margin-top: var(--gap-override, 0); }

/* Immagine grande con effetto parallasse.
   Disattivabile lato admin: se il blocco non ha la classe .has-parallax
   (flag "parallasse attivo" nel pannello), l'immagine resta statica. */
.block-image-parallax {
  position: relative; overflow: hidden; height: 70vh; min-height: 420px;
}
.block-image-parallax img {
  position: absolute; top: -10%; left: 0; width: 100%; height: 120%;
  object-fit: cover; will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.block-image-parallax:not(.has-parallax) { height: auto; min-height: 0; }
.block-image-parallax:not(.has-parallax) img { position: static; height: auto; }

/* Background pieno larghezza / gradiente a 4 angoli sui blocchi.
   L'admin definisce i 4 colori d'angolo, generiamo il gradiente inline
   via style="--grad-tl / --grad-tr / --grad-bl / --grad-br" e questa
   classe li combina in due linear-gradient sovrapposti. */
.block-bg-full { width: 100%; padding: 60px 20px; }
.block-bg-gradient {
  background:
    linear-gradient(to right, var(--grad-tl, transparent), var(--grad-tr, transparent)),
    linear-gradient(to right, var(--grad-bl, transparent), var(--grad-br, transparent));
  background-blend-mode: normal;
}

/* Blocco collaboratori: si adatta al numero di elementi, invariato. */
.block-collaborators {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px; align-items: center;
}

/* Blocco partner: titolo opzionale, fascia di sfondo a tutta larghezza e
   griglia SEMPRE a 4 colonne, allineata a bandiera a sinistra.
   Prima usava auto-fit, che allarga gli elementi fino a riempire la riga:
   con due partner i loghi si distribuivano su tutta la larghezza invece di
   restare a sinistra. Con 4 colonne fisse partono sempre da sinistra, che
   siano 2 o 4, e dal quinto vanno a capo. */
.block-partners .container { width: 100%; }
.partners__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px; align-items: center; justify-items: start;
}
.collaborator-item, .partner-item {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
}
.collaborator-item img, .partner-item img { max-height: 60px; width: auto; margin: 0 auto; filter: grayscale(1); transition: filter var(--transition-fade); }
.collaborator-item:hover img, .partner-item:hover img { filter: grayscale(0); }
.collaborator-item .name, .partner-item .name { font-size: 0.9rem; font-weight: 600; }
.collaborator-item a, .partner-item a { font-size: 0.8rem; }
.collaborator-item a:hover, .partner-item a:hover { color: var(--color-accent); }

/* Bandiera a sinistra per i partner. Va DOPO la regola qui sopra che centra
   entrambi: stessa specificita', vince l'ultima scritta. */
.partner-item { align-items: flex-start; text-align: left; }
.partner-item img { margin: 0; }
.partners__heading { margin-bottom: 36px; font-size: 1.8rem; text-align: left; }

.block-clients-logos .container { width: 100%; }

/* Respiro della fascia colorata, solo quando un colore di sfondo c'e'
   davvero: i blocchi senza sfondo mantengono la spaziatura di prima. */
.block-partners.block-has-bg,
.block-clients-logos.block-has-bg { padding-top: 60px; padding-bottom: 60px; }

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

/* Blocco "loghi clienti" — prova sociale, griglia SEMPRE a 4 colonne
   (a differenza di collaboratori/partner che si adattano al numero di
   elementi), come richiesto. Su schermi piccoli scende a 2 colonne.
   BUG FIX: "padding: 20px 0" (forma abbreviata) azzerava anche il
   padding laterale ereditato da .container sullo stesso elemento,
   incollando i loghi al bordo su smartphone (e su ogni larghezza).
   Ora si toccano solo alto/basso, i lati restano quelli di .container. */
.block-clients-logos { padding-top: 20px; padding-bottom: 20px; }
/* Allineato a sinistra come i loghi: un titolo centrato sopra loghi a
   bandiera sinistra si legge come un errore di impaginazione. */
.clients-logos__heading { margin-bottom: 28px; font-size: 1.4rem; text-align: left; }
.clients-logos__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px; align-items: center;
}
/* Padding solo sopra e sotto: quello laterale spingeva il primo logo 8px a
   destra, disallineandolo dal titolo. La distanza fra i loghi la da' il gap. */
.clients-logos__item { display: flex; align-items: center; justify-content: flex-start; padding: 8px 0; }
.clients-logos__item img {
  max-height: 56px; width: auto; margin: 0; filter: grayscale(1); opacity: 0.75;
  transition: filter var(--transition-fade), opacity var(--transition-fade);
}
.clients-logos__item:hover img { filter: grayscale(0); opacity: 1; }
@media (max-width: 900px) { .clients-logos__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .clients-logos__grid { grid-template-columns: 1fr; } }

/* Blocco "anteprima blog" — griglia a 3 colonne (titolo, teaser, tag),
   bottone "Scopri tutti gli articoli" sotto, coerente con l'esempio.
   BUG FIX: stesso problema di sopra — "padding: 40px 0" toglieva il
   padding laterale di .container, i testi arrivavano fino al bordo
   schermo su mobile. Ora tocca solo alto/basso. */
.block-blog-preview { padding-top: 40px; padding-bottom: 40px; }
.blog-preview__heading { margin-bottom: 32px; font-size: 1.8rem; }
.blog-preview__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px;
}
@media (max-width: 900px) { .blog-preview__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-preview__grid { grid-template-columns: 1fr; } }
.blog-preview__item { display: block; }
.blog-preview__img { aspect-ratio: 4/3; background: var(--color-accent); overflow: hidden; margin-bottom: 16px; }
.blog-preview__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-preview__item:hover .blog-preview__img img { transform: scale(1.05); }
.blog-preview__title {
  display: block; font-family: var(--font-family-heading); font-weight: 700;
  font-size: 1.1rem; text-transform: uppercase; margin-bottom: 8px;
}
.blog-preview__teaser { font-family: var(--font-family-mono); font-size: 0.95rem; color: #333; margin-bottom: 10px; }
.blog-preview__tags { font-family: var(--font-family-mono); font-size: 0.75rem; letter-spacing: 1px; color: #999; text-transform: uppercase; }
.blog-preview__item:hover .blog-preview__title { color: var(--color-accent); }

/* Blocco "value proposition" — icona, titolo, testo HTML per colonna,
   3 colonne su desktop; personalizzabile interamente da backend. */
.block-value-proposition { padding: 70px 0; background: #111; }
.value-proposition__heading { color: #fff; text-align: center; margin-bottom: 50px; font-size: 1.8rem; }
.value-proposition__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
@media (max-width: 900px) { .value-proposition__grid { grid-template-columns: 1fr; gap: 48px; } }
.value-proposition__item { color: #eee; }
/* RICHIESTA 8 — icona centrata sul blocco di testo, filetto oro a 5px sotto
   l'icona, largo quanto tutta la colonna di testo che sta sotto. Il filetto e'
   un elemento vuoto dedicato (span.value-proposition__rule) invece di un
   border sull'icona: cosi' la sua larghezza e' quella del box, non quella
   dell'immagine, che e' piu' stretta e variabile da icona a icona. */
.value-proposition__icon {
  max-height: 81px; width: auto;  /* 56px di partenza + i 25px richiesti */
  display: block; margin-left: auto; margin-right: auto; margin-bottom: 5px;
}
.value-proposition__rule {
  display: block; width: 100%; height: 1px;
  background: var(--color-accent);
  margin: 0 0 14px;
}
.value-proposition__item h3 { color: var(--color-accent); font-size: 1.15rem; margin-bottom: 14px; }
.value-proposition__item .rich-text { font-family: var(--font-family-mono); font-size: 0.95rem; line-height: 1.6; color: #ccc; }

/* Bottone CTA inline, inseribile ovunque tra i blocchi */
.block-cta-button { margin: 8px 0; }
/* Varianti dimensione, applicate dal pannello admin (campo "size" del blocco cta_button) */
.block-cta-button .btn-primary.cta-size-half,
.block-cta-button .btn-secondary.cta-size-half { display: block; width: 50%; text-align: center; }
.block-cta-button .btn-primary.cta-size-full,
.block-cta-button .btn-secondary.cta-size-full { display: block; width: 100%; text-align: center; }
@media (max-width: 600px) {
  .block-cta-button .btn-primary.cta-size-half { width: 100%; } /* su mobile il 50% non ha senso, si espande */
}

/* CTA di chiusura progetto */
.block-project-cta {
  text-align: left; padding: 70px 20px; background: #fafafa;
}
.block-project-cta .cta-eyebrow {
  display: block; font-size: 0.78rem; /* 1.3rem - 40% */
  letter-spacing: 2px; color: #000; margin-bottom: 14px; font-family: 'HelveticaNeueLTStd-Bold', 'Helvetica Neue', Arial, sans-serif; font-weight: bold;
}
.block-project-cta h3 { font-size: clamp(0.78rem, 1.92vw, 1.08rem); /* clamp originale - 40% */ max-width: 613px; margin: 0 0 28px; line-height: 1.15; font-style: italic; font-weight: initial; }
.block-project-cta .cta-links { display: flex; gap: 16px; justify-content: flex-start; flex-wrap: wrap; }

/* Breadcrumb + navigazione progetto precedente/successivo */
.breadcrumb { font-size: 0.8rem; color: #888; padding: 20px 20px 0; font-family: 'HelveticaNeueLTStd-Bold', 'Helvetica Neue', Arial, sans-serif; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb .sep { margin: 0 6px; }

/* Box con bordo, diviso in 3 celle (precedente / torna al portfolio /
   successivo), separate da un bordo verticale — stile a griglia lineare,
   coerente col resto dell'identita' grafica (angoli squadrati, bordo
   colore accento). Le celle vuote (nessun progetto prec./succ.) restano
   comunque nella griglia per mantenere le proporzioni. */
/* BUG FIX (mobile): margin orizzontale (20px) qui rimosso — sommato al
   width:100% ereditato da .container (stessa classe sull'elemento),
   un margine non-auto sui lati fa eccedere la larghezza reale oltre
   quella dello schermo (overflow orizzontale), comprimendo/tagliando i
   bottoni "precedente/successivo" su mobile. Il centraggio e il
   respiro laterale restano affidati interamente a .container
   (margin:0 auto + padding:0 20px), coerente con tutti gli altri
   blocchi della pagina. */
.project-prev-next {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  margin-top: 40px; border: 1px solid var(--color-accent);
}
.project-prev-next .prev,
.project-prev-next .next,
.project-prev-next > a.btn-secondary,
.project-prev-next > span {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 22px 16px; text-align: center;
  font-family: var(--font-family-heading); font-weight: 700;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1.5px;
  border-right: 1px solid var(--color-accent);
}
.project-prev-next > a.btn-secondary {
  /* "Torna al portfolio", cella centrale: nessun bordo, nessuno sfondo/
     colore proprio del .btn-secondary generico, per restare coerente
     con le celle laterali del box. */
  border: none; border-right: 1px solid var(--color-accent);
  background: none; padding: 22px 16px;
}
.project-prev-next .next { border-right: none; }
/* RICHIESTA 6 — quando manca il progetto precedente (o il successivo) la
   cella vuota non viene piu' stampata: il box si riduce a 2 celle, o a 1 se
   il progetto e' l'unico. La classe cells-N e' messa dal template. */
.project-prev-next.cells-2 { grid-template-columns: 1fr 1fr; }
.project-prev-next.cells-1 { grid-template-columns: 1fr; }
.project-prev-next > *:last-child { border-right: none; }
.project-prev-next .prev::before { content: '←'; font-size: 1rem; order: -1; }
.project-prev-next .next::after { content: '→'; font-size: 1rem; }
.project-prev-next a:hover { color: var(--color-accent); }
@media (max-width: 700px) {
  .project-prev-next { grid-template-columns: 1fr; }
  .project-prev-next .prev,
  .project-prev-next .next,
  .project-prev-next > a.btn-secondary { border-right: none; border-bottom: 1px solid var(--color-accent); }
  .project-prev-next .next { border-bottom: none; }
}

/* Bottone torna su: appare solo su pagine lunghe (JS aggiunge .visible
   quando lo scroll supera 2500px), poco invasivo, angolo destro */
.back-to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(17,17,17,0.85); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity var(--transition-fade), transform var(--transition-fade), background var(--transition-fade);
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--color-accent); }
.back-to-top svg { width: 16px; height: 16px; }

/* Contenitore blocchi su Home/About (stesso spacing dei blocchi progetto) */
.page-blocks { display: flex; flex-direction: column; gap: 32px; padding: 0 0 40px; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 24px; }
@media (max-width: 700px) { .blog-list { grid-template-columns: 1fr; } }
.blog-item img { aspect-ratio: 16/9; object-fit: cover; margin-bottom: 14px; }
.blog-item .date { font-size: 0.8rem; color: #888; }

/* Le date di pubblicazione in Helvetica, sia nell'elenco del blog sia in
   cima all'articolo. Scritte esplicitamente e non lasciate all'eredita' del
   body: cosi' restano Helvetica anche se un domani dal pannello si cambia il
   carattere di base del sito. */
.blog-item .date,
.blog-single .date { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.blog-single .date { display: block; font-size: 0.8rem; color: #888; margin-bottom: 10px; }
.blog-item h2 { margin: 8px 0; font-size: 1.3rem; }
.blog-single .cover { margin: 20px 0; }

/* ============================================================
   FORM CONTATTI
   ============================================================ */
/* BUG FIX (mobile): gap ridotto da 18px a 12px, sotto il massimo di
   15px richiesto — vale sia tra i gruppi di campi (contact-form) sia
   tra Nome e Cognome quando si impilano in colonna su mobile (form-row),
   coerente con lo stesso valore già usato nella CTA prefooter. */
.contact-form { max-width: none; width: 100%; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.form-row { display: flex; gap: 12px; }
@media (max-width: 600px) { .form-row { flex-direction: column; } }

.form-group { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.form-group label { font-size: 0.85rem; font-weight: 600; }
.form-group input, .form-group textarea {
  /* Stesso padding (14px 16px) del form prefooter-cta, per coerenza in tutto il sito. */
  padding: 14px 16px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; font-family: inherit;
  box-sizing: border-box;
}
.form-group input:focus, .form-group textarea:focus { outline: 2px solid #111; }
.form-check { flex-direction: row; align-items: center; gap: 10px; }
.form-check label { font-weight: 400; font-size: 0.9rem; }
.hp-field { position: absolute; left: -9999px; top: -9999px; }

.alert { padding: 16px 20px; border-radius: 4px; margin-bottom: 24px; }
.alert-success { background: #e6f7ec; color: #196c33; }
.alert-error { background: #fdeaea; color: #a3221c; }
.alert-error ul { padding-left: 18px; list-style: disc; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: #111; color: #eee; margin-top: 60px; }
.footer-inner {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px;
  padding: 50px 20px 30px;
}
@media (max-width: 700px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-col h4 { margin-bottom: 20px; font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase; }
.footer-col strong { display: block; margin-bottom: 10px; line-height: 1.5; }
.footer-col strong, .footer-col p { font-family: var(--font-family-mono); }
.footer-col p { line-height: 1.6; color: #bbb; }
/* RICHIESTA 2 — distanza verticale fra una voce e l'altra (Portfolio, Blog,
   Contatti e i link della colonna contatti) esattamente 5px: il padding
   verticale, che prima ne aggiungeva 3+3 fra due voci adiacenti, e' azzerato
   e lo spazio e' dato una volta sola dal margine fra elementi consecutivi. */
/* Il combinatore > non e' un dettaglio: i link Portfolio/Blog/Contatti e la
   mail sono figli diretti della colonna, i social stanno dentro
   .footer-social. Senza il >, il margine di 5px colpiva anche Behance e
   LinkedIn (ma non Instagram, che e' il primo) e li faceva scendere: era il
   disallineamento visibile in fondo alla pagina. */
.footer-col > a { display: block; padding: 0; line-height: 1.4; color: #ccc; font-family: var(--font-family-mono); }
.footer-col > a + a { margin-top: 5px; }
.footer-col > h4 + a { margin-top: 0; }
.footer-col a:hover { color: var(--color-accent); }
.footer-bottom { padding: 20px; border-top: 1px solid #333; font-size: 0.8rem; color: #888; }
.footer-copyright { font-family: 'HelveticaNeueLTStd-l', 'Helvetica Neue', Arial, sans-serif; }

/* Riga social opzionale (Instagram/Behance gia' presenti + Vimeo/YouTube/TikTok) */
.footer-social { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; align-items: baseline; }
.footer-social a { margin-top: 0; }
.footer-social a { color: #ccc; font-size: 0.85rem; font-family: var(--font-family-mono); }
.footer-social a:hover { color: var(--color-accent); }


/* ============================================================
   LOADER — triangolo equilatero disegnato allo stroke (lato 37px)
   ============================================================ */
.page-loader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; visibility: visible;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.page-loader.is-hidden { opacity: 0; visibility: hidden; }
.page-loader__triangle {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 111; /* 3 lati x 37px */
  stroke-dashoffset: 111;
  animation: loaderDraw 1.1s ease-in-out infinite;
}
@keyframes loaderDraw {
  0%   { stroke-dashoffset: 111; }
  50%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -111; }
}

/* ============================================================
   BLOG SHARE — condivisione articolo (Instagram, Facebook,
   LinkedIn, X, copia link). Icone monocrome 22x22, stesso
   trattamento hover degli altri elementi interattivi del sito
   (fade verso --color-accent). Instagram non ha un intent web
   ufficiale per la condivisione di URL esterni: il suo pulsante
   copia il link e apre l'app, coerente con come Instagram stesso
   gestisce la condivisione da altri siti.
   ============================================================ */
.blog-share { display: flex; align-items: center; gap: 14px; margin: 32px 0; }
.blog-share__label { font-size: 0.85rem; color: #777; margin-right: 4px; }
.blog-share a,
.blog-share button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; color: var(--color-text);
  background: none; border: none; padding: 0; cursor: pointer;
  transition: color var(--transition-fade, 0.25s ease);
}
.blog-share a:hover,
.blog-share button:hover { color: var(--color-accent); }
.blog-share svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.blog-share__copied {
  font-size: 0.8rem; color: var(--color-accent); opacity: 0;
  transition: opacity 0.3s ease; margin-left: -6px;
}
.blog-share__copied.is-visible { opacity: 1; }

/* ============================================================
   PAGE TRANSITION — fade morbido in entrata/uscita
   ------------------------------------------------------------
   Il <body> nasce con la classe "js-page-enter" (impostala
   direttamente nel tag <body> in header.php, es.
   <body class="js-page-enter">) cosi' la pagina e' invisibile
   al primo paint senza flash. main.js la rimuove subito dopo
   il DOMContentLoaded (fade-in). In uscita, main.js intercetta
   il click sui link interni, aggiunge "js-page-leave" (fade-out)
   e naviga solo dopo la durata di --page-transition-duration.
   ============================================================ */
:root {
  --page-transition-duration: 0.45s;
}
body {
  opacity: 1;
  transition: opacity var(--page-transition-duration) ease;
}
body.js-page-enter,
body.js-page-leave {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  body, body.js-page-enter, body.js-page-leave { opacity: 1; transition: none; }
}

/* ============================================================
   SCROLL REVEAL — slide-up + fade-in morbido
   ------------------------------------------------------------
   Applicare la classe "reveal" a foto, bottoni, blocchi progetto
   ecc. (via PHP nei template o via JS a runtime). main.js con
   IntersectionObserver aggiunge "in-view" quando l'elemento entra
   nel viewport. --reveal-delay (impostabile inline per elemento,
   es. style="--reveal-delay:0.15s") permette lo stagger tra piu'
   elementi vicini (es. una griglia di foto).
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   TYPEWRITER + FADE-IN — testi home in scrittura progressiva
   ------------------------------------------------------------
   main.js avvolge ogni carattere del testo in un <span class="tw-char">
   dentro un contenitore con classe "typewriter", impostando su
   ciascuno span la custom property --tw-index (0,1,2...) via JS.
   Quando il blocco entra nel viewport (IntersectionObserver),
   riceve "is-typing" e i caratteri fanno fade-in in sequenza,
   uno dopo l'altro, simulando la battitura a macchina. Il
   cursore lampeggiante finale e' opzionale (span.tw-cursor).
   ============================================================ */
.typewriter .tw-char {
  opacity: 0;
  display: inline-block;
  white-space: pre;
}
.typewriter.is-typing .tw-char {
  animation: twCharIn 0.4s ease forwards;
  animation-delay: calc(var(--tw-index, 0) * var(--tw-speed, 35ms));
}
@keyframes twCharIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tw-cursor {
  display: inline-block; width: 2px; height: 0.9em; margin-left: 2px;
  background: var(--color-accent); vertical-align: -0.1em;
  animation: twBlink 0.9s steps(1) infinite;
}
@keyframes twBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .typewriter .tw-char { opacity: 1; animation: none; transform: none; }
  .tw-cursor { display: none; }
}

/* ============================================================
   COOKIE BANNER — barra bassa, non invasiva
   ============================================================ */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px max(20px, calc((100% - 1200px) / 2 + 20px));
  background: rgba(17,17,17,0.97); color: #eee;
  border-top: 1px solid #333;
  transform: translateY(0); opacity: 1;
  transition: opacity var(--transition-fade), transform var(--transition-fade);
}
.cookie-banner.is-hidden { opacity: 0; transform: translateY(100%); pointer-events: none; }
.cookie-banner p { flex: 1 1 420px; font-size: 0.85rem; line-height: 1.5; font-family: var(--font-family-mono); margin: 0; }
.cookie-banner p a { color: var(--color-accent); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 12px; flex: 0 0 auto; }
.cookie-banner .btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #000; }
.cookie-banner .btn-primary:hover { background: #fff; color: var(--color-accent); }
.cookie-banner .btn-secondary { border-color: #555; color: #ccc; }
.cookie-banner .btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }
@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-banner__actions { justify-content: center; }
}

/* ============================================================
   COMPATIBILITA' CROSS-BROWSER (Firefox / Safari / Chrome)
   ------------------------------------------------------------
   - user-select con prefisso per Safari meno recenti
   - appearance: none con prefisso Safari, per uniformare checkbox/
     bottoni sotto stili personalizzati senza il "moz-focusring" di
     Firefox o lo stile nativo di Safari su iOS
   - min-height:-webkit-fill-available per iOS Safari (barra indirizzi
     dinamica) sulle sezioni a piena altezza
   ============================================================ */
input[type="checkbox"] {
  -webkit-appearance: auto; -moz-appearance: auto; appearance: auto;
}
button, .btn-primary, .btn-secondary {
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.block-image-parallax { min-height: -webkit-fill-available; }

/* ============================================================
   POPUP "MESSAGGIO INVIATO" — conferma dopo l'invio di un form
   ------------------------------------------------------------
   Overlay a tutto schermo + card centrata, coerente con l'identità
   grafica del sito (bordo/accento oro, font Helvetica/Cutive Mono).
   Mostrato via JS (main.js: showSuccessPopup) dopo un invio riuscito
   del form contatti (pagina Contatti o CTA prefooter).
   ============================================================ */
.success-popup-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; transition: opacity var(--transition-fade);
}
.success-popup-overlay.is-visible { opacity: 1; }
.success-popup {
  background: #fff; border: 1px solid var(--color-accent);
  max-width: 420px; width: 100%; padding: 40px 32px;
  text-align: center;
  transform: translateY(16px); transition: transform var(--transition-fade);
}
.success-popup-overlay.is-visible .success-popup { transform: translateY(0); }
.success-popup__icon {
  width: 48px; height: 48px; margin: 0 auto 20px; border-radius: 50%;
  border: 1px solid var(--color-accent); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
}
.success-popup__icon svg { width: 22px; height: 22px; }
.success-popup p {
  font-family: var(--font-family-mono); font-size: 1rem; line-height: 1.6;
  color: var(--color-text); margin-bottom: 28px;
}
.success-popup button {
  background: var(--color-text); color: var(--color-bg); border: 1px solid var(--color-text);
  padding: 12px 32px; font-family: var(--font-family-heading); font-weight: 600;
  text-transform: uppercase; font-size: 0.8rem; letter-spacing: 2px; border-radius: var(--radius-btn);
  cursor: pointer; transition: background var(--transition-fade), border-color var(--transition-fade), color var(--transition-fade);
}
.success-popup button:hover { background: #fff; color: var(--color-accent); border-color: var(--color-accent); }
@media (max-width: 480px) { .success-popup { padding: 32px 24px; } }

/* ============================================================
   VALIDAZIONE CAMPI OBBLIGATORI — alert inline
   ------------------------------------------------------------
   Usato da main.js su ogni form con campi [required]: al posto del
   fumetto nativo del browser (poco leggibile/incoerente tra i 3
   browser su mobile), mostra un messaggio rosso ben visibile sotto
   il campo mancante e ne evidenzia il bordo.
   ============================================================ */
.field-error {
  display: block; margin-top: 4px; font-size: 0.78rem;
  color: #e0554f; font-family: var(--font-family-mono);
  flex-basis: 100%; /* nella riga checkbox (flex-direction:row) va comunque a capo */
}
.prefooter-cta .field-error { color: #ff8a84; }
.form-group input.field-invalid, .form-group textarea.field-invalid,
.prefooter-cta input.field-invalid, .prefooter-cta textarea.field-invalid {
  border-color: #e0554f !important;
}
.form-check.field-invalid-check { outline: 1px solid #e0554f; outline-offset: 4px; border-radius: 4px; }

/* ============================================================
   LANGUAGE SWITCH
   ============================================================ */
/* RICHIESTA 5 — il box attorno a EN/IT sembrava scomposto per due motivi,
   entrambi corretti qui:
   1) il padding 4px 10px non veniva mai applicato: .main-nav a (0,1,1) e' piu'
      specifico di .lang-switch (0,1,0) e vinceva col suo "padding: 12px 0",
      quindi il riquadro nasceva alto e senza respiro laterale. Ora la regola e'
      scritta come .main-nav .lang-switch, che vince;
   2) il letter-spacing di 5.5px ereditato dal menu aggiunge spazio anche DOPO
      l'ultima lettera, spostando il testo a sinistra dentro il box. Con un
      tracking proprio piu' contenuto e un padding destro ridotto della stessa
      quantita' (text-indent compensativo) le due lettere restano centrate. */
.lang-switch,
.main-nav .lang-switch {
  display: inline-block;
  align-self: flex-end;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 1px; text-indent: 1px; /* compensa lo spazio finale del tracking */
  line-height: 1;
  padding: 7px 11px 6px;
  margin-top: 10px;
  border: 1px solid var(--color-accent); color: var(--color-accent) !important;
  border-radius: var(--radius-btn);
  text-align: center;
  transition: background var(--transition-fade), color var(--transition-fade);
}
.lang-switch:hover,
.main-nav .lang-switch:hover { background: var(--color-accent); color: #fff !important; }

/* ============================================================
   BEHANCE FEED (home)
   ============================================================ */
.behance-feed { padding: 20px 20px 80px; }
.behance-feed__titolo { margin-bottom: 24px; font-size: 1.8rem; }
.behance-feed__griglia {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.behance-feed__item {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius-btn);
  opacity: 0; transform: translateY(20px); animation: behanceFadeIn 0.6s ease forwards;
}
@keyframes behanceFadeIn { to { opacity: 1; transform: translateY(0); } }
.behance-feed__item img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.4s ease;
}
.behance-feed__item:hover img { transform: scale(1.06); }
.behance-feed__overlay {
  position: absolute; inset: 0; background: rgba(17,17,17,0.55);
  opacity: 0; display: flex; align-items: flex-end; padding: 16px;
  transition: opacity var(--transition-fade);
}
.behance-feed__item:hover .behance-feed__overlay { opacity: 1; }
.behance-feed__testo { color: #fff; font-weight: 600; font-size: 0.95rem; }

/* ============================================================
   BEHANCE EMBED GRID + HOOK (portfolio)
   ============================================================ */
.behance-hook, .contatti-hook { text-align: center; margin: 50px 0; }
.behance-hook__testo, .contatti-hook__testo { font-size: 1.1rem; line-height: 1.4; }
.behance-hook__testo a, .contatti-hook__testo a { font-weight: 600; }
.behance-hook__testo a:hover, .contatti-hook__testo a:hover { color: var(--color-accent); }

.behance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; line-height: 0; }
.behance-grid__cell { aspect-ratio: 4/3; overflow: hidden; }
.behance-grid__cell iframe { display: block; width: 100%; height: 100%; border: none; }
@media (max-width: 700px) { .behance-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   GOOGLE REVIEWS (footer)
   ============================================================ */
.google-reviews { text-align: center; padding: 40px 20px; border-top: 1px solid #222; }
.google-reviews__stato { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 16px; }
.google-reviews__voto { font-size: 1.4rem; font-weight: 700; color: #fff; }
.google-reviews__conteggio { font-size: 0.9rem; color: #999; }
.google-reviews__barra { width: 160px; height: 4px; background: rgba(255,255,255,0.15); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.google-reviews__barra-interna { height: 100%; background: var(--color-accent); }
.google-reviews__hook { font-size: 1rem; color: #ccc; margin-bottom: 16px; }
.google-reviews__bottone {
  display: inline-block; padding: 12px 26px; border-radius: var(--radius-btn);
  font-weight: 600; background: transparent; color: #fff; border: 1px solid #fff;
  transition: background var(--transition-fade), border-color var(--transition-fade), color var(--transition-fade);
}
.google-reviews__bottone:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* ============================================================
   CTA "CONTATTAMI" PRE-FOOTER — full width, sfondo nero, compatto
   ------------------------------------------------------------
   Componente riutilizzabile (includes/prefooter-cta.php), stesso
   aspetto in ogni pagina in cui compare: home, portfolio, progetto,
   about, blog, articolo. Sempre l'ultimo elemento prima del footer,
   senza margine tra i due (vedi .site-footer.no-gap qui sotto).
   ============================================================ */
.prefooter-cta {
  width: 100%; max-width: none; margin: 60px 0 0;
  padding-top: 56px; padding-bottom: 56px;
  background: #000; border-radius: 0;
}
.prefooter-cta__inner {
  /* Stessa distanza dai margini del footer-inner (max-width:1200px + 20px
     di padding, centrato): su schermi oltre i 1200px lo spazio in piu'
     va nel centraggio, non nel padding, esattamente come il footer. */
  max-width: 1200px; margin: 0 auto;
  padding-left: max(20px, calc((100% - 1200px) / 2 + 20px));
  padding-right: max(20px, calc((100% - 1200px) / 2 + 20px));
}
/* Distanza zero dal footer quando il box CTA e' l'ultimo elemento prima
   del footer: classe esplicita (impostata da footer.php via $no_footer_gap,
   affidabile su ogni browser) + fallback via :has() per markup non passati
   da quel flag. */
.site-footer.no-gap,
main:has(> .prefooter-cta:last-child) + .site-footer { margin-top: 0; }
.prefooter-cta h3 {
  margin-bottom: 28px; font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  max-width: 900px; color: #fff; font-family: var(--font-family-heading); font-weight: 700;
  line-height: 1.35;
}
/* BUG FIX (mobile, tutti i browser): interlinea tra i campi ridotta a
   12px (era 16px, sopra il massimo di 15px richiesto) — si applica
   uniformemente tra TUTTI i campi del form, quindi anche tra l'ultimo
   campo di testo (messaggio) e la riga con la checkbox privacy, dato
   che sono tutti figli diretti dello stesso flex con lo stesso gap. */
.prefooter-cta form { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.prefooter-cta .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; flex: 1 1 220px; }
.prefooter-cta .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Padding uniforme tra tutti i campi "di scrittura" (input testo/email e
   textarea): stesso valore su entrambi, cosi' il testo digitato parte
   sempre alla stessa distanza dal bordo del campo, in ogni campo. Lo
   stesso valore (14px 16px) e' usato anche nel form completo di
   contatti.php, per coerenza in tutto il sito. */
.prefooter-cta input, .prefooter-cta textarea {
  padding: 14px 16px; border: 1px solid #444; border-radius: var(--radius-btn);
  font-family: var(--font-family-mono); font-size: 0.85rem; letter-spacing: 0.5px;
  background: #111; color: #fff; text-transform: uppercase;
  box-sizing: border-box;
}
.prefooter-cta input::placeholder, .prefooter-cta textarea::placeholder { color: #888; opacity: 1; }
.prefooter-cta textarea { resize: vertical; min-height: 52px; max-height: 140px; }
.prefooter-cta input:focus, .prefooter-cta textarea:focus { outline: none; border-color: var(--color-accent); }
.prefooter-cta .form-check { flex-direction: row; align-items: center; gap: 10px; flex: 1 1 100%; text-transform: none; }
.prefooter-cta .form-check label { color: #999; font-size: 0.85rem; }
.prefooter-cta .form-check a { color: var(--color-accent); }
.prefooter-cta button { flex: 0 0 auto; }
.prefooter-cta .btn-primary { background: var(--color-accent); color: #000; border-color: var(--color-accent); }
.prefooter-cta .btn-primary:hover { background: #fff; color: var(--color-accent); }
.prefooter-cta .hp-field { position: absolute; left: -9999px; }
.prefooter-cta .alert-success { background: #1a2e20; color: #8fd6a3; }
.prefooter-cta .alert-error { background: #2e1a1a; color: #e29a9a; }
@media (max-width: 700px) {
  .prefooter-cta form { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   TIMELINE — blocco "storia/tappe" con sfondo dinamico
   ------------------------------------------------------------
   Adattato dal componente originale (Pug/SCSS/jQuery) al motore
   del sito: niente librerie esterne, niente SCSS. Font e colori
   usano le variabili globali del sito (--font-family-mono per i
   testi, --font-family-heading per i titoli, --color-accent come
   unico accento cromatico) cosi' la timeline resta coerente con
   il resto dell'identita' visiva anche se i design token vengono
   aggiornati da pannello admin in futuro.
   ============================================================ */
.block-timeline {
  position: relative;
  padding: 80px 20px;
  background-color: #111111;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transition: background-image 0.4s ease;
  overflow: hidden;
}
.block-timeline::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(17, 17, 17, 0.88); /* velo scuro sopra la foto di sfondo, per leggibilita' */
}
.timeline-header,
.block-timeline .timeline { position: relative; z-index: 1; }

.timeline-header { width: 100%; text-align: center; margin-bottom: 70px; }
.timeline-header__title {
  color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-family: var(--font-family-heading); font-weight: 700; margin: 0;
}
.timeline-header__subtitle {
  color: var(--color-accent); font-family: var(--font-family-mono);
  font-size: 0.85rem; letter-spacing: 4px; text-transform: uppercase;
  margin: 12px 0 0;
}

.timeline {
  display: flex; flex-direction: column; margin: 0 auto;
  max-width: 700px; position: relative;
}
.timeline::before {
  content: ''; position: absolute; left: 50%; width: 1px; height: 100%;
  margin-left: -0.5px; background: rgba(255, 255, 255, 0.12);
}
.timeline-item {
  width: calc(50% - 40px); padding: 30px 0; box-sizing: border-box;
  position: relative; opacity: 0.35; filter: blur(1px);
  transform: translateY(-40px); transition: 0.5s ease;
}
.timeline-item:nth-child(even) { align-self: flex-end; }
.timeline-item::before {
  content: attr(data-text); position: absolute; top: 65%; margin-top: -5px;
  width: 100%; font-family: var(--font-family-mono); font-size: 0.7rem;
  letter-spacing: 2px; color: rgba(255, 255, 255, 0.45); opacity: 0;
  right: calc(-100% - 46px); padding-left: 15px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.timeline-item:nth-child(even)::before {
  right: auto; left: calc(-100% - 46px); text-align: right;
  padding-left: 0; padding-right: 15px;
  border-left: none; border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.timeline-item--active {
  opacity: 1; filter: blur(0); transform: translateY(0);
}
.timeline-item--active::before { top: 50%; opacity: 1; transition: 0.3s ease 0.15s; }

.timeline__img {
  max-width: 100%; margin-bottom: 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}
.timeline__content-title {
  font-family: var(--font-family-heading); font-weight: 700; color: #fff;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin: 0 0 6px;
}
.timeline__content-desc {
  font-family: var(--font-family-mono); color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem; line-height: 1.6; margin: 0;
}

@media (max-width: 767px) {
  .block-timeline { background-attachment: scroll; } /* fixed su iOS causa scatti/glitch */
  .timeline::before { left: 10px; }
  .timeline-item {
    align-self: baseline !important; width: 100%;
    padding: 0 20px 70px 40px;
  }
  .timeline-item::before {
    left: -30px !important; right: auto !important; top: 0 !important;
    width: 40px; text-align: center !important; border: none !important;
    padding: 0 !important; position: absolute;
  }
  .timeline-item:last-child { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-item { opacity: 1; filter: none; transform: none; transition: none; }
  .timeline-item::before { opacity: 1; top: 50%; }
}


/* ============================================================
   RICHIESTA 7 — LOCKUP VERTICALE: SPAZIO RISERVATO SU SMARTPHONE
   ------------------------------------------------------------
   Il lockup (monogramma + "SIMONE FORCINA | GRAPHIC DESIGNER...")
   e' in position:fixed a sinistra, quindi vive fuori dal flusso e
   nessun contenuto sa che esiste: su schermi stretti finiva sopra
   il testo. Aumentare di 5px i margini non basta, perche' il
   lockup occupa da 10px a ~28px mentre i contenuti partono da 20px.
   Soluzione: riservargli una colonna vera. Una sola variabile
   (--identity-gutter) sposta il padding sinistro di tutti i
   contenitori di pagina, cosi' il valore si regola in un punto solo
   e nessun blocco puo' dimenticarsene. L'header e' escluso: il
   lockup e' centrato verticalmente e non arriva mai alla barra
   superiore, quindi spostare il logo sarebbe un cambio gratuito.
   ============================================================ */
:root { --identity-gutter: 42px; }
@media (max-width: 768px) {
  .container,
  .hero,
  .page-content,
  .portfolio-grid-section,
  .behance-feed,
  .breadcrumb,
  .project-hero,
  .project-nav,
  .block-bg-full,
  .block-timeline,
  .block-project-cta,
  .google-reviews,
  .prefooter-cta__inner,
  /* Il banner cookie e' fisso in basso e a piena larghezza: quando cresce in
     altezza (su smartphone testo e bottoni si impilano) arriva all'altezza del
     lockup, quindi serve la stessa colonna riservata. */
  .cookie-banner {
    padding-left: var(--identity-gutter);
  }
  /* La barra superiore mantiene il suo allineamento originale. */
  .header-inner { padding-left: 20px; }
  /* Il menu a tendina segue il bordo destro dell'hamburger: invariato. */
  .main-nav-inner { padding-left: 20px; }
}

/* ============================================================
   RICHIESTA 9 — STESSO RISULTATO SU TUTTI I BROWSER (RIFERIMENTO: FIREFOX)
   ------------------------------------------------------------
   Le differenze non nascono da bug dei browser ma da regole che
   esistono solo per alcuni di essi: qui vengono tolte o rese
   uniformi, prendendo come riferimento cio' che si vede in Firefox.
   ============================================================ */

/* 9.1 — min-height:-webkit-fill-available valeva solo su Safari/Chrome e
   rendeva il blocco parallasse piu' alto che in Firefox. Rimosso il
   comportamento differenziato: l'altezza e' la stessa ovunque. */
.block-image-parallax { min-height: 420px; }

/* 9.2 — iOS Safari ingrandisce da solo il testo quando si ruota il
   telefono in orizzontale; Firefox e Chrome no. Disattivato, cosi' la
   dimensione dei testi e' quella decisa qui in tutti i casi. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 9.3 — writing-mode con prefisso per le versioni di Safari che
   altrimenti ignorano la rotazione del lockup verticale. */
.site-identity-vertical {
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 9.4 — RETE DI SICUREZZA SUL FADE D'INGRESSO.
   Il <body> nasce con opacity:0 (classe js-page-enter) e solo il JS la
   toglie. Se il JS non parte, tarda o va in errore su un browser, la
   pagina resta bianca: e' il caso peggiore possibile. Questa animazione
   la riporta visibile dopo 1,2s a prescindere dal JS. In condizioni
   normali il JS arriva molto prima e non si vede nulla di diverso. */
@keyframes safetyReveal { to { opacity: 1; } }
body.js-page-enter { animation: safetyReveal 0s linear 1.2s forwards; }
body.js-page-leave { animation: none; }

/* 9.5 — LEGGIBILITA' SU SCHERMI PICCOLI.
   Corpo dei testi e altezza di riga minime, e parole lunghe (URL, nomi
   di progetto) che vanno a capo invece di sfondare la colonna. */
@media (max-width: 600px) {
  body { font-size: max(var(--font-size-base), 16px); }
  .hero-content, .rich-text, .block-text, .value-proposition__item .rich-text { line-height: 1.6; }
  .footer-col p, .footer-col a { line-height: 1.5; }
  h1, h2, h3, .project-hero h1, .hero h1 { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
  .rich-text, .block-text, .hero-content { overflow-wrap: break-word; }
  /* Il filetto della value proposition non deve mai superare la colonna. */
  .value-proposition__rule { max-width: 100%; }
}

/* 9.6 — Su iOS un input con font minore di 16px fa zoomare la pagina al
   focus, cambiando il layout solo su quel browser. Portati a 16px. */
@media (max-width: 768px) {
  .form-group input, .form-group textarea,
  .prefooter-cta input, .prefooter-cta textarea { font-size: 16px; }
}


/* ============================================================
   RICHIESTA 3 — BLOCCO RECAPITI DELLA PAGINA CONTATTI
   Indirizzo, email e contatto diretto WhatsApp, compilati dal
   pannello. Tre colonne su desktop, in colonna su smartphone.
   ============================================================ */
.contact-details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px; margin: 32px 0 8px;
  padding: 24px 0; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
}
.contact-details__item { display: flex; flex-direction: column; gap: 6px; }
.contact-details__label {
  font-family: var(--font-family-heading); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: #888;
}
.contact-details__value {
  font-family: var(--font-family-mono); font-size: 0.95rem; line-height: 1.5;
  color: var(--color-text);
}
a.contact-details__value { transition: color var(--transition-fade); }
a.contact-details__value:hover { color: var(--color-accent); }
.contact-details__wa { display: inline-flex; align-items: center; gap: 8px; }
.contact-details__wa svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
@media (max-width: 600px) { .contact-details { grid-template-columns: 1fr; gap: 20px; } }


/* ============================================================
   RICHIESTA 9 (seguito) — PERCHE' LE ALTEZZE DIFFERIVANO FRA BROWSER
   ------------------------------------------------------------
   Misurato: la stessa frase, stesso font e stessa dimensione, occupa
   310px in Chrome e 322-324px in Firefox e Safari. Non e' un
   arrotondamento, e' una differenza sistematica di circa il 4% nelle
   metriche con cui i motori compongono Cutive Mono. Conseguenza: un
   titolo che sta "al pelo" dentro la colonna va su una riga in Chrome
   e su due negli altri, e da li' in poi tutta la pagina scorre
   diversamente.
   Le metriche del font non si possono cambiare. Si puo' pero' togliere
   il caso limite: su schermi stretti i titoli e il claim scendono
   quel tanto che basta perche' la riga entri con margine in tutti e
   tre i motori, quindi la decisione di andare a capo non dipende piu'
   da quale browser si sta usando. Come effetto secondario i titoli
   lunghi restano piu' leggibili sul telefono.
   ============================================================ */
@media (max-width: 600px) {
  .hero h1 { font-size: 1.75rem; line-height: 1.25; }
  .project-hero h1 { font-size: 1.7rem; line-height: 1.25; }
  .page-content h1 { font-size: 1.6rem; line-height: 1.25; }
  .prefooter-cta h3 { font-size: 1rem; line-height: 1.45; }
  .block-project-cta h3 { font-size: 0.95rem; line-height: 1.4; }
  .blog-item h2, .blog-preview__title { font-size: 1.05rem; line-height: 1.3; }
  .value-proposition__heading, .portfolio-grid-section h2 { font-size: 1.4rem; line-height: 1.3; }
}


/* ============================================================
   RICHIESTA 9 (causa radice) — NIENTE GRASSETTO SINTETICO
   ------------------------------------------------------------
   Cutive Mono esiste in un solo peso. Dove il CSS chiede 600 o 700
   il browser se lo inventa ("faux bold") ingrassando le aste, e ogni
   motore lo fa in misura diversa: e' da qui che nasceva il 4% di
   differenza nella larghezza dei testi, e quindi i capoversi che
   cadevano in punti diversi fra Chrome, Firefox e Safari.
   Disattivando la sintesi il testo ha la stessa larghezza ovunque.
   I titoli veri non sono toccati: usano Helvetica Neue / Arial, che
   il grassetto ce l'hanno per davvero e continuano a usarlo.
   ============================================================ */
html {
  font-synthesis-weight: none;
  font-synthesis-style: none;
  -webkit-font-synthesis: none;
}
/* Nel font mono l'enfasi si ottiene con il colore e la spaziatura, non
   con un peso che non esiste. */
.portfolio-item-caption .title { font-weight: 400; letter-spacing: 0.3px; }

/* L'altezza di una textarea calcolata da "rows" dipende da come il motore
   arrotonda l'interlinea: Firefox ne ricavava 6px in piu' degli altri.
   Fissandola in pixel il campo messaggio e' identico ovunque. */
@media (max-width: 600px) {
  .contact-form textarea { height: 122px; }
}


/* ============================================================
   RICHIESTA 1 - distanza fra un modulo e l'altro: esattamente 15px
   ------------------------------------------------------------
   Vale su tablet e smartphone, per il form contatti, per la riga
   Nome/Cognome e per la CTA "Contattami" in fondo alle pagine.
   Sopra i 1024px resta il valore di partenza (12px), non richiesto.

   Sta in fondo al foglio di proposito: la regola di partenza
   .prefooter-cta form { gap: 12px } arriva piu' avanti nel file e a
   parita' di specificita' vince l'ultima. Le media query non pesano.
   ============================================================ */
@media (max-width: 1024px) {
  .contact-form,
  .form-row,
  .prefooter-cta form { gap: 15px; }
}

/* Il difetto vero non era il gap. .prefooter-cta .form-group porta
   flex: 1 1 220px, pensato per la fila orizzontale: sotto i 700px il
   form passa in colonna, quel 220px diventa ALTEZZA minima e flex-grow
   allarga ogni modulo, lasciando circa 170px di vuoto sotto ogni campo.
   In colonna il modulo deve tornare alla sua altezza naturale.
   La soglia e' 700px, la stessa dove il form si impila: sopra, i campi
   sono affiancati e devono poter crescere in larghezza. */
@media (max-width: 700px) {
  .prefooter-cta .form-group,
  .prefooter-cta .form-check { flex: 0 0 auto; }
}

/* Stessa ragione per Nome/Cognome, ma la loro soglia e' 600px: fra 600
   e 700 la riga e' ancora affiancata e i due campi devono dividersi la
   larghezza, quindi qui flex non si tocca. */
@media (max-width: 600px) {
  .form-row .form-group { flex: 0 0 auto; }
}

/* ============================================================
   IMMAGINI PIGRE SENZA DIMENSIONI — rete di sicurezza
   ------------------------------------------------------------
   Un <img loading="lazy"> senza width/height non occupa spazio finche'
   non e' caricato. Safari decide se caricare un'immagine pigra guardando
   se occupa spazio nella finestra: un elemento alto zero non lo occupa
   mai, quindi il caricamento non parte e l'altezza resta zero. L'immagine
   sparisce solo su Safari, perche' Chrome e Firefox la caricano lo stesso.

   Le dimensioni vere le stampa ora img_dim() leggendole dal file. Questa
   regola copre i casi in cui non si possono leggere (immagine su un altro
   dominio, file mancante): riserva una proporzione, cosi' il riquadro ha
   un'altezza e il caricamento parte comunque.
   ============================================================ */
.block-image-full img:not([width]),
.block-image-half img:not([width]),
.block-image-parallax img:not([width]),
.block-image-text img:not([width]),
.block-gallery img:not([width]) { aspect-ratio: 16 / 9; min-height: 1px; }

.block-timeline img:not([width]),
.block-blog-preview img:not([width]),
.block-collaborators img:not([width]),
.block-partners img:not([width]),
.block-clients-logos img:not([width]) { min-height: 1px; }