/* Niente height: 100% sul body: insieme a display:flex lo bloccava all'altezza del viewport,
   e tutte le sezioni (flex item, flex-shrink 1 di default) venivano compresse per starci
   dentro. Le sezioni di solo testo resistevano grazie alla min-height automatica, ma
   .immagine-fullwidth ha overflow:hidden — che azzera quella min-height — e si schiacciava a
   una fascia di ~96px con l'immagine da 70vh ritagliata dentro. Il footer in fondo lo tiene
   gia' il min-height: 100vh qui sotto. */
html {
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  /* Il footer sta in fondo alla finestra sulle pagine corte grazie a questo min-height piu'
     il margin-top:auto di .site-footer: e' spazio vuoto distribuito, non altezza aggiunta,
     quindi su pagine lunghe il footer scende in fondo al documento senza creare overflow.
     Il doppio valore serve per i telefoni: 100vh esclude la barra degli indirizzi a
     scomparsa, quindi il body risulta piu' alto del visibile e anche una pagina corta scrolla
     di quel tanto. dvh segue l'altezza reale; il 100vh sopra resta come fallback per i
     browser che non lo conoscono. */
  min-height: 100vh;
  min-height: 100dvh;
}

::selection {
  background: #000;
  color: #fff;
}

.container {
  flex: 1 0 auto;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  padding: 0%;
}

