/*IMPOSTAZIONI DI BASE*/
/* PALETTE */
:root {
  --bg: #000;
  --text: #ffffff;


/* TIPOGRAFIA */
--font-primary: "Sora", sans-serif;
--font-secondary: "Work Sans", sans-serif;
}

* {
  /* outline: 1px solid red; */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
}


/* GRID CONTAINER */
.grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3rem;
  padding: 1rem;
  row-gap: 1rem;
  width: 100%;
  max-width: 1200px;
  /* margin: 0 40px; */
  margin: 0 auto;
  box-sizing: border-box;
  /* position: relative; */
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3rem;
  padding: 1rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
}

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* .hero {
  grid-column: 1 / 9;
  margin: 0; */
  /* grid-row: 1 / 8; */
  /* display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 1;
} */

.hero h1 {
  font-size: 115pt;
  line-height: 1;
  font-weight: 600;
  margin: 0;
}

h1{
  padding: 0 !important;
  margin: 0 !important;

}

/* FRECCIA BASSO DX */
.arrow {
  grid-column: 8 / 9 ;
  font-size: 3rem;  
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.2s ease;
  z-index: 10;
  display: flex;
  justify-content: right;
}

.arrow:hover {
  transform: translateX(4px);
  border-bottom: 4px solid currentColor;
}

.menu-wrapper {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;   /* uguale a .grid */
  height: auto;
  z-index: 1000;
  pointer-events: none; /* permette di cliccare solo sul menu dentro */
}

.menu2 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: auto;     /* attiva interazioni sul menu */
  padding: 1rem;
  font-size: 2rem;
  font-family: var(--font-primary);
  text-align: right;
  line-height: 1.1;
}

.menu2 ul {
  list-style: none;
}

.menu2 a {
  color: var(--text);
  text-decoration: none;
  display: block;
   right: 40px; /* uguale al padding/margin del container o della griglia */
  bottom: 1rem;
}

.menu2 a.active,
.menu2 a:hover {
  font-weight: 700;
}

/* FOOTER */
.portfolio-footer{
  grid-column: 1 / 9 !important;
  font-family: var(--font-secondary);
  font-size: 14px; 
  line-height: 1.4;
  text-align: center;
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.portfolio-footer p  {
  margin: 0;
}

.portfolio-footer a {
  color: var(--text);
  text-decoration: none;
}

.portfolio-footer a:hover {
  text-decoration: underline;
}

/* ABOUT */
.about-title {
  grid-column: 1 / 4;
  grid-row: 1;
  font-size: 10vw;
  line-height: 1;
  font-weight: 600;
  padding: 0 !important;
}

.about-intro {
  grid-column: 1 / 4;
  /* grid-row: 2; */
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  line-height: 1.4;
  max-width: 32ch;
  margin-bottom: 1.5rem;
}

.about-edu {
  grid-column: 4 / 7;
  /* grid-row: 2; */
}

.about-edu p {
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  line-height: 1.4;
  max-width: 32ch;
  margin-bottom: 1.5rem;
}

.about-photo {
  grid-column: 7 / 9;
  /* grid-row: 1 / 3; */
}

.about-photo img {
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
  display: block;
}

.download-cv {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-secondary);
  color: var(--text);
  text-decoration: none;
}

.download-cv:hover {
  text-decoration: underline;
}

/* CONTACT */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  height: 100vh;
  padding: 2rem;
}

.contact-title  { 
grid-column: 1; 
grid-row: 1; 
font-size: 10vw; 
line-height: 0.9; 
font-weight: 600; 
}

.contact-form-grid {
  grid-column: 1 / 8;
  column-gap: 15rem;
  row-gap: 4rem;
  margin-top: 2rem;
  font-family: 'Work Sans', sans-serif;
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field label {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}

.form-field input {
  background: transparent;
  border: none;
  border-bottom: 2px solid white;
  color: white;
  font-size: 1.2rem;
  padding: 0.4rem 0;
  outline: none;
}

.form-button {
  grid-column: 1;
  margin-top: 1.5rem;
}

.form-button button {
  background: white;
  border: none;
  border-radius: 2rem;
  padding: 0.6rem 2rem;
  font-size: 1.2rem;
  font-family: 'Work Sans', sans-serif;
  cursor: pointer;
}

.consent-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: 'Work Sans', sans-serif;
  font-size: 8pt;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 2rem;
  width: 100%;
  max-width: 500px;
  text-align: left;
}

