/* ============================================================
   1. RESET & REGOLE GLOBALI
============================================================ */
html { 
  scrollbar-gutter: stable; 
  background-color: #fff; 
}

*, *::before, *::after { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; 
  color: #000; 
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  /* RIMOZIONE TOTALE CORSIVI */
  font-style: normal !important;
}

/* Neutralizza ogni tag che potrebbe generare corsivo */
em, i, strong, .caption, .text, p, span, a { 
  font-style: normal !important; 
}

/* ============================================================
   2. HEADER & NAV (18px)
============================================================ */
.site-header { 
  padding: 48px 48px 64px; 
}

.site-nav { 
  display: flex; 
  justify-content: center; 
  gap: 64px; 
}

.site-nav a { 
  font-size: 18px; 
  color: #000; 
  text-decoration: none; 
}

.site-nav a:hover { 
  text-decoration: underline; 
}

.wrap { 
  padding: 0 48px 64px; 
  width: 100%; 
}

/* ============================================================
   3. INDEX (Statement Minimale)
============================================================ */
.home { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  min-height: 50vh; 
}

.home .text { 
  max-width: 700px; 
  text-align: justify; 
  font-size: 15px; 
  line-height: 1.6; 
}

/* ============================================================
   4. WORKS GRID (3 colonne)
============================================================ */
.works { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 5px; 
}

.work { 
  position: relative; 
  aspect-ratio: 1/1; 
  overflow: hidden; 
  display: block; 
}

.work img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: opacity 0.3s; 
}

.work:hover img { 
  opacity: 0.3; 
}

.work::after {
  content: attr(data-title); 
  position: absolute; 
  inset: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 20px; 
  text-align: center; 
  font-size: 14px; 
  opacity: 0; 
  transition: opacity 0.3s; 
  color: #000; 
  pointer-events: none;
}

.work:hover::after { 
  opacity: 1; 
}

/* ============================================================
   5. PAGINE OPERA (Layout 2 colonne)
============================================================ */
.work-page { 
  display: flex; 
  flex-direction: column; 
  gap: 120px; 
}

/* Allineamento orizzontale automatico */
.work-item, 
.work-page:not(:has(.work-item)) {
  display: flex; 
  flex-direction: row; 
  gap: 64px; 
  align-items: flex-start;
}

/* Colonna Immagini (2/3) */
.images { 
  flex: 2; 
  line-height: 0; 
}

.images img { 
  width: 100%; 
  height: auto; 
  display: block; 
  margin-bottom: 20px; 
}

.images img:last-child { 
  margin-bottom: 0; 
}

/* Colonna Testo (1/3) */
.text { 
  flex: 1; 
  font-size: 15px; 
  line-height: 1.5; 
  position: relative; 
}

/* Sticky: il testo segue lo scroll solo nelle pagine a blocco unico */
.work-page:not(:has(.work-item)) .text { 
  position: sticky; 
  top: 48px; 
}

/* ------------------------------------------------------------
   HOVER LINGUA (Il sistema universale "Jolly")
------------------------------------------------------------ */
/* Funziona sia con .caption che con .text-inner */
.caption, .text-inner { 
  position: relative !important; 
  display: block; 
  width: 100%; 
}

/* Selettori che leggono sia .lang-it che .lang.lang-it */
[class*="lang-it"] { 
  display: block !important; 
  opacity: 1 !important; 
  transition: opacity 0.15s ease-in-out; 
}

[class*="lang-en"] { 
  position: absolute !important; 
  top: 0; 
  left: 0; 
  width: 100%; 
  opacity: 0 !important; 
  pointer-events: none; 
  transition: opacity 0.15s ease-in-out; 
}

/* Trigger dell'hover */
.text:hover [class*="lang-it"], 
.caption:hover [class*="lang-it"],
.text-inner:hover [class*="lang-it"] { 
  opacity: 0 !important; 
}

.text:hover [class*="lang-en"], 
.caption:hover [class*="lang-en"],
.text-inner:hover [class*="lang-en"] { 
  opacity: 1 !important; 
  pointer-events: auto !important; 
}

/* ============================================================
   6. RESPONSIVE (Mobile)
============================================================ */
@media (max-width: 1024px) {
  .works { 
    grid-template-columns: repeat(2, 1fr); 
  }
  
  .work-item, 
  .work-page:not(:has(.work-item)) { 
    flex-direction: column; 
    gap: 32px; 
  }
  
  .text { 
    position: static !important; 
    width: 100%; 
  }
  
  /* Su mobile le lingue sono impilate, niente hover */
  [class*="lang-en"] { 
    position: static !important; 
    opacity: 1 !important; 
    margin-top: 20px; 
    padding-top: 20px; 
    border-top: 1px solid #eee; 
    pointer-events: auto !important;
  }
  
  .text:hover [class*="lang-it"],
  .caption:hover [class*="lang-it"] { 
    opacity: 1 !important; 
  }
}

@media (max-width: 768px) {
  .works { 
    grid-template-columns: 1fr; 
  }
  
  .site-nav { 
    gap: 32px; 
  }
  
  .wrap { 
    padding: 0 24px 48px; 
  }
}