/* ==========================================================================
   Variabili
   ========================================================================== */

:root {
  /* Colori */
  --wood-svg-fill: #c3622e;
  /* Dimensioni */
  --center-line-mb: 10dvh;
  /* Spacing */
  --bottom-center-line: 80px;
}

/* ==========================================================================
   Hero Split Section
   ========================================================================== */

.hero-split-section {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;

  /* 100vh meno altezza header */
  min-height: 100vh;
  padding-bottom: 120px;
  padding-top: 40px;

  overflow: hidden;

  background-image: url("../img/pattern-hero-home.svg");
  background-repeat: repeat;
  background-size: cover;
  background-position: center top;
  background-color: #F6EDE5;
}

#hero-inner {
  min-width: 70%;
  max-width: 1360px;
  display: flex;
  gap: 40px;
  justify-content: space-between;
}

.hero-split-section svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* Lo mette dietro a testi e immagini */
}

/* --- Elementi Centrali (Linea, Logo, Freccia) --- */
.hero-center-elements {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}

/* La linea verticale passante */
.hero-center-elements::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: var(--bottom-center-line);
  left: 50%;
  width: 1px;
  background-color: #7a7a7a;
  z-index: 1;
}

.vertical-text-chi-siamo {
  margin-top: 20vh;
    writing-mode: vertical-rl;
    transform: rotate(180deg) translate(15px, -60px);
    padding: 10px 0;
    background: transparent;
    position: relative;
    z-index: 2;
}
@media (max-height: 715px) {
  .vertical-text-chi-siamo {
        transform: rotate(180deg) translate(15px, -40px);
  }
}

.vertical-text-chi-siamo 

.vertical-text-chi-siamo a {
  color: #1a1a1a;
  text-decoration: none;
  font-size: var(--regular-fs);
  text-transform: none;
  text-decoration: underline;
}

.hero-logo-center {
  margin-top: auto;
  margin-bottom: auto;
  padding: 20px 30px;
  border: 1px solid #7a7a7a;
  border-radius: 100px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  background-color: #f6ede5;
  position: relative;
  z-index: 2;
}

@media (min-width: 1400px) {
  .hero-logo-center{
    scale: 1.3;
  }
}

.hero-logo-center img {
  max-width: 150px;
  height: auto;
  display: block;
}

.hero-scroll-down {
  width: 37px;
  height: 37px;
  margin-top: auto;
  margin-bottom: var(--bottom-center-line);

  /* --- REGOLA LA COPERTURA --- */
  background-color: #f6ede5;
  position: relative;
  z-index: 2;

  border-radius: 50%;
}

.hero-scroll-down a {
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Colonne Sinistra e Destra --- */
.hero-col {
  max-width: 40%;
  min-width: 40%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5% unset;
}
.hero-col .hero-content .hero-title{
  font-family: 'Inter';
}

/* L'immagine di destra è sopra il testo, quella di sinistra è sotto */
.hero-left .hero-content {
  align-items: flex-start;
  scale: 1;
  transition: .5s ease;
}
.hero-left .hero-content:hover{
  scale: 1.05;
}
.hero-right .hero-content {
  align-items: flex-end;
  text-align: right;
  scale: 1;
  transition: .5s ease;
}
.hero-right .hero-content:hover{
  scale: 1.05;
}

.hero-content {
  max-width: 450px;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Ridotto da 20px */
}

.hero-right .hero-content {
  margin-left: auto; /* Spinge il contenuto verso destra */
}

/* --- Tipografia e Bottoni --- */
.hero-title {
  font-family: "Playfair Display", serif;
  font-weight: bold;
  font-size: var(--title-fs);
  color: #1a1a1a;
  line-height: 1.1;
  margin: 0;
}

.hero-subtitle {
  font-size: 1rem;
  color: #555;
  margin: 0;
}

.hero-image-wrapper img {
  width: 100%;
  max-height: 50vh;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 60% 50%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.hero-right .btn-primary {
  align-self: flex-end;
}

/* ==========================================================================
   DROPDOWN PREVENTIVO SERVIZI (Apertura verso l'alto)
   ========================================================================== */

.preventivo-dropdown-wrapper {
  position: relative;
  display: inline-block;
  align-self: flex-end; 
}

.preventivo-list {
  display: none; 
  position: absolute;
  
  /* --- MODIFICHE PER L'APERTURA IN ALTO --- */
  bottom: 100%;  /* La posiziona esattamente sopra il bottone */
  top: auto;     /* Assicura che la vecchia regola top non interferisca */
  margin-bottom: 10px; /* Crea un po' di spazio tra la tendina e il bottone */
  
  right: 0;
  padding: 10px 0;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  list-style: none;
  min-width: 260px;
  z-index: 99;
  text-align: left;
  opacity: 0;
  transform: translateY(10px); /* Invertito per l'animazione */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Classe aggiunta tramite JS per mostrare il menu */
.preventivo-list.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
  animation: fadeInUp 0.3s ease forwards;
}

/* Nuova animazione dal basso verso l'alto */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.preventivo-list li {
  margin: 0;
  padding: 0;
}

.preventivo-list li a {
  display: block;
  padding: 12px 24px;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 15px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.preventivo-list li a:hover {
  background-color: #f5f5f5;
  color: #c3622e; 
}

.preventivo-list li.no-servizi {
  padding: 12px 24px;
  color: #7a7a7a;
  font-size: 14px;
}

/* --- Responsive base (Mobile) --- */
@media (max-width: 768px) {
  /* --- HERO HOME --- */
  .hero-split-section {
    padding-top: 40px;
    padding-bottom: 60px;
    min-height: auto;
  }

  #hero-inner {
    flex-direction: column;
    gap: 60px; /* Crea respiro tra il blocco di sinistra e quello di destra */
    padding: 0 var(--px); /* Allinea il contenuto ai bordi globali */
    min-width: 100%;
  }

  .hero-center-elements {
    display: none; /* Nascondiamo la linea e il logo centrale che romperebbero il layout a colonna */
  }

  .hero-col {
    max-width: 100%;
    min-width: 100%;
    padding: 0;
  }

  /* Resetta la colonna di destra per allinearla a sinistra come l'altra */
  .hero-right .hero-content {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
  }

  .hero-right .btn-primary {
    align-self: flex-start;
  }

  /* Limita l'altezza delle immagini per non farle sembrare sproporzionate */
  .hero-image-wrapper img {
    max-height: 50vh;
  }
}

@media (max-width: 575px) {
  /* --- HERO HOME --- */
  #hero-inner {
    gap: 40px;
  }

  .hero-content {
    gap: 15px; /* Avvicina leggermente testi e bottone */
  }

  .hero-title {
    font-size: 42px; /* Riduce il titolo della hero per gli schermi piccoli */
  }

  /* Rende le immagini un po' più quadrate/compatte sui telefoni */
  .hero-image-wrapper img {
    max-height: 350px;
    aspect-ratio: 4 / 4;
  }

  .preventivo-dropdown-wrapper {
    align-self: flex-start;
    width: 100%;
  }

  #preventivo-btn {
    width: auto;
  }

  .preventivo-list {
    right: auto;
    left: 0; 
    width: 100%; 
  }
}