/*


 * ===================================
 * STILI SPECIFICI PER LA PAGINA NUS
 * Approccio: Desktop First
 * ===================================
 *
 * Struttura:
 * 1. Stili di base (per schermi grandi / desktop)
 * 2. Media Query per schermi via via più piccoli:
 * - Laptop (fino a 1200px)
 * - Tablet orizzontali (fino a 1024px)
 * - Tablet verticali / Smartphone grandi (fino a 768px)
 * - Smartphone piccoli (fino a 480px)
 */

/* ===================================
 * Sezione 1: Hero, Video e altri componenti
 * (Stili di base per Desktop)
 * =================================== */


/* ================================================================ */
/* === OVERRIDE Z-INDEX PER PAGINA NUS                          === */
/* ================================================================ */

/* Abbassa il livello dei bottoni globali solo in questa pagina */
.corner-button {
  z-index: 40;
}

#btnTopRight {
  z-index: 1000;
}

#hero-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: white;
  position: relative;
  z-index: 50;
  /* << Aggiungi questa riga */
}

#project-hero {
  flex-grow: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 40px 40px 40px calc(27px + 0.88vw);
  border-bottom: 2px solid black;
}

/* Contenitore per posizionare titolo e freccia insieme */
.hero-title-container {
  position: relative;
  padding-top: 80px;
  /* Spazio sopra al titolo per la freccia */
}

/* Stile per la freccia di scorrimento */
.scroll-down-arrow {
  position: absolute;
  top: 0;
  left: 0;
  text-decoration: none;
  color: black;
  font-size: 3rem;
  line-height: 1;
  animation: bounce 2.5s ease-in-out infinite;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-20px);
  }

  60% {
    transform: translateY(-10px);
  }
}

#project-hero h1 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: bold;
  /* Clamp() per un font-size fluido e controllato */
  font-size: clamp(3.5rem, 8vw, 7rem);
  margin: 0;
  max-width: 60%;
  /* Forza l'andata a capo su schermi larghi */
  line-height: 0.9;
  letter-spacing: -0.02em;
}

#glance-container {
  width: 100%;
  position: relative;
  border-bottom: 2px solid black;
  box-sizing: border-box;
  background-color: black;
  z-index: 2;
  /* Abbassato per non sovrapporsi a menu di navigazione futuri */
}

#glance-grid {
  display: grid;
  /* Già responsivo, ottimo per icone/loghi */
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 2px;
}

.glance-item {
  aspect-ratio: 1 / 1;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.glance-item:hover {
  background-color: black;
  transform: scale(1.05);
}

.glance-item:hover img {
  opacity: 0.7;
}

.glance-item img {
  width: 75%;
  height: 75%;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

.video-container {
  position: relative;
  width: 100%;
  line-height: 0;
  /* Rimuove spazi indesiderati sotto il video */
}

#myVideo {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.video-controls {
  position: absolute;
  bottom: 12%;
  left: 40px;
  display: flex;
  gap: 10px;
  z-index: 10;
}

/* =============================================================
 * Sezione 2: Griglia Branding
 * (Stili di base per Desktop)
 * ============================================================= */
.branding-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4 colonne su desktop */
  gap: 0px;
  background-color: white;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  width: 100%;
  padding: 0;
}

.branding-header {
  grid-column: 1 / -1;
  /* Si estende su tutte le colonne */
  background-color: black;
  color: white;
  padding: 20px 40px;
  text-align: left;
}

.branding-header h2 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  /* 24px */
  margin: 0;
}

.branding-item {
  aspect-ratio: 1 / 1;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  position: relative;
  transition: background-color 0.2s ease, color 0.2s ease;
  color: black;
  outline: 2px solid black;
  padding: 30px;
  text-align: center;
  box-sizing: border-box;
  /* Assicura che il padding sia incluso nelle dimensioni */
}

.branding-item:hover {
  background-color: black;
  color: white;
}

