@font-face {
  font-family: 'NHaasGroteskTXPro';
  src: url('fonts/NHaasGroteskTXPro-75Bd.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NHaasGroteskTXPro-Regular';
  src: url('fonts/NHaasGroteskTXPro-55Rg.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NHaasGroteskDSPro-Regular';
  src: url('fonts/NHaasGroteskDSPro-55Rg.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NeueHaasGrotDispMedium';
  src: url('fonts/NeueHaasGrotDisp-65Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NeueHaasGrotDisp';
  src: url('fonts/NeueHaasGrotDisp-75Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'NHaasGroteskTXPro', Arial, sans-serif;
  background-color: white;
  color: black;
  user-select: none;
}

#overviewWrapper {
  min-height: 100vh;
  position: relative;
  padding: 0;
}

/* Top bar - sfondo bianco fisso sempre presente */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 40px;
  background-color: white;
  z-index: 19;
}

/* Top Left - link di ritorno */
#topLeftLabel {
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 20px;
  font-weight: 700;
  color: black;
  z-index: 20;
  user-select: none;
  font-family: 'NHaasGroteskTXPro', Arial, sans-serif;
  line-height: 1.1;
}

.studio-link {
  color: black;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.studio-link:hover {
  opacity: 0.7;
}

/* Top Right - Back link */
#topRightBack {
  position: fixed;
  top: 10px;
  right: 10px;
  font-size: 20px;
  font-weight: 700;
  color: black;
  text-decoration: none;
  user-select: none;
  font-family: 'NHaasGroteskTXPro', Arial, sans-serif;
  z-index: 20;
  line-height: 1.1;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

#topRightBack:hover {
  opacity: 0.7;
}

/* Mobile/Desktop toggle */
.desktop { display: inline; }
.mobile { display: none; }
@media (max-width: 600px) {
  .desktop { display: none; }
  .mobile { display: inline; }
}

/* Overview container - MODIFICATO per mezza pagina */
.overview-container {
  display: flex;
  justify-content: flex-start; /* Allinea a sinistra */
  align-items: flex-start;
  min-height: 100vh;
  padding-top: 0;
  position: relative;
}

/* DIVISORE VERTICALE - Filo nero sottile al centro - PARTE DA 10PX DALL'ALTO */
.overview-container::after {
  content: '';
  position: fixed;
  left: 50%;
  top: 10px; /* INIZIA a 10px dal margine superiore */
  bottom: 0;
  width: 1px;
  background-color: black;
  z-index: 100; /* Z-INDEX ALTO per stare sopra la fascia bianca */
}

/* Overview Grid - RIDOTTO A MEZZA PAGINA - ALLINEATO CON SPAZIO STUDIO - MARGINE DESTRO 10PX */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* RIDOTTO da 7 a 5 colonne */
  gap: 3px 6px; /* RIDOTTO: gap più piccolo */
  width: calc(50vw - 20px); /* MEZZA PAGINA - 20px (10px sinistra + 10px destra dal filo) */
  max-width: calc(50vw - 20px);
  margin-top: 60px; /* RIDOTTO margine superiore */
  margin-left: 10px; /* STESSO MARGINE di "Spazio Studio" (top-left: 10px) */
  padding: 0;
  box-sizing: border-box;
}

/* Project Description - FORMATO COMPATTO "Nome progetto / 1 to X" */
.project-description {
  grid-column: 1 / -1;
  margin-bottom: 2px; /* ULTERIORMENTE RIDOTTO da 4px a 2px - ancora più vicino */
  margin-top: 12px; /* RIDOTTO margine sopra */
  font-size: 11px; /* MOLTO PIÙ PICCOLO */
  font-weight: 700;
  color: black;
  font-family: 'NHaasGroteskTXPro', Arial, sans-serif;
  line-height: 1;
  max-width: 100%;
  text-transform: capitalize; /* SOLO INIZIALE MAIUSCOLA */
  letter-spacing: 0; /* NESSUN TRACKING */
}

.project-description:first-child {
  margin-top: 0; /* Primo progetto senza margine superiore */
}

/* Overview Card - DIMENSIONI RIDOTTE */
.overview-card {
  background: white;
  cursor: pointer;
  transition: opacity 0.3s ease;
  position: relative;
}

.overview-card:hover {
  opacity: 0.8;
}

/* Immagine della card - DIMENSIONI RIDOTTE */
.card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 3px; /* RIDOTTO margine */
  opacity: 0.3;
  transition: opacity 0.5s ease;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.card-image.loaded {
  opacity: 1 !important;
}

/* Elemento per la sfocatura in hover */
.card-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;
  filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  background-color: transparent;
}

