:root{
  --gap: 16px;
  --bg: #0b0d12;
  --panel: #111319;
  --ring: #9aa3ff;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background: linear-gradient(180deg,#0b0d12 0%, #121623 100%);
  color:#e9ecf1;
}

/* Header */
.site-header{
  position: sticky; top:0; z-index: 5;
  backdrop-filter: saturate(140%) blur(6px);
  background: rgba(9,12,20,.6);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.wrap{ max-width: 1200px; margin: 0 auto; padding: 24px; }
h1{ margin:0 0 6px; font-size: clamp(20px,2.5vw,28px); }
.sub{ margin:0; color:#aeb7c8 }

/* Galleria */
.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  padding: 24px 0 80px;
}

/* Tablet */
@media (max-width: 960px){
  .gallery{ grid-template-columns: repeat(2, 1fr); }
}
/* Mobile */
@media (max-width: 560px){
  .wrap{ padding: 16px; }
  .gallery{ grid-template-columns: 1fr; gap: 12px; }
}

.item{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  outline: 1px solid rgba(255,255,255,.04);
  aspect-ratio: 16/10;              /* altezza uniforme */
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.item:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

/* Varianti per ritmo visivo */
.tall{ aspect-ratio: 4/5; }
.wide{ aspect-ratio: 21/9; }

.item img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(108%);
}

/* Didascalia on-hover */
.caption{
  position: absolute; inset: auto 0 0 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.72) 70%);
  color: #f3f5f9; font-size: 14px;
  opacity: 0; transition: opacity .2s ease;
}
.item:hover .caption{ opacity: 1; }

/* Lightbox */
dialog#lightbox{ border:0; padding:0; background:transparent; max-width:unset; }
dialog::backdrop{ background: rgba(7,9,13,.92); }
.lb-frame{ position: fixed; inset: 24px; display: grid; place-items: center; }
.lb-media{ max-width: min(1200px, 92vw); max-height: 82vh; border-radius: 18px;
  overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,.6); background:#000; }
.lb-media img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.lb-top{ position:fixed; top:18px; left:0; right:0; display:flex; justify-content:center; pointer-events:none; }
.pill{ pointer-events:auto; background: rgba(255,255,255,.08); color:#fff; padding:10px 14px;
  border-radius:999px; font-size:14px; backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.14); }
.close{ position:fixed; top:22px; right:22px; width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.1); color:#fff;
  display:grid; place-items:center; cursor:pointer; }
.close:focus-visible{ outline: 2px solid var(--ring); }



/* link back to */
.back-link {
  color: white;
  text-decoration: none;
}

.back-link:hover {
  color: #ddd; /* un grigio chiaro per l’hover */
  text-decoration: underline;
}