.branding-item img {
  max-width: 50%;
  max-height: 50%;
  object-fit: contain;
  margin-bottom: 15px;
}

.branding-item h3 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 1rem;
  /* 16px */
  margin: 0 0 15px 0;
}

.branding-item p {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  /* 14px */
  max-width: 35ch;
  text-align: center;
  line-height: 1.5;
}

/* Elemento a tutta larghezza (es. immagine app) */
.branding-item.full-width-app {
  grid-column: 1 / -1;
  aspect-ratio: unset;
  /* Rimuove il rapporto 1:1 */
  height: auto;
  padding: 0;
  width: 100%;
  outline: none;
}

.branding-item.full-width-app img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: cover;
  margin: 0;
  display: block;
  /* Rimuove eventuali spazi sotto l'immagine */
}

.branding-item.full-width-app h3,
.branding-item.full-width-app p {
  display: none;
}

.branding-item.full-width-app:hover {
  background-color: transparent;
  /* Nessun cambio di colore al hover */
}

/* * ===================================
* Sezione 3: PDF Viewer e Media Queries
* ===================================
*/
#pdfViewerContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 80px 40px;
  max-width: 70vw;
  margin: 0 auto;
}

#pdfCanvas {
  border: 2px solid black;
  width: 100%;
  height: auto;
}

.pdf-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
}

/* Stile per rendere il numero di pagina cliccabile */
/* Stile per il link "Back" nelle pagine progetto */
.back-to-link {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  /* Corpo normale */
  font-size: 1rem;
  /* 16px */
  color: black;
  text-decoration: underline;
  text-underline-offset: 4px;

  /* Spazio tra il link e il titolo h1 sotto di lui */
  margin-bottom: 1.5rem;
}

.back-to-link:hover {
  opacity: 0.6;
  /* Un leggero effetto al passaggio */
}

.page-num-display {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0 3px;
  /* Aggiunge un po' di spazio */
}

.page-num-display:hover {
  color: #555;
  /* Leggero cambio colore al passaggio del mouse */
}

/* Stile per l'input, nascosto di default */
.page-num-input {
  display: none;
  width: 50px;
  /* Larghezza per 3-4 cifre */
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  text-align: center;
  border: 1px solid black;
  border-radius: 3px;
  margin: 0 3px;
}

/* Nasconde le freccette dall'input di tipo 'number' */
.page-num-input {
  -moz-appearance: textfield;
}

.page-num-input::-webkit-outer-spin-button,
.page-num-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*BOOK*/

.book-container {
  max-width: 90vw;
  width: 100%;
  text-align: center;
}

#viewer-header {
  margin-bottom: 20px;
}

#viewer-header h2 {
  margin-bottom: 10px;
}

#viewer-header p {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  color: #333;
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  #viewer-header p {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
  }
}

#book-viewer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  min-height: 80vh;
  width: 100%;
}

.page-canvas {
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  border: 2px solid black;
  object-fit: contain;
  flex-shrink: 0;
}

[data-layout="single"] .page-canvas {
  max-width: 90vw;
}

[data-layout="spread"] .page-canvas {
  max-width: 50%;
}

.page-canvas.hidden {
  display: none;
}

#book-controls {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

#page-indicator {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  min-width: 120px;
}


/* ================================================================ */
/* === CODICE FINALE: SEZIONE INFO PROGETTO INLINE             === */
/* ================================================================ */

.project-info-section {
  width: 100%;
  background-color: #f8f9fa;
  padding: 80px 40px 80px calc(27px + 0.88vw);
  box-sizing: border-box;
}

.project-info-content {
  max-width: 1200px;
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: #333;
  text-align: left;
}

.project-info-content h2 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 20px;
  color: black;
}

