/* =========================
   LAYOUT generale
   ========================= */

html, body { height: 100%; }

/* container scrollabile (come Orb) */
.project{
  height: 100vh;
  overflow-y: auto;
  width: 100%;
  background-color: white;
}

/* pagina con spazio per menubar fissa */
.project .page{
  padding-top: 50px;
}

/* spaziatura verticale tra sezioni: fluida */
.project .section{
  width: 100%;
  position: relative;
  margin-top: clamp(100px, 8vh, 260px);
}

.project .cover.section{ margin-top: 0; }

/* container standard */
.project .container{
  width: min(1200px, 96vw);
  margin-inline: auto;
}

@media (max-width: 700px){
  .project .page{
  padding-top: 50px;
}
}

/* =========================
   MENUBAR
   ========================= */

.project .menubar{
  height: 50px;
  background: #00000073;          /* prima era transparent */
  backdrop-filter: blur(3px);     /* nuovo */
  -webkit-backdrop-filter: blur(3px); /* safari */

  position: fixed;
  left: 0;
  width: 100vw;
  z-index: 999;
  padding-inline: 14px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  mix-blend-mode: difference;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.project .menubar.is-hidden{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

.project .name-btn{
  background: transparent;
  justify-self: start;
  border: 0;
  padding: 0;
  cursor: none;
  transition: opacity 0.2s ease-in-out;

  font-family: var(--Super_text-font-family);
  font-weight: 500;
  color: var(--blancos);
  font-size: var(--Super_text-font-size);
  letter-spacing: var(--Super_text-letter-spacing);
  line-height: var(--Super_text-line-height);
  font-style: var(--Super_text-font-style);
}
.project .name-btn:hover{
  opacity: 0.75;
  text-decoration: underline;
}

.project .titolino{
  margin: 0;
  font-weight: 500;
  justify-self: center;
  text-align: center;
  font-family: var(--titoli_menu-font-family);
  color: var(--blancos);
  font-size: 14px;
  line-height: normal;
}


.project .frecce_progetti{
  justify-self: end;
  position: relative;
  height: 12px;
}
/* al posto di .freccia_avantiSU / .freccia_indietroSU */

.project .freccia-btn{
  position: absolute;
  top: 0;

  width: 18px;
  height: 12px;

  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;

  cursor: none;
  transition: opacity 0.2s ease-in-out;
}

.project .freccia-btn--next{ right: 20px; }
.project .freccia-btn--prev{ right: 55px; }

.project .freccia-btn:hover{ opacity: 0.6; }

/* SVG inline: prende il colore della menubar */
.project .freccia-svg{
  width: 18px;
  height: 12px;
  display: block;

  fill: none;
  stroke: white;
  stroke-linejoin: bevel;
  stroke-width: 2px;
}

/* la freccia “prev” è la stessa ma specchiata */
.project .freccia-btn--prev .freccia-svg{
  transform: scaleX(-1);
  transform-origin: center;
}


/* mobile dimensione titolino e nome */
@media (max-width: 700px){

  .project .menubar{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name arrows"
      "title title";
    row-gap: 14px;
    align-items: center;

    /* IMPORTANT: evita che roba “sfori” e rompa l’allineamento */
    width: 100vw;
    left: 0;
    right: auto;
  }

  .project .name-btn{
    grid-area: name;
    justify-self: start;
    font-size: 14px;
    min-width: 0;
    transform: translateY(10px);
  }


  /* TOLTE per swipe, in caso rimettere 
    grid-area: arrows;
    justify-self: end;
    height: 14px;
    min-width: 0;
    scale: 0.8;*/
  .project .frecce_progetti{
  display: none;
  }


  .project .titolino{
    grid-area: title;
    justify-self: start;
    text-align: left;

    width: 100%;
    max-width: 92vw;
    font-size: 10px;
    margin: 0;
    min-width: 0;
  }
}



/* =========================================================
   COVER
   ========================================================= */

.project .cover{
  position: relative;
  width: 100vw;
}

.project .cover_img{
  width: 100vw;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
}

.project .cover_text{
  font-family: var(--testi-font-family);
  text-decoration: underline;
  text-decoration-thickness: 0.4px;        /* ← QUI */
  text-underline-offset: 0.3em;
  font-weight: 100;
  font-size: clamp(1.2rem, 1.35vw, 1.4rem);
  line-height: 1.35;
  color: var(--blancos);
  mix-blend-mode: difference;
}


.project .crediti,
.project .anno{
  position: absolute;
  bottom: 5vh;
  font-family: var(--testi-font-family), Helvetica;
  font-size: 18px;
  opacity: 0.85;
  color: var(--blancos);
  mix-blend-mode: difference;
}
.project .crediti{ left: 4vw; }
.project .anno{ right: 4vw; }


/* mobile cover */
@media (max-width: 700px){
  .project .cover_text,
  .project .crediti,
  .project .anno{
    position: static;
    width: min(92vw, 1100px);
    margin: 14px auto 0 auto;
    color: var(--neros);
    font-size: 14px;
  }
  }

 /* =========================================================
 BLOCCO IMMAGINI+TESTO
  ========================================================= */

/*bisogna cambiare .collectuscia-page .journey_img*/
.project .img_img{
  margin-top: clamp(80px, 16vh, 240px);
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
/*bisogna cambiare .collectuscia-page .body_text*/
.project .img_text{
  margin: 4vh;
  max-width: 80vw;
  justify-self: center;

  font-family: var(--testi-font-family);
  font-weight: var(--testi-font-weight);
  font-size: var(--testi-font-size);
  letter-spacing: var(--testi-letter-spacing);
  line-height: var(--testi-line-height);
  color: var(--neros);
  text-indent: var(--testi-text-indent);
}

/* =========================
   Full-width IMMAGINI
   ========================= */
/*bisogna cambiare .collectuscia-page .gallery_img*/
.project .full_img{
  width: 100vw;
  justify-self: center;
  height: auto;
  display: block;
}

/* =========================
   FRECCIA Horizontal scroll 
  ========================= */

.project .hscroll-arrow{
  position: absolute;
  top: 50%;
  right: clamp(22px, 4vw, 64px);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;

  background: transparent;
  border: 0;
  padding: 0;

  cursor: none;
  transition: opacity .3s ease, transform .2s ease;
  z-index: 5;
}

.project .hscroll-arrow:hover{ transform: translateY(-50%) scale(1.05); }
.project .hscroll-arrow.is-hidden{
  opacity: 0;
  pointer-events: none;
}


/* =========================
   HOME CLONATA 
  ========================= */
.project .snap-end{
  min-height: 100vh;
  margin-top: 0;
}

/* stato pagina corrente – home clonata */
.project .menu a.is-current{
  color: var(--blancos);        /* il tuo blu */
  pointer-events: none;    /* non cliccabile */
  cursor: default;
  text-decoration: line-through;
}