@media (max-width: 1440px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (max-width: 576px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ===================== NAVBAR - LOGO A DESTRA ===================== */
.navbar {
  padding-top: 2%;
}



.navbar .container-fluid {
  max-width: none !important;
  width: 100% !important;
}

.navbar-nav {
  gap: 3.5rem !important;
}

.navbar-collapse {
  flex-grow: 0 !important;
}

/* 2rem = stessa dimensione di .blocco-titolo (il titolo di pagina, es. "Progetti").
   I pallini accanto alle voci sono stati rimossi: niente piu' ::after con selected-dot.svg /
   unselected-dot.svg, e via il padding-right: 2.8rem che serviva solo a fargli spazio.
   Lo stato attivo resta indicato dal colore (nero su grigio #686868). */
.nav-link {
  font-size: 2rem !important;
  font-weight: bold !important;
  color: #686868 !important;
  position: relative;
  white-space: nowrap;
  padding: 0 !important;
  transition: color 0.18s ease;
}

.nav-link.active {
  color: #000 !important;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: #000 !important;
}

/* Al passaggio del mouse sulla nav, la voce attiva si spegne: il nero resta solo su quella
   effettivamente sotto il cursore. */
.navbar-nav:hover .nav-link.active:not(:hover),
.navbar-nav:focus-within .nav-link.active:not(:focus-visible) {
  color: #686868 !important;
}

.nav-link.active:hover {
  color: #000 !important;
}

.nav-link:focus,
.nav-link:focus-visible,
.nav-link:focus-within,
.navbar-nav .nav-item a:focus,
.navbar-nav .nav-item a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.navbar-brand {
  margin-left: auto !important;
  padding-right: 0%;
  margin-right: 0%;
}

/* Il nome dello studio e' testo, non piu' il wordmark SVG: stesso font del resto del sito
   (Arial, ereditato da body) e stessa dimensione/peso delle voci di menu.
   2rem non e' un valore scelto a caso: il vecchio SVG era alto 1.55rem su un viewBox tutto
   maiuscolo, e 1.55rem di altezza maiuscola corrispondono a circa 2rem di font-size in Arial
   (rapporto cap-height ~0.72). Il testo esce quindi delle stesse dimensioni di prima. */
/* La clamp() sostituisce i vecchi breakpoint sull'altezza dell'SVG (1.55rem / 1.3rem / 0.9rem):
   il nome e' lungo 25 caratteri e su un telefono, a 2rem fisso, sborderebbe dallo schermo.
   Da ~760px in su vale il tetto di 2rem, cioe' la stessa misura delle voci di menu. */
.navbar-brand-text {
  font-size: clamp(0.85rem, 4.2vw, 2rem);
  font-weight: bold;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.navbar-brand-text:hover,
.navbar-brand-text:focus-visible {
  color: #000;
  text-decoration: none;
}

.navbar-brand a:focus,
.navbar-brand a:active:focus,
.navbar-brand a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.navbar-brand a {
  -webkit-tap-highlight-color: transparent;
}

.navbar-toggler {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.navbar-toggler-icon {
  transition: opacity 0.3s ease;
}

/* ===================== Sotto risoluzione container (1440px) ===================== */
@media (max-width: 1440px) {
  .navbar>.container-fluid {
    flex-wrap: wrap;
    align-items: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .navbar-collapse {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .navbar-nav {
    gap: 1.2rem !important;
    text-align: start;
    align-self: start;
    padding: 3rem 0;
  }

  /* Nessun override di font-size qui: sotto i 1440px la nav deve restare a 2rem come sopra,
     altrimenti sui portatili (1280/1366px, cioe' la maggioranza) si tornerebbe alla misura
     piccola di prima. Con 3 voci maiuscole ci sta comodamente. */

  .footer-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Il logo non e' piu' un'immagine: la sua dimensione la gestisce .navbar-brand-text con
     una clamp(), quindi qui non serve piu' nessun override. */
}

@media (max-width: 991px) {
  .navbar-brand {
    order: 2;
    margin-left: auto !important;
    padding-left: 0;
    margin-top: 0;
    flex: 0;
    z-index: 9999;
    position: relative;
  }


  .navbar-nav {
    gap: 1.2rem !important;
    text-align: start;
    align-self: start;
    padding: 0 0;
  }

  .navbar>.container-fluid>.pe-4 {
    order: 1;
    margin-left: 0;
  }

  .navbar-collapse {
    order: 3;
    width: 100%;
    flex-basis: 100%;
    flex-grow: 0 !important;
  }
}

/* ===================== NAVBAR OVERLAY MOBILE ===================== */
@media (max-width: 991px) {
  .nav-link {
    font-size: 1.5rem !important;
  }
}

.navbar-footer-info {
  display: none;
}

@media (max-width: 991px) {
  .navbar-footer-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    font-size: 0.8rem;
    font-weight: bold;
    color: #000;
    margin-top: auto;
  }

  .navbar-footer-info a {
    color: #000;
    text-decoration: none;
  }

  .navbar-footer-info span:first-child {
    text-align: left;
  }

  .navbar-footer-info span:last-child {
    text-align: right;
  }
}

@media (max-width: 991px) {
  header {
    position: relative;
    z-index: 9999;
    transition: background 0.1s ease;
  }

  header.header-solid {
    background: #fff;
  }

  header::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 9998;
    pointer-events: none;
    transition: background 0.1s ease;
  }

  header.header-solid::after {
    background: #fff;
  }

  .navbar-collapse {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    background: #fff;
    z-index: 9996;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    padding: 120px 2rem 60px 2rem;
    transform: translateY(-100%);
    transition: transform 0.4s ease !important;
    height: auto !important;
    min-height: 50% !important;
    visibility: hidden;
  }

  .navbar-collapse.collapsing {
    transform: translateY(-100%);
    visibility: visible;
  }

  .navbar-collapse.show {
    transform: translateY(0);
    visibility: visible;
  }

  .navbar-toggler-container {
    z-index: 9999;
    position: relative;
  }

  .navbar-brand {
    z-index: 9999;
    position: relative;
  }

  .nav-link {
    font-size: 1.7rem !important;
  }
}


/* ===================== MOBILE (576px) ===================== */
@media (max-width: 576px) {
  .navbar {
    padding-top: 4%;
  }

  .navbar>.container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .navbar-nav {
    gap: 1rem !important;
  }

  .nav-link {
    font-size: 1.1rem !important;
  }
}

#navOverlay {
  position: fixed;
  top: 1.55rem;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9997;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#navOverlay.active {
  opacity: 1;
  visibility: visible;
}

/* ===================== FILTRI ===================== */
/* Barra sopra la griglia progetti, sul modello di www.gonet2025.it/template/progetto_list.tpl:
   bottoni categoria sempre visibili a sinistra, campo di ricerca a destra.
   Il padding laterale per breakpoint lo porta gia' .container, che e' sulla riga interna della
   sezione: le compensazioni per breakpoint di prima non servono piu'. */
.filters {
  padding: 0 0 20px;
  font-size: 1rem;
}

/* nowrap e' la chiave di tutta la barra: con flex-wrap:wrap il browser NON restringe i filtri,
   preferisce mandare la ricerca a capo — e i bottoni categoria sbordano invece di scorrere.
   Con nowrap la ricerca resta a destra sulla stessa riga e i filtri si stringono davvero. */
.filters-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 20px;
}

/* Occupa lo spazio che avanza accanto alla ricerca: flex:1 per prenderlo tutto, min-width:0
   perche' altrimenti un flex item non scende sotto la larghezza del proprio contenuto e lo
   scroll orizzontale interno (le categorie sono 11) non partirebbe mai. */
.category-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

/* La ricerca non si stringe: e' la barra dei filtri a cedere spazio. */
.search-wrapper {
  flex: 0 0 auto;
}

/* Frecce di scorrimento dei filtri. .is-hidden (non display:none) lo mette main.js dal lato in
   cui non c'e' piu' niente da scorrere: cosi' la freccia sparisce senza far saltare la
   larghezza della barra e quindi la posizione dei bottoni. */
.filters-arrow {
  background: none;
  border: none;
  padding: 0 2px;
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: #666;
  cursor: pointer;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.filters-arrow:hover {
  color: #000;
}

.filters-arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Sotto i 768px la ricerca non ci sta piu' accanto ai filtri: si torna a wrap e va a capo
   sotto di essi, come nel riferimento gonet2025. Nessun order: l'ordine del markup
   (prima i filtri, poi la ricerca) e' gia' quello giusto. */
@media (max-width: 768px) {
  .filters-bar {
    flex-wrap: wrap;
  }

  .search-wrapper {
    width: 100%;
    flex: 1 1 100%;
  }

  #searchInput {
    width: 100%;
    text-align: left;
  }
}

@media (max-width: 991px) {
  /* Il testo allineato a sinistra serve solo quando la ricerca prende tutta la riga, cioe'
     sotto i 768px: fino a li' resta a destra, accanto ai filtri. */
  .category-filters-wrapper {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    width: 100%;
    height: auto;
  }

  .category-filters-wrapper::-webkit-scrollbar {
    display: none;
  }

  .category-filters-wrapper:active {
    cursor: grabbing;
  }

  .category-filters-wrapper button {
    flex-shrink: 0 !important;
    white-space: nowrap;
  }
}

/* ===================== SEARCH ===================== */
.search-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

#searchInput {
  border: none;
  background: none;
  text-align: right;
  padding: 6px 36px 6px 0px;
  font-size: 1rem;
  font-weight: bold;
  color: #000;
  width: 273px;
  max-width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 0.2s ease;
}

#searchInput::placeholder {
  color: #000;
  font-weight: bold;
  opacity: 1;
}