/* Hover: mostra sfocatura */
.overview-card:hover .card-image::before {
  opacity: 1;
}

/* Hover: riduci opacità immagine originale */
.overview-card:hover .card-image {
  opacity: 0.2;
}

/* NOME FILE A SINISTRA - ADATTATO PER DIMENSIONI RIDOTTE */
.overview-card::before {
  content: attr(data-filename);
  position: absolute;
  top: calc(50% - 1.5px); /* CENTRATO nella foto ridotta */
  left: 5px; /* MARGINE ridotto */
  transform: translateY(-50%);
  font-family: 'NHaasGroteskTXPro', Arial, sans-serif;
  font-size: 9px; /* FONT RIDOTTO */
  font-weight: 700;
  color: #000000;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: left;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  line-height: 1;
}

/* PESO FILE A DESTRA - ADATTATO PER DIMENSIONI RIDOTTE */
.overview-card::after {
  content: attr(data-filesize);
  position: absolute;
  top: calc(50% - 1.5px); /* CENTRATO nella foto ridotta */
  right: 5px; /* MARGINE ridotto */
  transform: translateY(-50%);
  font-family: 'NHaasGroteskTXPro', Arial, sans-serif;
  font-size: 9px; /* FONT RIDOTTO */
  font-weight: 700;
  color: #000000;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: right;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  line-height: 1;
}

/* Mostra nome file e peso in hover */
.overview-card:hover::before,
.overview-card:hover::after {
  opacity: 1;
}

/* Numero della card - RIDOTTO CON NUOVO FONT - MARGIN RIDOTTO */
.card-number {
  font-size: 24px; /* RIDOTTO da 38px */
  font-weight: 400;
  line-height: 0.8;
  margin-bottom: 2px; /* RIDOTTO da 3px a 2px - più vicino alle foto */
  color: black;
  font-family: 'NHaasGroteskDSPro-Regular', Arial, sans-serif; /* NUOVO FONT */
  letter-spacing: -0.05em;
}

/* Hover project name - RIMANE CENTRALE */
#hoverProjectName {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'NeueHaasGrotDispMedium', Arial, sans-serif;
  font-size: 7.2vw;
  font-weight: 500;
  color: black;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 9999;
  line-height: 0.8;
  text-align: center;
  max-width: 90vw;
  word-wrap: break-word;
}

#hoverProjectName.show {
  opacity: 1;
}

/* Responsive - Tablet */
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .overview-grid {
    grid-template-columns: repeat(4, 1fr); /* RIDOTTO da 5 a 4 */
    width: 60vw; /* AUMENTATO per tablet */
  }
  
  .card-number {
    font-size: 20px;
  }
  
  .project-description {
    font-size: 10px; /* ANCORA PIÙ PICCOLO per tablet */
    margin-top: 10px;
    margin-bottom: 5px;
  }
  
  #hoverProjectName {
    font-size: 6vw;
  }
}

/* Responsive - Mobile */
@media screen and (max-width: 768px) {
  .overview-grid {
    grid-template-columns: repeat(3, 1fr);
    width: 90vw; /* QUASI TUTTA LA LARGHEZZA su mobile */
    margin-left: 5vw;
    margin-top: 50px;
  }
  
  .card-number {
    font-size: 18px;
  }
  
  .project-description {
    font-size: 9px; /* ANCORA PIÙ PICCOLO per mobile */
    line-height: 1;
    margin-top: 8px;
    margin-bottom: 4px;
  }
  
  #hoverProjectName {
    font-size: 12vw;
  }
  
  /* Mobile: font ancora più piccolo */
  .overview-card::before,
  .overview-card::after {
    font-size: 8px;
  }
}