/* Base */

body {

    margin: 0 !important;

    height: 100% !important;

    min-height: 100vh !important;

    width: 100% !important;

    background-color: black;

    font-family: 'Bodoni MT', serif;

    font-style: normal;

    color: #04221a;

}



html {

  scroll-behavior: smooth;

  height: 100%;

}



.container {

  width: 100%;

  background-color: transparent;

}



.cover-container {

  max-width: 62em;

  background-color: transparent;

  margin: 0 auto;

}



.hr {

  width: 15%;

  border: 1px solid #f3aa69;  

  opacity: 1;

  margin: 0.5rem 0 1rem 0;

}



/* Media queries per la gestione dello sfondo e del testo mobile */



@media (max-width: 480px) {

  .cover-container {

    background-image: url('../img/Opening-Photo-Web-giorgio-trombatore2.jpg');

    background-position: right 10% center;

    background-repeat: no-repeat;

    background-size: 65%;

  }



  .hr2 {

    width: 45%;

    border: 1px solid #f3aa69;  

    opacity: 1;

    margin: 1.5rem 0;

  }

  

  .colonna-testo {

    width: 58%; /* Lascia spazio alla foto di sfondo sulla destra */

    text-align: left;

  }



  .titlehome {

    font-size: 13px;

    color: #ffbf66;

    width: 100%;

    margin-bottom: 0.3rem;

  }



  .subtitle {

    width: 100%;

    font-size: 20px;

    line-height: 22px;

    color: white;

    margin-bottom: 0.5rem;

  }



  .leadhome {

    width: 100%;

    font-size: 11px;

    line-height: 14px;

    color: #cba07e;

  }

}



@media screen and (min-width: 481px) and (max-width: 768px) {  

  .cover-container {

    background-image: url('../img/Opening-Photo-Web-giorgio-trombatore2.jpg');

    background-position: right 15% center;

    background-repeat: no-repeat;

    background-size: 50%;

  }



  .hr2 {

    width: 45%;

    border: 1px solid #f3aa69;  

    opacity: 1;

    margin: 1.5rem 0;

  }



  .colonna-testo {

    width: 50%;

    text-align: left;

  }



  .titlehome {

    font-size: 16px;

    color: #ffbf66;

    width: 100%;

  }



  .subtitle {

    width: 100%;

    font-size: 32px;

    line-height: 36px;

    color: white;

  }



  .leadhome {

    width: 100%;

    font-size: 15px;

    color: #cba07e;

  }

}



/* --- OTTIMIZZAZIONE MOBILE PER LA INDEX --- */



@media (max-width: 768px) {

  .cover-container {

    background-image: url('../img/Opening-Photo-Web-giorgio-trombatore3.jpg') !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;

    background-size: 70% !important; /* Riduciamo la foto a destra per lasciare più spazio al testo */

    padding: 20px 10px !important;

  }



  .colonna-testo {

    width: 58% !important; /* Diamo più spazio al testo a sinistra */

    text-align: left !important;

  }



  .titlehome {

    font-size: 12px !important;

  }



  .subtitle {

    font-size: 22px !important;

    line-height: 25px !important;

  }



  .leadhome {

    font-size: 12px !important;

  }



  /* Menu centrato sotto */

  .nav-masthead {

    justify-content: flex-start !important;

    gap: 10px;

  }



  .nav-masthead .nav-link span {

    border-right: none !important;

    padding-right: 0 !important;

  }

}



@media (min-width: 1200px) {

  .cover-container {

    background-image: url('../img/Opening-Photo-Web-giorgio-trombatore2.jpg');

    background-position: center top;

    background-repeat: no-repeat;

    background-size: 100%;

  }



  .hr2 {

    width: 45%;

    border: 1px solid #f3aa69;  

    opacity: 1;

  }



  .colonna-testo {

    width: 40%;

	text-align: left;

  }



  .titlehome {

    font-size: 22px;

    color: #ffbf66;

    width: 100%;

  }



  .subtitle {

    width: 100%;

    font-size: 70px;

    line-height: 54px;

    color: white;

  }



  .leadhome {

    width: 100%;

    font-size: 24px;

    color: #cba07e;

  }

}





/* Di default (desktop) la foto inserita nell'HTML è nascosta, usiamo il background */

.mobile-image-container {

    display: none;

}



/* --- OTTIMIZZAZIONE MOBILE (Sotto i 768px) --- */

@media (max-width: 768px) {

  /* Disattiviamo il background di classe sul contenitore per questa vista */

  .cover-container {

    background-image: none !important;

    padding: 20px 15px !important;

    justify-content: space-around !important;

  }



  /* Rendi il blocco main un contenitore flex verticale */

  main.px-3 {

    align-items: center !important; /* Centra tutto orizzontalmente su mobile */

    text-align: center !important;

  }



  /* Il testo riprende tutta la larghezza ed è centrato */

  .colonna-testo {

    width: 100% !important;

    text-align: center !important;

    margin-bottom: 15px;

  }



  /* Linea di separazione sotto il titolo */

  .colonna-testo .hr {

    margin: 0.5rem auto 1rem auto !important; /* Centra la lineetta */

    width: 30% !important;

  }



  .titlehome {

    font-size: 14px !important;

  }



  .subtitle {

    font-size: 26px !important;

    line-height: 30px !important;

  }



  .leadhome {

    font-size: 13px !important;

    max-width: 90%;

    margin: 0 auto;

  }



  /* ORA RENDIAMO VISIBILE E D'IMPATTO LA FOTO AL CENTRO */

  .mobile-image-container {

    display: block !important;

    width: 100%;

    max-width: 280px; /* Regola la grandezza massima della foto sul telefono */

    margin: 20px 0;

  }



  .mobile-image-container img {

    width: 100%;

    height: auto;

    border-radius: 6px; /* Dà un tocco pulito e moderno */

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); /* Leggera ombra per staccare dal nero */

  }



  .hr2 {

    display: none; /* Rimuoviamo la seconda linea superflua su mobile se c'è la foto */

  }



  /* Menu centrato in basso */

  .nav-masthead {

    justify-content: center !important;

    gap: 20px;

    width: 100%;

    margin-top: 10px;

  }



  .nav-masthead .nav-link {

    padding-left: 0.5rem !important;

    padding-right: 0.5rem !important;

  }

}