#searchInput:focus {
  outline: none;
  font-weight: normal;
  opacity: 1;
  border-bottom: 1px solid #000;
}

#searchInput:hover {
  outline: none;
  font-weight: normal;
  border-bottom: 1px solid #000;
}

/* ===================== CATEGORY FILTERS ===================== */
/* flex:1 + min-width:0 anche qui: .category-filters ora e' un flex container (frecce + pista),
   e senza min-width:0 la pista non scenderebbe sotto la larghezza dei bottoni, quindi non
   scorrerebbe mai e sborderebbe dalla barra. */
.category-filters-wrapper {
  display: flex;
  gap: 20px;
  height: 47px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  /* Scorrendo la fascia con trackpad o dito non si trascina anche la pagina dietro (ne' si
     innesca la gesture "indietro" del browser a fine corsa). */
  overscroll-behavior-x: contain;
  /* auto e non smooth: lo scorrimento delle frecce e' animato a mano in main.js, un
     comportamento smooth qui farebbe animare ogni singolo fotogramma dell'animazione. */
  scroll-behavior: auto;
}

.category-filters-wrapper::-webkit-scrollbar {
  display: none;
}

.category-filters-wrapper:active {
  cursor: grabbing;
}

.category-filters-wrapper button {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  transition: color 0.18s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.category-filters-wrapper button.active {
  color: #000;
}

.category-filters-wrapper:not(:hover) button.active {
  color: #000;
}

.category-filters-wrapper:hover button.active {
  color: #666;
}

.category-filters-wrapper button:not(.active):hover {
  color: #000;
}

.category-filters-wrapper button.active:hover {
  color: #000;
}

.use-for-search {
  display: none;
}

.projects-grid {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.no-results-message {
  flex: 1;
  display: none;
  text-align: center;
  font-size: 1.2rem;
  color: #666;
  align-items: center;
  justify-content: center;
}

.no-results-message p {
  margin: 0 0 12px 0;
  font-weight: bold;
  color: #000;
}

.no-results-message small {
  display: block;
  font-size: 0.95rem;
  color: #888;
}

/* ─── Icone search ─── */
/* L'icona lente e' stata rimossa dal layout (niente piu' .search-icon nel markup ne' qui).
   Resta la X, che compare solo a campo pieno; il padding-right di #searchInput serve a lei. */
.clear-icon {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}


/* ===================== CLEAR FILTRI ===================== */
.filter-clear {
  display: inline-block;
  width: 20px;
  height: 18px;
  margin-left: 0;
  text-align: center;
  visibility: hidden;
  pointer-events: none;
}

button.active .filter-clear {
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
}

.clear-filter-icon {
  max-width: 15px;
  width: 100%;
  height: 15px;
  opacity: 1;
  transition: opacity 0.18s ease;
  margin-bottom: 3px;
}

.filter-clear:hover .clear-filter-icon {
  opacity: 0.7;
}

.all-spacing {
  display: inline-block;
  width: 20px;
  height: 18px;
  margin-left: 0;
  text-align: center;
  visibility: hidden;
  pointer-events: none;
}

/* ===================== LAYOUT PROGETTI ===================== */
/* Nuovo layout: griglia fissa a 3 colonne con gutter sottile, dentro il container da 1440px
   (non piu' auto-fill a 350px con gap 3rem). Il padding laterale per breakpoint arriva da
   .container, che e' sullo stesso elemento: qui non va ripetuto.
   L'ordine dei breakpoint conta: la regola piu' stretta deve stare DOPO, altrimenti a 700px
   vincerebbe (a parita' di specificita') quella dei tablet. */
.grid-container {
  display: grid;
  max-width: 1440px;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

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

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

.project-card.hidden {
  display: none;
}

/* Evita l'icona "immagine rotta" nel breve istante prima che il JS assegni il src
   reale (da data-src) alla card rivelata dall'infinite scroll. */
img.lazy-project-img:not([src]) {
  visibility: hidden;
}

/* ===================== LAYOUT BLOG / PUBBLICAZIONI ===================== */
/* Niente compensazione di padding su .blog-list/.pubblicazioni-list: il margine negativo
   (-.75rem) della .row e' gia' compensato esattamente dal padding (.75rem) delle colonne,
   perche' il .container di questo sito NON ha il padding 12px di Bootstrap (e' 0 sopra
   1440px, 1.5rem sotto, 1rem sotto 576px). Aggiungerla spostava le card 12px dentro il
   container, disallineandole dal titolo del blocco e dalle card di Progetti. */

/* Le immagini di Blog/Pubblicazioni sono generate a dimensione fissa (resizeImage, es.
   500x500 / 400x500): senza un contenitore responsive l'<img> mantiene le dimensioni
   fisiche e sborda dalla propria colonna quando questa e' piu' stretta (visto a
   viewport >1440px, dove .blog-item-img arriva a 480px ma l'immagine resta 500px).
   Stessa tecnica aspect-ratio-box di .project-image-wrapper (Progetti). */
.blog-item-img {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  margin-bottom: 4%;
}

.blog-item-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.pubblicazione-item-img {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 125%;
  overflow: hidden;
  margin-bottom: 4%;
}

.pubblicazione-item-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

#projectsLoadMoreSentinel,
#blogLoadMoreSentinel,
#pubblicazioniLoadMoreSentinel {
  width: 100%;
  height: 1px;
}

.blog-item.hidden,
.pubblicazione-item.hidden {
  display: none;
}

img.lazy-blog-img:not([src]),
img.lazy-pubblicazione-img:not([src]) {
  visibility: hidden;
}

/* 75% = 4:3 orizzontale, esattamente il formato della miniatura generata (600x450): l'immagine
   riempie il riquadro senza ritaglio ulteriore. Prima era 120% (verticale), che ritagliava in
   altezza una sorgente orizzontale. Nessun margine sotto: con il nuovo layout la card e' sola
   immagine, la distanza fra le righe la fa il gap della griglia. */
.project-image-wrapper {
  overflow: hidden;
  line-height: 0;
  transition: all 0.25s ease;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  position: relative;
  margin-bottom: 0;
}

.project-image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Niente piu' blur a riposo: le miniature restano nitide e all'hover resta solo
     l'avvicinamento. Tolto anche filter da transition e will-change, che non ha piu' nulla
     da animare. */
  transition: transform 0.42s ease;
  transform: scale(1);
  will-change: transform;
}

.project-image-wrapper:hover img {
  transform: scale(1.01);
}

.project-image-wrapper a {
  display: block;
  position: absolute;
  inset: 0;
  line-height: 0;
}

/* L'override mobile a padding-bottom 100% (quadrato) e' stato rimosso: il 4:3 vale a ogni
   breakpoint, anche a colonna singola. */

/* ─── Overlay Nome/Luogo sulla card progetto ───
   Pattern .img-container/.img-overlay di www.marionanni.com: didascalia sopra l'immagine
   invece che sotto, cosi' la griglia resta una griglia di sole immagini.
   Il default e' "sempre visibile": vale per mobile e per qualsiasi dispositivo touch, dove
   un hover non esiste e la didascalia sarebbe altrimenti irraggiungibile. La comparsa
   all'hover e' l'eccezione, confinata nella media query (hover: hover) piu' sotto.
   Niente display:none/visibility: l'opacita' tiene il testo nell'accessibility tree, quindi
   il link conserva il suo nome accessibile anche quando l'overlay non si vede. */
.project-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  color: #fff;
  /* line-height: 0 arriva da .project-image-wrapper a (serve a togliere lo spazio sotto
     l'<img>): qui va rimesso, altrimenti le due righe si sovrappongono. */
  line-height: 1.3;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%);
  transition: opacity 0.3s ease;
  /* L'overlay copre tutta la card: senza questo intercetterebbe il click destinato al link
     che lo contiene (e su touch anche lo scroll). E' decorativo, i puntatori lo attraversano. */
  pointer-events: none;
}

