/* questo è per adattare il layout agli schermi  Smartphone */
@media (max-width: 600px) {
  .hero {
    height: 70vh;
  }
}

/* Tablet */
@media (min-width: 601px) and (max-width: 1024px) {
  .hero {
    height: 80vh;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .hero {
    height: 100vh;
  }
}



@font-face {
  font-family:'Alice' ;
  src: url(font/Alice.ttf) format(truetype);
}

@font-face {
  font-family:'amster' ;
  src: url(font/amster.ttf) format(truetype);
}

@font-face {
  font-family:'Bodonibold' ;
  src: url(font/BodoniFLF-Bold.ttf) format(truetype);
}

@font-face {
  font-family:'bodoniroman' ;
  src: url(font/BodoniFLF-Roman.ttf) format(truetype);
}

@font-face {
  font-family:'PL' ;
  src: url(font/Pl.ttf) format(truetype);
}

@font-face {
  font-family:'Didot' ;
  src: url(font/Didot.otf) format(truetype);
}
@font-face {
  font-family:'DidotDisplayLP' ;
  src: url(font/DidotDisplay.ttf) format(truetype);
}

@font-face {
  font-family:'Poppinsbold' ;
  src: url(font/Poppins-Bold.ttf) format(truetype);
}
@font-face {
  font-family:'PoppinsSemiBold' ;
  src: url(font/Poppins-SemiBold.ttf) format(truetype);
}
@font-face{
  font-family:'Zing';
  src:url(font/Zing.ttf) format(truetype);
}

/* =======================================
   RESET BASE E TYPOGRAPHY
======================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: 'bodoniroman', serif;
}

/* =======================================
   CONTENITORE PRINCIPALE
======================================= */
.CP {
  position: relative;       /* per permettere posizionamento assoluto delle immagini */
  width: 100%;
  min-height: 130vh;
}

/* =======================================
   COLLAGE DI IMMAGINI e rettangolo rosso
======================================= */


.immagini {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 0px;
  grid-template-rows: 1fr;              /* FIX */
  grid-template-columns: repeat(3, max-content);
  align-items: center;                    /* FIX */
  justify-items: center;                  /* FIX */
  z-index: 0;
}


/* STILE GENERALE DELLE IMMAGINI */
.immagini img {
  width: 250px;
  height: auto;
  
}


/* Z-INDEX  */
.Ponte { 

  z-index: 1;
}

.Bianca {

  z-index: 3;
}

.Laura {

  z-index: 2;
}




/* =======================================
   RETTANGOLO + TITOLO
======================================= */
.rettangoloTP { position: relative; z-index: 5; /* sopra le immagini */ 
display: flex; flex-direction: column; /* titolo sopra, special sotto */
justify-content: center; align-items: center; 
margin-left: -70px;
 margin-top: -30px; 
background-color: rgba(248, 248, 248, 0.6); 
} 
/* TITOLO */
 .TitoloP { 
 font-family: Didot;
 font-weight: 100;
 font-size: clamp(3rem, 10rem, 11rem);
 /* responsive: minimo 3rem, max 11rem */ color: #ff3131;
 margin-left: -310px; margin-top: 20px;

 } 
/* TESTO SPECIAL */ 
.special { position: absolute;
 font-size: clamp(12px, 15px, 15px);
 /* responsive */ font-family: bodoniroman; margin-left: 550px;
 margin-left: 550px; margin-top: 170px;
}




/* =======================================
   RETTANGOLO ROSSO SOTTO IMMAGINI E SOPRA ESSE CON SCRITTA
======================================= */

.rettangolorosso {
  justify-items: center;
  align-items: center;
  background-color: #ff3131;
  width: 750px;
  height: 90px;
  z-index: 4;
  display: flex;
  position: absolute;
  top: 700px;
  background-color: rgba(255, 0, 0, 0.6); /* rosso con 40% opacità */

}

.paragrafo1 {
  font-family: bodoniroman;
  font-size: 13px;
  margin-left: 200px;
  color: white;
  font-weight: 100;
}



.paragrafo1:hover {
  background-color: white;
  color: white;
  font-family: DidotDisplayLP;
  font-style: italic;
  color: black;
  transform: scale(1);
  transition: all 0.5s ease;
  font-size: 17px;
}

.special:hover {
  color: #ff3131;
  

}

/* numeri a lato delle immagini e difianco alle caselle, ricordati hover, voglio che cambino colore 
di rosso quando ci passo sopra */

.Numeri {
  position: absolute;       /* la posizioni liberamente rispetto al contenitore */
  top: 300px;                /* regola a piacere per allineare verticalmente */
  left: 800px;              /* regola per metterla vicino alle immagini */
  display: flex;
  flex-direction: column;   /* mette i numeri uno sotto l'altro */
  gap: 10px;                /* spazio tra i numeri */
  font-family: Didot;
  font-size: 25px;
  font-weight: bold;
  color: black;
  z-index: 4;               /* sopra le immagini ma sotto eventuali altri elementi */
}


.N1:hover, .N2:hover, .N3:hover, .N4:hover, .N5:hover, .N6:hover {
  color: red;
  font-family: Zing;
  font-size: 30px;
}


/* Barra verticale */
.rettangoloverticale1 {
    position: absolute;
    right: 0;             /* allineata a destra */
    bottom: 0;            /* parte dal fondo */
    width: 60px;          /* larghezza barra */
    height: 100%;         /* altezza fino in cima */
    background-color: #ff3131; /* colore di sfondo */
    display: flex;        /* per centrare il testo */
    align-items: center;  /* centrare verticalmente */
    justify-content: center; /* centrare orizzontalmente */
    padding: 10px;
    box-sizing: border-box;
    z-index: 5;
    background-color: rgba(255, 0, 0, 0.8); /* rosso con 40% opacità */
}

/* Testo verticale */
 .paragrafo2 {
    writing-mode: vertical-rl;  /* scrittura verticale */
    text-orientation: mixed;     /* lettere leggibili */
    color: white;
    font-size: 12px;             /* adatta a chi vuoi */
    line-height: 1.4;
    margin: 0;
    font-size: 14px;
    z-index: 6;

}

.form-destra {
  position: absolute;
  top: 300px;
  left: 900px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 5;
  width: 300px;
  color: black;
}

.form-row {
  display: flex;
  gap: 10px;
  font-size: 18px;
}

.form-row input,
.form-row select,
.Commento {
  outline: none;
  padding: 10px;
  font-size: 18px;
  font-family: Didot;
  box-sizing: border-box;
  color: black;
  background-color: #EDF8F9;
  border: none;
  border-radius: 0;
}

/* Placeholder al 30% e sparisce al focus */
.form-row input::placeholder,
.form-row select::placeholder,
.Commento::placeholder {
  color: black;
  transition: opacity 0.2s;
}

.form-row input:focus::placeholder,
.Commento:focus::placeholder {
  opacity: 0;
}

/* Select styling */
.form-row select {
  color: black;
  background-color: #EDF8F9;
}

.form-row select option {
  color: black;
  background-color: #EDF8F9;
}

.form-row select option[disabled] {
  color: rgba(0, 0, 0, 0.3);
}

/* Textarea */
.Commento {
  font-family: DidotDisplayLP;
  font-weight: 100;
  font-size: 16px;
  width: 100%;
  max-width: 500px;
  height: 150px;
  resize: none;
  color: black;
}

/* Button styling */
.form-row button {
  width: 100%;
  padding: 10px;
  font-size: 20px;
  background-color: #ff3131;
  color: white;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-family: Didot;
  font-weight: 100;
}

/* Swap text effect */
.swap-text .hover {
  display: none;
}

.swap-text:hover .default {
  display: none;
}

.swap-text:hover .hover {
  display: inline;
  font-family: Didot;
  font-size: 20px;
  font-weight: 100;
}
/* =======================================
   per la pagina dei ringraziamenti
======================================= */

.G1 {
  display: flex;
  flex-direction: column;   /* elementi uno sotto l’altro */
  align-items: center;      /* opzionale: centra orizzontalmente */
  gap: 1.5rem;              /* spazio tra gli elementi */
  width: 100%;
  min-height: 50vh;
}

.G2 {
  font-family: Didot;
  font-weight: 100;
  font-size: 8rem;
  color: #ff3131;
  text-align: center;
  background-color: rgba(248, 248, 248, 2.0);
}

.G3,
.G4 {
  font-size: 2rem;
  text-align: center;
  font-family: Didot;
}
.G3:hover,
.G4:hover{
color: red;
}

.G5 {
  margin-top: 3rem;
  text-decoration: none;
  color: black;
  font-size: 1.5rem;
  font-family: bodoniroman;
  background-color: rgba(248, 248, 248, 2.0);
  padding: 20px;
  color: ;
}

.G5:hover{
  color: red;
  background-color: ;
}

.navbar-section {
  width: 100%;
  display: flex;
  justify-content: center;     /* centra il rettangolo in orizzontale */
  margin-top: none;           /* lo sposta in basso */
}

.rettangolo2 {
  display: flex;
  justify-content: center;     /* centra i link */
  align-items: center;         /* centra verticalmente */
  width: 800px;
  height: 100px;
  background-color: #ff3131;
}

.barrasotto2 {
  display: flex;
  gap: 40px;
}

.barrasotto2 a {
  text-decoration: none;
  font-size: 20px;
  color: white;
  font-family:Didot;

}

.barrasotto2 a:hover {
  color: black;
}

/* spazio sotto la nav bar */



/* =======================================
   MEDIA QUERY: TABLET E SMARTPHONE
======================================= */
@media (max-width: 1024px) {
  .immagini {
    grid-template-columns: 1fr;
  }

  .immagini img {
    height: 600px;
    width: auto;
  }
}

@media (max-width: 480px) {
  .TitoloP {
    font-size: 3.5rem;
  }

  .special {
    font-size: 14px;
  }
}



@media (max-width: 600px) {
  .immagini {
    position: relative;   /* meglio non assoluto, per far scorrere le immagini */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    top: auto;            /* reset di top */
    left: auto;           /* reset di left */
  }

  .immagini img {
    width: 90%;          /* occupano quasi tutto lo schermo */
    max-width: 300px;    /* non diventano troppo grandi */
    height: auto;
  }

  .rettangolorosso {
    width: 90%;
    height: auto;
    top: auto;           /* si adatta al flusso */
    margin-top: 20px;
    flex-direction: column;
    padding: 10px;
  }

  .paragrafo1 {
    margin: 0;
    font-size: 12px;
    text-align: center;
  }

  .rettangoloTP {
    margin-left: 0;
    margin-top: 20px;
    background-color: rgba(248,248,248,0.8);
    padding: 10px;
  }

  .TitoloP {
    font-size: 5rem;
    margin-left: 0;
    text-align: center;
  }
.rettangoloverticale1 {
    display: none;  /* barra verticale troppo ingombrante su smartphone */
  }


  .Numeri {
    position: relative;  /* rimuovo assoluto */
    top: auto;
    left: auto;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    margin-top: 20px;
    font-size: 18px;
  }

  .form-destra {
    position: relative;
    top: auto;
    left: auto;
    width: 90%;
    margin-top: 20px;
  }

 
.barrasotto2 a  {
  font-size: 20px;
  font-family: Didot;
}

.rettangolo2 {
    width: 85%;
    height: auto;
    top: auto;           /* si adatta al flusso */
    margin-top: 20px;
    padding: 10px;
  }

  .form-row {
    width: 60%;
    height: auto;
    top: auto;           /* si adatta al flusso */
    margin-top: 20px;
    flex-direction: column;
    padding: 10px;
  }
  
  .special {
     display: none;  /* barra verticale troppo ingombrante su smartphone */
  }