:root {
  --colore1: #e8a87c;
  --colore2: #f6c9b2;
  --colore3: #0b1220;
  --colore4: #0f1724;
  --colore5: #e6eef6;
}

/* style.css */
body{
    margin:0;
    font-family:Inter,system-ui,sans-serif;
    background:var(--colore4);
    color:var(--colore5);
    display:flex;
    flex-direction:column;
    min-height:100vh
}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--colore3);
  padding:12px 28px;
  box-shadow:0 1px 4px rgba(0,0,0,0.4)}
.logo {
  display: flex;
  align-items: center;
}
.logo img {
  height: 48px;      /* dimensione ideale dentro un header con padding 12px */
  width: auto;       /* mantiene le proporzioni */
  object-fit: contain;
}
/* .logo{  font-weight:700;  font-size:20px;  background:linear-gradient(90deg,#e8a87c,#f6c9b2);  color:#081126;  padding:8px 14px;  border-radius:8px}  */
nav a{
  color: var(--colore5);
  text-decoration:none;
  margin:0 10px;
  padding:6px 10px;
  border-radius:8px;
  transition:0.2s
}
nav a:hover, nav a.active{
  background: var(--colore1);
  color: var(--colore3)
}

/* -------- DESKTOP -------- */
nav {
  display: flex;
  gap: 20px;
}

/* hamburger nascosto su desktop */
.hamburger {
  display: none;
  font-size: 30px;
  cursor: pointer;
}

/* -------- MOBILE -------- */
@media (max-width: 500px) {

  /* Mostra pulsante hamburger */
  .hamburger {
    display: block;
  }

  /* Nav nascosta di default */
  nav {
    display: none;
    flex-direction: column;
    background: rgba(0,0,0,0.8);
    position: absolute;
    top: 60px;
    right: 15px;
    padding: 15px;
    border-radius: 8px;
  }

  /* Nav visibile quando attivata */
  nav.open {
    display: flex;
  }
}

.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}
.hero h1{font-size:2rem}
.hero .accent{color:var(--colore1)}
.btn{background: var(--colore1);color:var(--colore3);padding:10px 18px;border-radius:8px;text-decoration:none;font-weight:600;margin-top:18px;display:inline-block}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:20px;
  padding:20px;
  max-width:1100px;
  margin:0 auto
}
.card{background:var(--colore4);border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.3);transition:transform 0.2s;cursor:pointer}
.card:hover{transform:scale(1.02)}
.card img{width:100%;height:220px;object-fit:cover}
.card h3{margin:10px 14px 0}
.card p{margin:0 14px 14px;color: var(--colore5);font-size:14px}
.about{max-width:900px;margin:0 auto;padding:40px;line-height:1.6}
footer{text-align:center;padding:20px;color:var(--colore1);font-size:14px;margin-top:auto}

/* Lightbox */
.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;transition:opacity 0.3s}
.lightbox.hidden{display:none}
.lightbox img{max-width:80%;max-height:70%;border-radius:12px;margin-bottom:10px}
.lightbox p{color:var(--colore5);font-size:1rem;margin:0 20px;text-align:center}
#close-lightbox{position:absolute;top:20px;right:30px;font-size:2rem;color:var(--colore5);cursor:pointer}

/* --- Sfondo dinamico semplice --- */
body.home {
  position: relative;
  overflow: hidden;
}
#bg-slideshow {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transform: scale(1);
  transition: opacity 2s ease-in-out, transform 7s ease-out; /* zoom fluido */
}
.bg-image.active {
  opacity: 0.25;
  transform: scale(1.1) translateX(3%); /* zoom leggero e spostamento */
}