.project-card-overlay-inner {
  display: flex;
  flex-direction: column;
}

.project-card-nome {
  font-weight: 700;
}

.project-card-luogo {
  font-size: 0.875rem;
}

@media (max-width: 576px) {
  .project-card-overlay {
    padding: 0.75rem;
  }

  .project-card-luogo {
    font-size: 0.8125rem;
  }
}

/* Solo i dispositivi con un puntatore vero nascondono la didascalia a riposo. */
@media (hover: hover) {
  .project-card-overlay {
    opacity: 0;
  }

  .project-image-wrapper:hover .project-card-overlay,
  .project-image-wrapper a:focus-visible .project-card-overlay {
    opacity: 1;
  }
}


/* ===================== LAYOUT PROGETTO SINGOLO ===================== */
.main-img {
  width: 100%;
  max-width: 1440px;
  display: block;
  margin: 40px auto;
}

/* Niente display:flex qui: la sezione porta la classe .container (max-width 1440 + margini
   automatici, che erano l'altro motivo di questa regola) e dentro c'e' una .row Bootstrap.
   Con la sezione flex, la .row diventava un flex item a larghezza contenuto e la tabella si
   stringeva a ~174px invece di occupare la sua colonna. */
.project-info {
  display: block;
}

.content-section {
  padding: 30px 0;
}

.image-column {
  flex: 1 1 65%;
  min-width: 320px;
}

.content-img {
  width: 100%;
  height: auto;
  display: block;
}

.progetto-singolo-immagine-1 {
  height: clamp(320px, 52vw, 750px);
  object-fit: cover;
  object-position: 20% 80%;
}

@media (max-width: 700px) {
  .progetto-singolo-immagine-1 {
    height: clamp(100px, 52vw, 400px);
  }
}

.progetto-singolo-immagine-2 {
  height: clamp(260px, 35vw, 500px);
  object-fit: cover;
  object-position: 0% 48%;
}

.progetto-singolo-immagine-3 {
  height: clamp(280px, 40vw, 580px);
  object-fit: cover;
  object-position: 20% 51%;
}

.progetto-singolo-immagine-4 {
  width: 100%;
  height: clamp(300px, 42vw, 600px);
  object-fit: cover;
  object-position: 35% 40%;
}

.progetto-singolo-immagine-5 {
  width: 100%;
  max-height: clamp(220px, 26vw, 380px);
  object-fit: contain;
  object-position: center;
}

.progetto-singolo-immagine-6 {
  height: clamp(260px, 35vw, 500px);
  object-fit: cover;
  object-position: 0% 55%;
}

/* ===================== LAYOUT COLLABORATORI ===================== */
.team-section {
  padding: 100px 0 140px;
}

.collaboratori-container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (max-width: 1440px) {
  .collaboratori-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (max-width: 576px) {
  .collaboratori-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.team-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(720px, 1fr));
  gap: 9rem 11rem;
  justify-content: center;
}

.team-member {
  display: grid;
  grid-template-columns: 1fr 0.7fr 0.65fr 0.8fr;
  align-items: start;
  column-gap: 7rem;
}