.consent-wrapper input[type="checkbox"] {
  margin-top: 0.2rem;
  transform: scale(1.2);
  cursor: pointer;
}

.consent-wrapper a {
  color: var(--text);
  text-decoration: none;
}

.consent-wrapper a:hover {
  font-weight: 600;
}

/* WORKS */
.works-title {
  grid-column: 1 / 9; 
  grid-row: 1;
  font-size: 10vw;
  line-height: 0.9;
  font-weight: 600;
  z-index: 50;
  margin: 0;
}

/* ANTEPRIME*/
.work-item {
  width: 100%;
  height: auto;
  transform: scale(1);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.work-item.show {
  opacity: 1;
  transform: translateY(0);
}

.work-item img {
  width: 100%;
  object-fit: contain;
  display: block;
}

/* DIDASCALIA (nascosta prima) */
.work-item .caption {
display: none !important;
}

/* DIDASCALIA IMMAGINI HOVER */
.work-item:hover {
 transform: scale(1.1) !important;
  transition: transform 0.3s ease !important;
  z-index: 10 !important;
}

/* IL PUNTO DI PARTENZA */
.w1 {
  grid-column: 1 / span 3;
  grid-row: 1;
  margin-top: 150px;
}

/* L'ECO CHE SI FA SENTIRE */
.w3 {
  grid-column: 4 / 6;
  grid-row: 1;
  width: 15vw;
  z-index: 1;
}

.w3a{
  grid-column: 5 / 7;
  grid-row: 1;
  width: 20vw;
  z-index: 1;
}

/* BRUT MA BUN */
.w2 {
  grid-column: 5/7;
  grid-row: 1;
  margin-top: 250px;
  width: 15vw;
  z-index: 2;
}

.w2a{
  grid-column: 6/8;
  grid-row: 1;
  margin-top: 250px;
  width: 20vw;
  z-index: 2;
}

/* JUNIPERUS */
.w5 {
  grid-column: 6 / 8;
  grid-row: 1;
  width: 100%;
}

/* FAMILY */
.w7 {
  grid-column: 1 / 2;
  grid-row: 1;
  margin-top: 450px;
  width: 15vw;
  z-index: 1;
}

/* IL CONSEVATORE */
.w4 {
  grid-column: 3/7;
  grid-row: 1;
  margin-top: 450px;
  width: 40vw;
}

/* PENNA E FOGLIO */
.w8 {
  grid-column: 7/8;
  grid-row: 1;
  margin-top: 320px;
  width: 15vw;
  z-index: 1;
}

/* THE SONG OF THE BREAK */
.w9 {
  grid-column: 1 / span 5;
  grid-row: 1 / span 1;
  width: 30vw;
  padding-top: 9vw;
}


/* ACCORDION X CATEGORIE WORKS */
.works-accordion {
  grid-column: 1 / 8;
  grid-row: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.accordion-toggle {
  background: none;
  border: none;
  color: white;
  font-size: 10vw; 
  line-height: 0.9;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.accordion-arrow {
  font-size: 5vw; 
  transition: transform 0.3s ease;
  display: inline-block;
  z-index: 2;
}

.accordion-toggle[aria-expanded="true"] .accordion-arrow i{
  transform: rotate(180deg);
  display: inline-block;
}

.accordion-menu {
  list-style: none;
  padding: 0;
  display: none;
  margin-top: 0.5vw;
  flex-direction: column;
  gap: 0.5rem;
}
.accordion-menu li{
z-index: 3;
}
.accordion-menu.show {
  display: flex;
}

.accordion-menu a {
font-size: 6vw;
line-height: 1;
font-weight: 300;
background: var(--bg);
color: white;
text-decoration: none;
text-transform: lowercase;
display: inline-block;
box-decoration-break: clone; 
height: auto;
}

.accordion-menu a:hover {
  font-weight: 600;
}

/* PAGINA PROGETTO: BRUT MA BUN */
.project-tags {
  color: var(--bg);
  border: none;
  cursor: pointer;
}

.project-tags .tag {
  background: var(--text);
  border-radius: 2rem;
  padding: 0.6rem 2rem;
  font-size: 8pt;
  font-family: 'Work Sans', sans-serif;
  text-decoration: none;
  color: inherit;
  transition: font-weight 0.2s ease;
}

.project-tags .tag:hover {
font-weight: 600;
}

.project-grid {
display: grid;
grid-column: 1/9;
gap: 15px;
/* padding: 25px; */
height: auto;
}

/* Header: colonne 1-5 */
.project-header {
grid-column: 1 / 7;
}

.project-title{ 
font-size:54pt; 
grid-column: 1 / 7;
line-height:0.9; 
font-weight:600; 
padding: 0 0 3vw 0;
}

.project-intro{ 
grid-column: 1 / 7;
font-family:var(--font-secondary); 
max-width:32ch; 
}

/* Aside: colonne 6-8 */
.project-aside {
  grid-column: 6 / 9;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  white-space: nowrap;
  overflow: visible;
  padding: 1rem;
}

.next-work { 
  grid-column: 7 / 9;
  max-width: auto;
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  text-decoration: none;
  color: var(--text);
  z-index: 1;
}

.next-work:hover {
  font-weight: 600;
}

.project-tags{ 
text-align:right; 
font-family:var(--font-secondary); 
}

/* Galleria principale: colonne 1-5 */
.project-gallery {
  grid-column: 1 / 6;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Galleria secondaria: colonne 6-8 */
.project-side-gallery {
  grid-column: 6 / 9;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.main-img img{ 
width:100%; 
display:block; 
object-fit:cover; 
}

.side-img{
  width: 100%;
  overflow: visible;     
}

.side-img img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* COLONNA DX */
.project-side-gallery{
  grid-column: 6 / 8;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-self: start;
}

/* FRECCIA TORNA SU */
.return-top{
  grid-column: 7 / 9;
  max-width: auto;
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  text-decoration: none;
  color: var(--text);
  z-index: 5;
  cursor: pointer;
}

.return-top:hover{
font-weight: 600;
}

/* PAG. ART DIRECTION E IDENTITY */
.next-section {
  grid-column: 7 / 9;
  max-width: auto;
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  text-decoration: none;
  color: var(--text);
  z-index: 1;
}

.next-section:hover {
font-weight: 600;
}

/* CURSORE */
html, body, * {
  cursor: url("../img/xp-cursor.png") 0 0, auto;
}

/* MEDIA QUERY x TABLET<= 800px */
@media (max-width: 800px) {
.hero h1,
  .about-title,
  .contact-title,
  .works-title,
  .accordion-toggle {
  font-size: 60pt;
  }

.portfolio-footer {
display: block;
width: 100%;
max-width: 1200px; /* uguale alla tua griglia desktop */
grid-column: 1 / 9; /* copre tutte le colonne */
z-index: 5;
}

.portfolio-footer p, 
.portfolio-footer a{
  font-size: 1.5vw;
  text-align: left;
  grid-column: 1 / 5;
  }

/* ABOUT */
  .about-intro{
  grid-column: 1 / 4;
  grid-row: auto;
  font-size: 16px;
  }
  
  .about-edu {
  grid-column: 4 / 7;
  grid-row: 2;
  }

  .about-edu p{
  font-size: 16px;
  }

 .about-photo {
    grid-column: 6/9 ;
    grid-row: auto;
  }
  
.about-photo img {
    max-width: 100%;
  }

/* WORKS */
  .works-title,
  .accordion-toggle {
    grid-column: 1 / 6;
  }

  .w1, .w8 , .w2a, .w6, .w5, .w3{
    grid-column: 1 / 5;
    grid-row: auto;
    width: 100% !important;
    padding: 0 !important;
    margin: 0;
  }

  .w2 ,.w4, .w3a, .w7{
    grid-column: 5 / 9;
    grid-row: auto;
    width: 100% !important;
    padding: 0 !important;
    margin: 0;
  }

   .works-item img {
    grid-column: span 4;
    width: 100%;
    display: block;
  }

  .accordion-menu a {
    font-size: 5vw;
    line-height: 1.2;
  }

  /* PAG.PROJECT */
  .project-tags .tag {
  font-size: 1.5vw;
  padding: 2vw;
  }

/* CONTACT */
.consent-wrapper{
font-size: 10px;
}
}

/* MEDIA QUERY X METà<= 600px */
@media (max-width: 650px){
    .about-title,
  .about-photo {
    grid-column: 1 / 9;
    grid-row: auto;
  }

  .about-intro{
  grid-column: 1 / 5;
  grid-row: auto;
  font-size: 14px;
  }

  .about-edu {
  grid-column: 5 / 9;
  grid-row: 2;
  }

  .about-edu p{
  font-size: 14px;
  }

  .about-photo img {
    max-width: 60%;
  }

  .download-cv {
  margin-top: 0;
  }
}

/* MEDIA QUERY X SMARTPHONE <= 400px */
@media (max-width: 400px) {
.hero {
grid-column: 1 / 9;
grid-row: auto;
}

.menu2{
font-size: 30px;
}

.project-title{ 
font-size:30px; 
}

/* ABOUT */
  .hero h1,
  .about-title,
  .contact-title,
  .works-title,
  .accordion-toggle {
  font-size: 20vw;
  }

  .about-title,
  .about-photo {
    grid-column: 1 / 9;
    grid-row: auto;
  }

  .about-intro{
  grid-column: 1 / 5;
  grid-row: auto;
  font-size: 12px;
  }

  .about-edu {
  grid-column: 5 / 9;
  grid-row: 2;
  }

  .about-edu p{
  font-size: 12px;
  }

  .about-photo img {
    max-width: 60%;
  }

  .download-cv {
  margin-top: 0;
  }

/* CONTACT */
.contact-title {
grid-column: 1/8;
margin: auto;
  }

.form-field1, .form-field2, .form-field3, .form-field4 {
  font-size: 25px;
  grid-column: 1/7 !important;
}

#name, #email, #surname, #message{
  grid-column: 1/7;
  background: transparent;
  border: none;
  border-bottom: 2px solid white;
  color: white;
  font-size: 1rem;
  padding: 0.4rem 0;
  outline: none;
}

.form-button {
  grid-column: 1/7;
  font-size: 50px !important;
  justify-self: start;
  z-index: 100;
}

.consent-wrapper{
font-size: 10px;
}

.portfolio-footer {
  display: block;
  width: 100%;
  max-width: 1200px; /* uguale alla tua griglia desktop */
  grid-column: 1 / 9; /* copre tutte le colonne */
  z-index: 5;
}

.portfolio-footer p, 
.portfolio-footer a{
font-size: 2vw;
text-align: left;
grid-column: 1 / 5;
}

/* WORKS */
  .works-title,
  .accordion-toggle {
    grid-column: 1 / 9;
  }

  .w1, .w2, .w2a, .w3a, .w3, .w4,.w5, .w6, .w7, .w8 {
    grid-column: 1 / 9;
    grid-row: auto;
    width: 100% !important;
    padding: 0 !important;
    margin: 0;
  }

  .work-item img {
    width: 100%;
  }

  .accordion-menu a {
    font-size: 10vw;
    line-height: 1.2;
  }

/* PAG. PROGETTO */
  .project-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    padding: 15px;
  }

  .project-header,
  .project-gallery{
    grid-column: 1 / 9;
    grid-row: auto;
    padding: 0;
  }

  .project-title {
  font-size: 10vw;
  }

  .project-tags .tag {
  font-size: 2vw;
  padding: 2vw;
  }

  .project-tags {
  grid-column: 1/9;
  padding-right: 9pt;
  padding-bottom: 2vw;
  }

.project-side-gallery {
grid-column: 1 / 9;
grid-row: 4;
max-width: 400px;
}

  .main-img img,
  .side-img img {
    width: 100%;
    height: auto;
  }

  .menu, .arrow{
  font-size: 1.5rem;
  bottom: 15px;
  right: 15px;
  }

  .return-top{
  font-size: 3vw;
  align-items: right;
  }

/* PAGINA BRUT MA BUN */
  .project-intro {
font-size: 12px;
}

.project-aside{
grid-column: 1 / 9;
grid-row: 2;
padding: 0;
}

.next-work {
padding-bottom: 10vw;
font-size: 10px;
}

.project-gallery{
gap: 5px;
}

}