.project-info-content p {
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.project-info-text {
  column-count: 2;
  column-gap: 4rem;
}

/* === MODIFICA PER ALLINEARE IN BASSO === */
/* === MEDIA QUERIES === */

/* Per schermi larghi (es. desktop) */
@media (max-width: 1024px) {
  .project-info-text {
    column-count: 1;
    column-gap: 0;
  }
}

/* Per schermi piccoli (es. smartphone) */
@media (max-width: 767px) {
  .project-info-section {
    padding: 60px 20px 60px 27px;
  }
}


/*
 * ===================================
 * MEDIA QUERIES
 * Adattamento per schermi più piccoli
 * ===================================
 */

/* --- Laptop (fino a 1200px) --- */
@media (max-width: 1200px) {
  #project-hero h1 {
    max-width: 75%;
  }
}


/* --- Tablet Orizzontali (fino a 1024px) --- */
@media (max-width: 1024px) {
  .project-info-section {
    padding-left: 29px;
  }

  #project-hero {
    padding: 30px;
    padding-left: 29px;
  }

  .branding-grid {
    grid-template-columns: repeat(3, 1fr);
    /* 3 colonne per tablet */
  }

  .branding-item {
    padding: 25px;
  }
}


/* --- Tablet Verticali e Smartphone Grandi (fino a 768px) --- */
@media (max-width: 768px) {
  #project-hero {
    padding: 20px 20px 20px 27px;
    justify-content: center;
    /* Centra verticalmente il contenuto nell'area rimanente */
  }

  .hero-title-container {
    padding-top: 60px;
  }

  .scroll-down-arrow {
    font-size: 2.5rem;
  }

  #project-hero h1 {
    max-width: 100%;
    /* Occupa tutta la larghezza */
    font-size: clamp(2.5rem, 12vw, 4.5rem);
    /* Ricalibra il font per schermi medi */
  }

  .video-controls {
    left: 20px;
    bottom: 8%;
  }

  .branding-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 colonne */
  }

  .branding-header {
    padding: 15px 20px;
  }

  .branding-header h2 {
    font-size: 1.25rem;
  }

  .branding-item {
    padding: 20px;
  }

  /* ======================================= */
  /* === INIZIO BLOCCO CON LA CORREZIONE === */
  /* ======================================= */

  #book-viewer {
    /* Non serve più 'flex-direction: column' perché nascondiamo la seconda pagina */
  }

  .page-canvas {
    /*
     * CORREZIONE: Invece di forzare una larghezza fissa (che causa lo "stretch"
     * verticale su pagine alte), impostiamo dei limiti massimi sia in
     * larghezza (vw) che in altezza (vh). Il browser manterrà le proporzioni
     * corrette rispettando questi limiti.
     */
    max-width: 90vw;
    /* Limite larghezza: 90% della larghezza della finestra */
    max-height: 75vh;
    /* Limite altezza: 75% dell'altezza della finestra */

    /* Le prossime due regole vengono ereditate, ma le esplicito per chiarezza */
    width: auto;
    height: auto;
  }

  #canvas-right.page-canvas {
    /* Corretto, nasconde la seconda pagina su mobile per una visualizzazione singola */
    display: none;
  }

  /* =================================== */
  /* === FINE BLOCCO CON LA CORREZIONE === */
  /* =================================== */
}


/* --- Smartphone Piccoli (fino a 480px) --- */
@media (max-width: 480px) {
  #hero-wrapper {
    min-height: 500px;
  }

  #project-hero h1 {
    font-size: clamp(2rem, 15vw, 3rem);
    /* Ancora più piccolo per schermi stretti */
    line-height: 1;
  }

  .branding-grid {
    grid-template-columns: 1fr;
    /* 1 colonna per smartphone */
  }

  #glance-grid {
    /* Aumenta la dimensione minima per una migliore toccabilità */
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }

  .book-container {
    padding: 40px 15px;
    /* Padding minimo per schermi molto stretti */
  }

  #viewer-header h2 {
    font-size: 1.5rem;
  }

  #book-controls {
    flex-wrap: wrap;
    /* Permette ai controlli di andare a capo se non c'è spazio */
    gap: 15px;
  }
}