.member-photo {
  grid-column: 1;
}

.member-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.member-name,
.member-role,
.member-contact {
  font-family: Arial, Helvetica, sans-serif;
  text-transform: lowercase;
  line-height: 1.45;
  color: #000;
  font-weight: bold;
}

.member-name {
  font-size: 1.18rem;
  letter-spacing: 0.02em;
}

.member-role {
  font-size: 1.18rem;
  color: #bbbbbb;
}

.member-contact a {
  font-size: 1.08rem;
  color: #bbbbbb;
  line-height: 1.7;
  text-decoration: none;
}

.member-contact a:hover {
  font-size: 1.08rem;
  color: #000;
  line-height: 1.7;
  text-decoration: none;
}

@media (max-width: 1400px) {
  .team-list {
    gap: 7rem 9rem;
  }

  .team-member {
    column-gap: 4rem;
  }
}

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

  .team-member {
    column-gap: 3rem;
  }

  .member-name {
    font-size: 1.1rem;
  }

  .member-role {
    font-size: 1.1rem;
  }

  .member-contact {
    font-size: 1rem;
  }
}

@media (max-width: 991px) {
  .team-list {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .team-member {
    grid-template-columns: 200px 1fr;
    gap: 1.5rem 2rem;
    column-gap: 2rem;
  }

  .member-photo {
    grid-column: 1;
    grid-row: 1 / 4;
  }

  .member-name,
  .member-role,
  .member-contact {
    grid-column: 2;
    text-align: left;
  }
}

@media (max-width: 767px) {
  .team-list {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .team-member {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .member-photo {
    grid-row: auto;
    max-width: 260px;
    margin: 0 auto;
  }

  .member-name,
  .member-role,
  .member-contact {
    grid-column: 1;
    text-align: center;
  }
}



.past-collaborations-section h2 {
  font-size: 2.4rem;
  font-weight: bold;
  margin-bottom: 1.8rem;
}

.past-collaboration-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 4rem;
  padding: 1rem 0;
  border-bottom: 2px solid #000;
  font-size: 1.1rem;
}

@media (max-width: 839px) {
  .past-collaboration-item {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}

.past-collaboration-item:last-child {
  border-bottom: none;
}

.nameAndSurname {
  font-weight: 700;
  color: #000;
}

.role {
  color: #bbbbbb;
  font-weight: 600;
}

/* ===================== NAVIGAZIONE PROGETTI ===================== */
.project-nav {
  padding: 60px 0 80px;
  text-align: center;
  background: #fff;
}

.next-project-nav-arrow {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("../img/right-arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
}

.nav-arrow:hover .next-project-nav-arrow {
  opacity: 0.85;
}

.previous-project-nav-arrow {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("../img/left-arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
}

.nav-arrow:hover .previous-project-nav-arrow {
  opacity: 0.85;
}

@media (max-width: 768px) {
  .nav-arrow {
    width: 70px;
    height: 70px;
  }

  .project-nav .d-flex {
    gap: 4rem;
  }
}

.backarrow {
  display: inline-block;
  vertical-align: middle;
  margin-right: 16px;
}

.backarrow-icon {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-image: url("../img/backarrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
  opacity: 1;
  filter: brightness(1);
}

.backarrow:hover .backarrow-icon {
  opacity: 0.45;
  filter: brightness(0.7);
}

/* ===================== LAYOUT STUDIO ===================== */
.studio-immagine-1 {
  max-width: 70%;
}

.studio-immagine-2 {
  width: 80%;
  padding-bottom: 0%;
  transform: scale(1);
}


.studio-immagine-3 {
  width: 400px;
  height: 400px;
  object-fit: cover;
  object-position: 0% 40%;
}

.studio-wideimage {
  width: 100%;
  height: clamp(220px, 38vw, 580px);
  object-fit: cover;
  object-position: 20% 63%;
}

@media (max-width: 991px) {
  .studio-immagine-3 {
    width: 280px;
    height: 280px;
  }
}

@media (max-width:962px) {
  .image-column {
    display: flex;
    justify-content: center;
  }
}


@media (max-width: 767px) {
  .studio-immagine-3 {
    width: 380px;
    height: 380px;
  }

  .col-md-6,
  .col-md-auto {
    display: flex;
    justify-content: center;
  }

  /* La regola sopra e' per il layout Studio (centra le colonne .col-md-6 generiche a
     mobile): Blog e Pubblicazioni usano la stessa classe Bootstrap per il grid ma
     devono restare card verticali normali (immagine sopra, testo sotto), non centrate
     in riga. */
  .blog-item,
  .pubblicazione-item {
    display: block;
  }
}

@media (max-width: 576px) {
  .studio-immagine-3 {
    width: 300px;
    height: 300px;
  }

  .studio-wideimage {
    width: 100%;
    height: clamp(200px, 20vw, 580px);
    object-fit: cover;
    object-position: 20% 63%;
  }
}

@media (max-width: 516px) {
  .studio-wideimage {
    width: 100%;
    height: clamp(180px, 20vw, 580px);
    object-fit: cover;
    object-position: 20% 63%;
  }
}

@media (max-width: 464px) {
  .studio-wideimage {
    width: 100%;
    height: clamp(160px, 20vw, 580px);
    object-fit: cover;
    object-position: 20% 63%;
  }
}

@media (max-width: 432px) {
  .studio-wideimage {
    width: 100%;
    height: clamp(130px, 10vw, 580px);
    object-fit: cover;
    object-position: 20% 63%;
  }
}

@media (max-width: 375px) {
  .studio-immagine-3 {
    width: 200px;
    height: 200px;
  }
}

.lecture-item-first-child,
.lecture-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 350px;
  border-bottom: 3px solid #000;
  padding: 12px 0;
}

.lecture-item-first-child {
  border-top: 3px solid #000;
}

@media (max-width: 839px) {

  .lecture-item-first-child,
  .lecture-item {
    display: flex;
    flex-direction: column-reverse;
    gap: 0;
  }
}

.bold-black {
  font-weight: bold;
  color: #000;
}

.studio-text-column {
  flex: 1 1 35%;
  min-width: 320px;
}

.studio-text-column-2 {
  flex: 1 1 35%;
  min-width: 320px;
  padding-top: 30px;
}



/* ===================== CAROUSEL ===================== */
.carousel {
  overflow: hidden;
  border-radius: 0px;
}

.carousel-inner {
  border-radius: 0px;
}

.carousel-item img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center;
}

.carousel-control-prev,
.carousel-control-next {
  opacity: 0.7;
  transition: opacity 0.3s ease;
  background: #000;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin: auto;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1;
}

.carousel-indicators {
  position: relative;
  bottom: auto;
  margin-top: 15px;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #000;
  border: none;
  opacity: 0.7;
  transition: all 0.3s ease;
  margin: 0;
}

.carousel-indicators .active {
  background-color: #000;
  opacity: 1;
  width: 12px;
  height: 12px;
}

.carousel.dragging {
  cursor: grabbing !important;
}

.carousel-inner {
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}

.carousel.dragging img {
  pointer-events: none;
}

@media (max-width: 768px) {
  .carousel-item img {
    height: 350px;
  }

  .carousel-indicators {
    margin-top: 10px;
    padding: 8px 0;
  }
}

/* ===================== CAREERS ===================== */
.careers-form {
  max-width: 760px;
  margin: auto;
}

.form-wrapper {
  background: #aaa;
  padding: 48px 52px;
}

.form-label-custom {
  display: block;
  font-weight: bold;
  font-size: 1rem;
  color: #222;
  margin-bottom: 8px;
}

.required {
  color: #c0392b;
  margin-left: 2px;
}

.input-custom {
  width: 100%;
  background: rgba(255, 255, 255, 0.55);
  border: none;
  padding: 12px 16px;
  font-size: 1rem;
  color: #333;
  outline: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.input-custom::placeholder {
  color: #aaa;
}

.input-custom:focus {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 2px rgba(100, 120, 200, 0.3);
}

.textarea-custom {
  min-height: 140px;
  resize: vertical;
}

.upload-area {
  width: 100%;
  background: rgba(255, 255, 255, 0.55);
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.upload-area:hover {
  background: rgba(255, 255, 255, 0.75);
}

.upload-icon {
  font-size: 1.8rem;
  color: #555;
}

.upload-text {
  font-size: 0.95rem;
  color: #555;
  cursor: pointer;
}

.upload-hint {
  font-size: 0.8rem;
  color: #888;
  margin-top: 6px;
  margin-bottom: 0;
}

.btn-submit {
  background: gray;
  color: #fff;
  border: none;
  padding: 14px 48px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.btn-submit:hover {
  background: grey;
  transform: translateY(-1px);
}

.btn-submit:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .form-wrapper {
    padding: 32px 24px;
  }
}

/* ===================== UPLOAD AREA STATI ===================== */

/* File selezionato: sfondo più chiaro e testo scuro per conferma */
.upload-area--selected {
  background: rgba(255, 255, 255, 0.85);
  outline: 2px solid #000;
  outline-offset: -2px;
}

.upload-area--selected .upload-text {
  color: #000;
  font-weight: bold;
}

/* Drag over: outline tratteggiato per indicare zona di drop attiva */
.upload-area--dragover {
  background: rgba(255, 255, 255, 0.75);
  outline: 2px dashed #000;
  outline-offset: -2px;
}

/* Errore: bordo rosso se si tenta il submit senza file */
.upload-area--error {
  background: rgba(255, 220, 220, 0.6);
  outline: 2px solid #c0392b;
  outline-offset: -2px;
}

.upload-area--error .upload-icon,
.upload-area--error .upload-text {
  color: #c0392b;
}

/* ===================== INDEX ===================== */
.index-main {
  flex: 1 0 auto;
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  width: 100%;
}

@media (max-width: 1440px) {
  .index-main {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (max-width: 576px) {
  .index-main {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.index-list {
  display: flex;
  flex-direction: column;
}

.index-item {
  display: flex;
  align-items: center;
  padding: 18px 0;
  border-top: 2px solid #000;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  font-size: 1.1rem;
  transition: color 0.18s ease, padding-left 0.18s ease;
}

.index-item:last-child {
  border-bottom: 2px solid #000;
}

.index-item:hover {
  color: #686868;
  padding-left: 12px;
}

.index-name {
  flex: 1;
}

/* LAYOUT COOKIES E PRIVACY POLICY*/

.embed-container {
  position: relative;
  z-index: 1;
}

/* ===================== LIGHTBOX ===================== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.lightbox.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  user-select: none;
  filter: invert(1);
  transition: opacity 0.2s ease;
}

.lightbox-prev {
  left: 30px;
  background-image: url('../img/left-arrow.svg');
}

.lightbox-next {
  right: 30px;
  background-image: url('../img/right-arrow.svg');
}

.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: 0.6;
}

.lightbox-close {
  position: absolute;
  top: 30px;
  right: 40px;
  width: 40px;
  height: 40px;
  background-image: url('../img/close-icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  filter: invert(1);
  transition: transform 0.2s ease;
}

.lightbox-close:hover {
  filter: invert(0.5);
}

/* ===================== FOOTER ===================== */
.site-footer {
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: auto;
  background: #fff;
}

/* Solo margini laterali: la scorciatoia `margin: 0 auto` azzerava il `margin-top: auto` di
   .site-footer (stesso elemento, regola successiva), cioe' proprio quello che spinge il footer
   in fondo alla finestra sulle pagine corte. */
.footer-container {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  align-items: center;
  width: 100%;
}

.footer-left {
  flex: 1;
  text-align: left;
  min-width: 180px;
}

.footer-center {
  margin-right: 3%;
}

.link-footer {
  text-decoration: none;
  color: #000;
}

.link-footer:hover {
  text-decoration: none;
  color: #333;
}

.link-footer:focus,
.link-footer:focus-visible,
.link-footer:focus-within,
.link-footer .link-footer a:focus,
.link-footer .link-footer a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  color: #333;
}

@media (max-width: 768px) {
  .site-footer .row {
    flex-direction: column;
    gap: 8px;
    text-align: center !important;
  }

  .footer-left,
  .footer-center {
    text-align: center !important;
    margin: 0;
  }
}

/* ===================== SITO A BLOCCHI: TITOLI/CONTENUTO COMUNI ===================== */
/* ::selection e' gia' definito in cima al file (riga 19): colore scuro del sito, niente duplicati. */

.occhiello {
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #686868;
}

.blocco-titolo {
  font-size: 2rem;
  font-weight: bold;
  color: #000;
  margin: 0;
}

.blocco-sottotitolo {
  font-size: 1.15rem;
  font-weight: 600;
  color: #666;
}

@media (max-width: 576px) {
  .blocco-titolo {
    font-size: 1.5rem;
  }
}

/* Scala tipografica degli heading liberi nel contenuto RTE (guida §7.12): uniforme ovunque
   .contenuto viene renderizzato (blocco, figlio, progetto). */
.contenuto h1,
.contenuto h2,
.contenuto h3,
.contenuto h4,
.contenuto h5,
.contenuto h6 {
  line-height: 1.3;
  margin: 1.4em 0 0.4em;
}

.contenuto> :first-child {
  margin-top: 0;
}

.contenuto h1 {
  font-size: 1.5em;
}

.contenuto h2 {
  font-size: 1.3em;
}

.contenuto h3 {
  font-size: 1.15em;
}

.contenuto h4 {
  font-size: 1.05em;
}

.contenuto h5 {
  font-size: 1em;
}

.contenuto h6 {
  font-size: 0.9em;
}

/* ContenutoNumeroColonne (psblocco): impaginazione del contenuto su piu' colonne */
.contenuto-colonne-2 {
  columns: 2;
  column-gap: 2rem;
}

.contenuto-colonne-3 {
  columns: 3;
  column-gap: 2rem;
}

.contenuto-colonne-4 {
  columns: 4;
  column-gap: 1.5rem;
}

@media (max-width: 767px) {

  .contenuto-colonne-2,
  .contenuto-colonne-3,
  .contenuto-colonne-4 {
    columns: 1;
  }
}

/* Bottone dei blocchi (Link/LinkTesto): PSBlocco::getSkinBottone()/PSBloccoFiglio::getSkinBottone()
   restituiscono sempre 'btn-skin-transparent' (nessun catalogo psbottoneskin ancora popolato oltre
   quello). .btn-blocco e' la base, .btn-skin-transparent resta un modificatore di riserva per
   eventuali skin future dal catalogo. */
.blocco-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn-blocco {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.5rem;
  border: 1px solid #000;
  color: #000;
  background: transparent;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-blocco:hover {
  background: #000;
  color: #fff;
  text-decoration: none;
}

/* ===================== BLOCCO GENERICO ===================== */
.blocco-generico-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.blocco-figli {
  row-gap: 2.5rem;
}

.blocco-figlio-img {
  overflow: hidden;
  margin-bottom: 1rem;
}

.blocco-figlio-img img {
  width: 100%;
  height: auto;
  display: block;
}

.blocco-figlio-titolo {
  font-size: 1.15rem;
  font-weight: bold;
  margin: 0 0 0.35rem;
}

.blocco-figlio-sottotitolo {
  font-size: 1rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.blocco-figlio-contenuto {
  font-size: 0.95rem;
}

/* ===================== BLOCCO CONTATTI ===================== */
/* La pagina Contatti ha i recapiti al centro dello spazio vuoto fra header e footer, non
   appoggiati sotto la nav. Il centraggio verticale lo fa la sezione stessa: body e' gia' un
   flex column con min-height:100vh (in cima al file), quindi basta che questa sezione sia un
   flex item che si prende l'altezza avanzata (flex:1 0 auto) e centri il proprio contenuto.
   Il footer resta in fondo grazie al suo margin-top:auto. */
.blocco-contatti {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Stessa misura del footer (0.85rem bold): nel layout di riferimento i recapiti sono testo
   minuto, non un blocco di contenuto a dimensione piena.
   Colore a riposo #686868, lo stesso grigio delle voci di nav non attive: nel layout i recapiti
   sono grigi, il nero e' lo stato di richiamo (hover), non quello di partenza. */
.contatti-contenuto {
  font-size: 0.85rem;
  font-weight: bold;
  line-height: 1.6;
  color: #686868;
}

.contatti-contenuto p {
  margin: 0;
}

.contatti-contenuto a {
  color: #686868;
  text-decoration: none;
  transition: color 0.18s ease;
}

.contatti-contenuto a:hover,
.contatti-contenuto a:focus-visible {
  color: #000;
  text-decoration: none;
}

/* ===================== CUSTOM CODE ===================== */
.custom-code-embed {
  margin-top: 1rem;
}

/* ===================== GALLERY ORIZZONTALE (scroller: drag + frecce) ===================== */
/* Riusata identica dalla galleria overview di template/progetto/progetto.tpl. */
.gallery-orizzontale {
  position: relative;
}

/* Lo scroller vive dentro .gallery-viewport, che porta anche la classe .container: la prima
   immagine parte quindi esattamente sul bordo del container, come i titoli e i blocchi di
   testo. Il padding laterale fisso di prima (1.5rem) coincideva col container solo fra 576 e
   1440px: sopra i 1440 la galleria sbordava di 48px per lato, sotto i 576 di 8px. */
.gallery-viewport {
  position: relative;
}

.gallery-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: default;
  touch-action: pan-y;
}

.gallery-track::-webkit-scrollbar {
  display: none;
}

.gallery-track.is-scrollable {
  cursor: grab;
}

.gallery-track.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.gallery-item {
  flex: 0 0 auto;
  height: 60vh;
  margin: 0;
}

.gallery-item img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  object-fit: cover;
  -webkit-user-drag: none;
}

.gallery-caption {
  padding-top: 0.5rem;
  max-width: 320px;
}

.gallery-caption-titolo {
  font-weight: bold;
}

.gallery-caption-sottotitolo {
  color: #686868;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.gallery-nav:hover {
  opacity: 1;
}

.gallery-nav-prev {
  left: 1rem;
}

.gallery-nav-next {
  right: 1rem;
}

.gallery-nav.is-hidden {
  display: none;
}

@media (max-width: 576px) {
  .gallery-item {
    height: 40vh;
  }
}

/* ===================== IMMAGINE FULLWIDTH (hero) ===================== */
.immagine-fullwidth {
  position: relative;
  overflow: hidden;
}

.immagine-fullwidth-img {
  width: 100%;
  height: 70vh;
  object-fit: cover;
  display: block;
}

.immagine-fullwidth-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 2rem clamp(1.5rem, 5vw, 4rem);
  max-width: 640px;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}

.immagine-fullwidth-overlay .occhiello,
.immagine-fullwidth-overlay .blocco-titolo,
.immagine-fullwidth-overlay .blocco-sottotitolo {
  color: #fff;
}

.immagine-fullwidth-overlay .btn-blocco {
  border-color: #fff;
  color: #fff;
}

.immagine-fullwidth-overlay .btn-blocco:hover {
  background: #fff;
  color: #000;
}

@media (max-width: 576px) {
  .immagine-fullwidth-img {
    height: 50vh;
  }

  .immagine-fullwidth-overlay {
    padding: 1.5rem;
  }
}

/* ===================== FORM CAREERS: privacy check + esito AJAX ===================== */
.form-wrapper .form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.form-wrapper .form-check-label {
  font-size: 0.9rem;
  color: #333;
}

.form-wrapper .form-check-label a {
  color: #000;
  text-decoration: underline;
}

.careers-result {
  max-width: 760px;
  margin: 0 auto 1.5rem;
  padding: 14px 18px;
  font-weight: bold;
  text-align: center;
}

.careers-result--success {
  background: #e6f4ea;
  color: #1e7a34;
  border: 1px solid #1e7a34;
}

.careers-result--error {
  background: #fbe9e7;
  color: #c0392b;
  border: 1px solid #c0392b;
}

/* Il back-to-top (§7.15 della guida) e' stato rimosso da questo sito su richiesta: niente
   markup in FOOT.tpl, niente initBackToTop in main.js, niente regole qui. */

/* ===================== SPLASH VIDEO DI APERTURA ===================== */
/* Nascosto di default e mostrato solo quando lo script inline in HEAD.tpl mette .splash-show
   sull'<html>. L'inverso (visibile di default, nascosto via JS) lascerebbe il sito coperto
   dallo splash per chi ha il JS disattivato. */
.splash-video {
  display: none;
}

html.splash-show .splash-video {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
  text-decoration: none;
  /* Il mix-blend-mode del testo deve fondersi col video, non con quello che c'e' sotto
     l'overlay: isolation crea il contesto di fusione che lo delimita a questo strato. */
  isolation: isolate;
}

/* Lo scroll della pagina sotto resta bloccato finche' si e' sullo splash. Non serve sbloccarlo:
   l'unica uscita e' il click, che porta su un'altra pagina. */
html.splash-show body {
  overflow: hidden;
}

.splash-video-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* difference su testo bianco da' |255 - sfondo|: la scritta si scurisce sui toni chiari (cielo)
   e vira sui complementari su quelli scuri (il blu del mare la porta sul sabbia). E' l'effetto
   degli screenshot. Sul nero di partenza, prima che il video parta, resta bianca. */
.splash-video-logo {
  position: relative;
  z-index: 1;
  color: #fff;
  mix-blend-mode: difference;
  font-size: clamp(1.4rem, 5vw, 4rem);
  font-weight: bold;
  line-height: 1;
  text-align: center;
  padding: 0 1rem;
  /* Il click deve arrivare al link che avvolge tutto, non fermarsi sul testo. */
  pointer-events: none;
}