/**
* Author: Francesca Caraffini / ArtSolvingStudio°
SIto TISCA.it - 2026
*/

/**
1. General
2. Menù
*/




/*--------------------------------------------------------------
# 1. General
--------------------------------------------------------------*/
    body {
      font-family: 'Barlow Semi Condensed', sans-serif;

    }

:root {
--grey: #B4ACA8;
--light-blu: #D6E6E8;
--nude: #F2E1C1;
--grigio: #f6f6f6; 
--lightgreen: #c6f3343e;
--darkred: #8b0000;
}

.grey {
  color: var(--grey);
}

.bg-grey {
  background-color: var(--grey);
}

.bg-light-blu {
  background-color: var(--light-blu);
}


.bg-nude {
  background-color: var(--nude);
}




/* Stile globale per tutti i link */
a {
  text-decoration: none; /* Rimuove la sottolineatura standard */
  word-break: break-word;
  transition: all 0.3s ease-in-out; 
   font-family: inherit; 
}

/* Stato al passaggio del mouse (Hover) */
a:hover {
  color: #000000; /* Diventa nero */
  /* Opzionale: aggiunge una sottolineatura sottile per chiarezza nei testi lunghi */
  text-decoration: none; 
}

/* Stato Focus (per l'accessibilità da tastiera) */
a:focus {
  outline: 2px solid #000000;
  color: #000000;
}


.text-black-30  {
  color: rgb(204, 204, 204);
}

    .tisca-h3 { 
      font-family: 'Playfair', serif;
 font-size: 1.2rem;
          }    

    /* Navbar */

    .navbar {
  min-height: 80px;
}
    .navbar-nav {
  gap: 3rem;
}

.navbar-nav .nav-link {
  letter-spacing: 1px;
}
  
    .navbar-brand img {
  height: 40px;   /* regola tu: 35–50px */
  width: auto;
  display: block;
}

.slider {
  position: relative;
  overflow: hidden;
}

/* Track scorrevole - Modificato per verticale */
.slider-track {
  display: flex;
  flex-direction: column; /* Allinea le slide in verticale */
  height: 100%;
  transition: transform 0.8s ease-in-out;
}

/* Singola slide */
.slide {
  flex: 0 0 100%; /* Ogni slide occupa il 100% dell'altezza del track */
  width: 100%;
  position: relative;
}

/* Immagini */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Evita distorsioni dell'immagine */
  display: block;
}

/* Overlay testo */
.slider-hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}


/* MOBILE: immagini quadrate */
.mobile-img {
  display: none;
}

@media (max-width: 768px) {
  .desktop-img {
    display: none;
  }

  .mobile-img {
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
}

/* Hero Sections */

/*blocco inizale */
/* allineamento a sinistra */
.hero-content--left {
  text-align: left;
  align-items: flex-start;
  max-width: 1400px;
  margin: 0 auto;
}

/* titolo principale */
.hero-title-main {
  font-size: clamp(3.2rem, 12vw, 8rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: clamp(0.3rem, 1.5vw, 1.5rem);
  text-transform: uppercase;
}

/* spacing tra le due righe */
.hero-title-main div {
  margin-bottom: 0.2em;
}

/* sottotitolo inglese */
.hero-sub-en {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 1.8vw, 1.8rem);
  letter-spacing: clamp(0.3rem, 1.2vw, 1rem);
  font-style: italic;
  opacity: 0.85;
}



.hero {
  position: relative;
  min-height: 80vh; /* Assicurati che questo valore sia quello desiderato */
  height: 80vh;     /* Forza l'altezza al 100% del valore sopra */
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra verticalmente */
  align-items: center;     /* Centra orizzontalmente */
  text-align: center;
  overflow: hidden;        /* Buona pratica per evitare overflow */
}

/* Assicurati che questi occupino lo spazio del contenitore padre */
.hero img, .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 5%; /* Aggiungi un po' di respiro laterale */
}
.hero-title {
  display: flex;
  justify-content: space-between; /* distribuisce su tutta la larghezza */
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;

  font-size: clamp(3.2rem, 12vw, 8rem);
  font-weight: 500;

  transform: scaleY(1.5);
}

.hero-title span {
  display: inline-block;
}

.hero-sub {
  padding: 0 10%;
  font-family: 'Playfair', serif;
  font-size: clamp(1.1rem, 12vw, 1.8rem);
  line-height: 97%;
  margin-top: -10px; /* Valore negativo per avvicinarlo al titolo */
}


/* di default NON va a capo */
.lg-break {
  display: inline;
}

/* solo da lg in su va a capo */
@media (min-width: 992px) {
  .lg-break {
    display: block;
  }
}


.hero-title-product {
  font-size: clamp(1.6rem, 10vw, 4rem);
  letter-spacing: 0.5em;
  font-weight: 500;
  display: inline-block;
  transform: scaleY(1.5);
  transform-origin: center;
  margin: 0;
}

/* Split section (Garden) */
    .split {
      display: flex;
      height: 70vh;
    }

    .split div {
      flex: 1;
      background-size: cover;
      background-position: center;
      position: relative;
    }

    .split .content {
      position: absolute;
      color: white;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    /* Grid prodotti */
    .product-grid img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .product-grid .col {
      padding: 1px;
    height: auto;
    }

    /* Footer */
    footer {
      background: #777;
      color: white;
      padding: 40px 0;
      font-size: 1rem;
    }


    
    /* Product */
.product-card {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.product-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.6s ease;
}
.product-card:hover img {
  transform: scale(1.08);
}

/* overlay */
.product-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
 padding: 0px 20px 86px 20px;
  color: #fff;
  text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 60%);
}




/* titolo */
.product-title {
  font-size: 1.92rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  display: inline-block; /* Necessario per applicare transform */
  transform: scaleY(1.5); /* aumenta altezza del font */
  transform-origin: left;  /* Per evitare che il testo si stacchi dal margine sinistro */
}

/* subtitle */
.product-subtitle {
  font-family: 'Playfair', serif;
  font-size: 1rem;
 margin-top: 5px;
  text-align: center;
  padding: 8px 10px;
  line-height: 97%; 
}

/* responsive height */
@media (max-width: 768px) {
  .product-card {
    height: 320px;
  }
}