/* FIRMA-SALVO-20260125-A */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
/* FIX: garantisce che l'attributo hidden funzioni SEMPRE */
[hidden] { 
  display: none !important; 
}

/* =========================================================
   SALVO LA FATA — STYLE.CSS (CLEAN v5.2.4)
   Dark UI • niente cornici • ritmo coerente
   Fix: "Un pensiero" full width + cleanup doppioni contatti
   ========================================================= */

/* =========================================================
   VARIABLES
   ========================================================= */
:root{
  /* palette */
  --bg:#050505;
  --card-bg:#111111;
  --border:#333333;

  --text:#f5f5f5;
  --text-soft:#b3b3b3;
  --muted:#888888;
  --accent:#ffffff;

  /* layout rhythm */
  --page-max: 1080px;
  --page-pad-x: 22px;

  --space-1: 12px;
  --space-2: 18px;
  --space-3: 28px;
  --space-4: 40px;
  --space-5: 56px;

  /* global “stacco” sotto header */
  --content-top: 26px;

  /* typography */
  --ff:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}

/* =========================================================
   RESET + BASE
   ========================================================= */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{margin:0;padding:0;}
/* Stabilizza la larghezza tra pagine con/senza scrollbar */
html{
  overflow-y:auto;
}

html{font-size:16px;}
body{
  font-family:var(--ff);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
a{color:inherit;text-decoration:none;}

/* media safety: niente media fuori scala */
img,video,iframe,svg,canvas{max-width:100%;height:auto;display:block;}

/* =========================================================
   PAGE SHELL
   ========================================================= */
.page{min-height:70vh;display:flex;flex-direction:column;width:100%;}
main{flex:1;}

/* contenuto centrale con “cornice” unica */
.page-content{
  flex:1;
  width:100%;
  max-width:var(--page-max);
  margin:0 auto;
  padding: var(--content-top) var(--page-pad-x) var(--space-5);
}
/* pagine più larghe (Paesaggio/Street, se serve) */
.page-wide .page-content{ --page-max:1240px; }

/* Mostre/Pubblicazioni — meno aria sotto header */
body.page-expo .page-content{ --content-top: 3px; }

.simple-wrap{width:100%;}

/* =========================================================
   TYPOGRAPHY (CONTENT)
   ========================================================= */
.page-kicker{
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--text-soft);
  font-size:11px;
  margin:0 0 8px;
}
.page-content h1{
  font-size:20px;
  line-height:1.12;
  font-weight:300;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:6px 0 10px;
  text-align:left;
}
.page-content h2{
  font-size:14px;
  line-height:1.25;
  font-weight:300;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 12px;
  text-align:left;
}
.page-content p,
.page-content li{
  font-size:15px;
  line-height:1.6;
  color:var(--text-soft);
}
.page-content p + p{margin-top:12px;}
.page-content ul{padding-left:18px;}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  background:#000;
  padding:22px 40px 20px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  position:relative;
  z-index:10;
  box-shadow:0 12px 26px rgba(0,0,0,0.85);
}
.site-header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:6px;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0));
}
/* HOME: riallinea header come le altre pagine */
.page-home .site-header{
  padding-left:40px;
  padding-right:40px;
}

.site-title-block{display:flex;flex-direction:column;gap:4px;}
.site-title{font-size:18px;letter-spacing:0.18em;text-transform:uppercase;}
.site-subtitle{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-soft);}

/* =========================================================
   NAV + DROPDOWN
   ========================================================= */
.main-nav{
  display:flex;
  gap:24px;
  font-size:11px;
  letter-spacing:0.16em;
  align-items:center;
}
.main-nav a,
.main-nav .nav-link{
  position:relative;
  padding-bottom:3px;
  cursor:pointer;
  white-space:nowrap;
  color:var(--text-soft);
  font-weight:400;
}
.main-nav a::after,
.main-nav .nav-link::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:transparent;
  transition:background .16s ease;
}
.main-nav a:hover::after,
.main-nav .nav-link:hover::after{background:var(--accent);}
.main-nav a:hover,
.main-nav .nav-link:hover{color:var(--accent);}
.nav-dropdown{
  position:relative;
}

.nav-dropdown .nav-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;

  min-width:220px;

  background:#111;
  border-radius:10px;
  border:1px solid var(--border);

  box-shadow:0 18px 40px rgba(0,0,0,0.9);

  padding:8px 0;

  opacity:0;
  pointer-events:none;
  transform:translateY(4px);

  transition:opacity .18s ease, transform .18s ease;

  will-change:opacity,transform;

  z-index:9999;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.is-open .dropdown-menu{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.dropdown-menu a{
  display:block;
  padding:8px 14px;
  font-size:11px;
  letter-spacing:0.16em;
  color:var(--text-soft);
  white-space:nowrap;
}


.dropdown-menu a:hover{background:rgba(255,255,255,0.04);color:var(--accent);}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer,
footer{
  padding:14px 40px 18px;
  font-size:11px;
  font-style:italic;
  color:var(--muted);
  background:#000;
  position:relative;
  z-index:10;
  box-shadow:0 -12px 26px rgba(0,0,0,0.85);
  margin-top:var(--space-5);
}
.site-footer::before,
footer::before{
  content:"";
  position:absolute;
  left:0;right:0;top:-1px;
  height:6px;
  pointer-events:none;
  background:linear-gradient(to top, rgba(255,255,255,0.12), rgba(255,255,255,0));
}

/* =========================================================
   COMPONENTS — cards, grids, buttons
   ========================================================= */

.card{
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
}

.card-inner{
  padding:18px;
}

.about-grid,
.contacts-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:18px;
  align-items:start;
}

/* CHI SONO — testo più ampio, immagine più stretta */

body.page-about .about-grid{
  grid-template-columns: 1.35fr .65fr;
  gap:32px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.06);
  color:var(--text);
  letter-spacing:0.16em;
  font-size:11px;
  text-transform:uppercase;
  cursor:pointer;
}

.btn:hover{
  background:rgba(255,255,255,0.10);
}
/* =========================================================
   PROGETTI / PORTFOLIO — titoli e testi
   ========================================================= */
.project-header,.project-intro{margin-bottom:26px;}
.project-label,.project-name{
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--text-soft);
  margin-bottom:10px;
}
.project-title{
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.12;
  margin-bottom: 14px;
  font-weight:400;
  text-align:left;
}
.project-subtitle,.project-description{color:var(--text-soft);font-size:15px;max-width:78ch;}

/* =========================================================
   GEOGRAFIE — viewer
   ========================================================= */
.viewer{margin-top:var(--space-3);}
.viewer .hero-frame{max-width:820px;margin:0 auto 56px;position:relative;}
.viewer .hero-image-container{position:relative;overflow:visible;background:transparent;border-radius:0;}
.viewer .hero-image-container img{width:100%;height:auto;object-fit:contain;max-height:62vh;}

.viewer .main-title{
  position:absolute;
  left:-40px;right:-40px;bottom:0;
  margin:0;
  padding:8px 14px;
  background:rgba(0,0,0,0.55);
  color:#fff;
  z-index:2;
  text-align:center;
}
.viewer .main-title-line{letter-spacing:0.08em;font-size:13px;text-transform:uppercase;}
.viewer .main-caption{display:none;}

.viewer .nav-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;height:46px;
  border-radius:999px;
  border:none;
  background:rgba(0,0,0,0.55);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:34px;
  line-height:1;
  z-index:3;
  backdrop-filter: blur(6px);
}
.viewer .nav-arrow.prev{left:-56px;}
.viewer .nav-arrow.next{right:-56px;}
.viewer .nav-arrow:hover{background:rgba(0,0,0,0.72);}
@media (max-width:980px){
  .viewer .nav-arrow.prev{left:10px;}
  .viewer .nav-arrow.next{right:10px;}
  .viewer .main-title{left:0;right:0;}
}

.viewer .thumbs-strip{
  display:flex;
  gap:10px;
  overflow:auto;
  padding:10px 2px 8px;
  max-width:980px;
  margin:0 auto;
}
.viewer .thumb{
  border:none;background:transparent;border-radius:10px;padding:0;overflow:hidden;
  flex:0 0 auto;cursor:pointer;
}
.viewer .thumb img{width:96px;height:64px;object-fit:cover;}
.viewer .thumb.active{outline:1px solid rgba(255,255,255,0.45);}

.chapter-center-nav{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:14px;
}
.chapter-center-nav .sep{display:none;}
.chapter-center-nav a,
.chapter-center-nav .current-chapter{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.35);
  color:#fff;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  transition:transform .12s ease, background .16s ease, border-color .16s ease;
}
.chapter-center-nav a:hover{transform:translateY(-1px);background:rgba(0,0,0,0.55);border-color:rgba(255,255,255,0.28);}
.chapter-center-nav .current-chapter{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.28);opacity:.95;cursor:default;}

/* =========================================================
   ANIME / FAGLIE — slider
   ========================================================= */

.slider{margin-top:24px;}

.slider-main-wrap{
  position:relative;
  max-width:880px;
  margin:18px auto 56px;
  border:none;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

.slider-main-img{
  width:100%;
  max-height:56vh;
  object-fit:contain;
  display:block;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* frecce slider */

.slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:none;
  background:rgba(0,0,0,0.35);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  backdrop-filter:blur(6px);
  z-index:10;
  opacity:.85;
  transition:opacity .15s ease, background-color .15s ease, transform .15s ease;
}

/* posizione stabile */
.slider-arrow.left{left:12px;}
.slider-arrow.right{right:12px;}

/* hover senza spostamenti */
.slider-arrow:hover{
  opacity:1;
  background:rgba(0,0,0,0.55);
  transform:translateY(-50%) scale(1.03);
}

.slider-arrow:active{
  transform:translateY(-50%) scale(.98);
}

/* sicurezza mobile */
@media (max-width:980px){
  .slider-arrow.left{left:12px;}
  .slider-arrow.right{right:12px;}
}

/* caption */

.slider .hero-caption,
.hero-caption,
#heroCaption{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-18px;
  width:min(600px, calc(100% - 40px));
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  border-radius:0;
  background:rgba(160,160,160,0.30);
  backdrop-filter:blur(6px);
  color:var(--text);
  font-size:11px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  pointer-events:none;
}

/* thumbnails */

.thumb-strip{
  display:flex;
  gap:10px;
  overflow:auto;
  padding:8px 2px;
  max-width:980px;
  margin:0 auto;
}

.thumb-strip .thumb{
  flex:0 0 auto;
  width:104px;
  border-radius:12px;
  overflow:hidden;
  border:none;
  background:#000;
  cursor:pointer;
}

.thumb-strip .thumb img{
  width:100%;
  height:70px;
  object-fit:cover;
}

.thumb-strip .thumb.active{
  outline:1px solid rgba(255,255,255,0.45);
}
/* =========================================================
   GEOGRAFIE — chapter cards (pagina indice)
   ========================================================= */
.chapters-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:18px;
  margin-top:20px;
}
@media (max-width:1100px){
  .chapters-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width:900px){
  .chapters-grid{grid-template-columns: 1fr;}
}
.chapter-card{
  display:block;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,0.55);
  transition: transform .14s ease, border-color .14s ease;
}
.chapter-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,0.22);}
.chapter-thumb{margin:0;}
.chapter-thumb img{width:100%;height:230px;object-fit:cover;}
.chapter-title{
  padding:16px 16px 10px;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.chapter-text{padding:12px 16px 18px;color:var(--text-soft);font-size:14px;line-height:1.55;}

/* =========================================================
   PORTFOLIO — cards
   ========================================================= */
.works-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr)); /* ← da 3 a 4 */
  gap:16px;
  margin-top:18px;
}
@media (max-width:1200px){
  .works-grid{grid-template-columns: repeat(3, minmax(0,1fr));}
}
@media (max-width:980px){
  .works-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width:640px){
  .works-grid{grid-template-columns: 1fr;}
}
.work-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  min-height:110px;
}
.work-title{font-size:13px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:8px;}
.work-subtitle{color:var(--text-soft);font-size:14px;}

/* =========================================================
   CHI SONO — testo + layout
   ========================================================= */
.page-about .intro,
.page-about .intro p{line-height:1.22;}
.page-about .intro p{margin:0 0 .30rem 0;}
.page-about .intro p + p{margin-top:0;}
.page-about .intro p:last-child{margin-bottom:0;}

.page-about .about-grid{margin-top:-14px;}
.page-about .portrait-card{margin-top:-14px;}
.page-about .about-list{margin-top:18px;}

.portrait-card{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.portrait-card img{
  width:100%;
  max-width:320px;
  max-height:220px;
  object-fit:contain;
  margin:0 auto;
  background:#000;
}

/* =========================================================
   CONTATTI — pulito, senza cornici “dure”
   Fix: textarea "Un pensiero" full width
   ========================================================= */
.page-contacts .contacts-grid{align-items:stretch;justify-items:stretch;}
.page-contacts .contacts-grid > *{min-width:0;}

.page-contacts .card.contacts-left,
.page-contacts .card.write-card{
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
}

/* form: label a blocco + campi sempre a tutta larghezza (evita “quadrati”) */
.page-contacts .contact-form label{display:block;}
.page-contacts .contact-form input,
.page-contacts .contact-form textarea{
  width:100%;
  display:block;
  min-width:0;
}
/* la prima riga è una griglia: anche qui i label devono potersi restringere */
.page-contacts .contact-form .row > label{min-width:0;}

/* campi e box: senza bordi, ma leggibili */
.page-contacts .contact-form input,
.page-contacts .contact-form textarea,
.page-contacts .comment-box{
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
  background:rgba(255,255,255,0.04) !important;
  border-radius:12px;
  color:var(--text);
  font-family:inherit;
  padding:12px;
}
.page-contacts .contact-form textarea,
.page-contacts .comment-box{resize:vertical;}

.page-contacts .contact-form input:focus,
.page-contacts .contact-form textarea:focus,
.page-contacts .comment-box:focus{
  outline:1px solid rgba(255,255,255,0.18);
  outline-offset:2px;
}

/* label */
.page-contacts .contact-form label span{
  display:block;
  font-size:12px;
  color:var(--text-soft);
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin:0 0 8px;
}

/* griglia righe */
.page-contacts .contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:820px){
  .page-contacts .contact-form .row{grid-template-columns:1fr;}
}

/* contatti: label + value (Email / Instagram) — allineamento “pulito” */
.page-contacts .contact-meta .item{
  display:grid;
  grid-template-columns: auto 1fr;
  gap:10px;
  
}

.page-contacts .contact-meta{
  margin-bottom:30px;
}
.page-contacts .thanks{
  margin-top:12px;
}

/* BELICE — centra le 2 card nella griglia a 4 colonne */
.page-belice .chapters-grid{
  grid-template-columns: repeat(2, minmax(0,1fr));
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.page-contacts .contact-meta .item .label{
  white-space:nowrap;
  opacity:.95;
}
.page-contacts .contact-meta .item .value{
  text-align:left;
  min-width:0;
  overflow-wrap:anywhere;
}

/* Icona Instagram */
.ig-icon{
  width:16px;height:16px;display:inline-block;vertical-align:-3px;
  background-size:16px 16px;background-repeat:no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E");
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* allineare “INVIA” in basso */
.page-contacts .write-card{height:100%;min-width:0;}
.page-contacts .write-card .card-inner{height:100%;display:flex;flex-direction:column;min-width:0;}
.page-contacts .contact-form{display:flex;flex-direction:column;gap:14px;flex:1;min-width:0;}
.page-contacts .write-card .btn{margin-top:auto;margin-bottom:18px;width:100%;align-self:stretch;}

/* ✅ "Un pensiero" deve essere full-width sotto entrambe le colonne */
.page-contacts .contact-footer{
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}
.page-contacts .comment-box{
  width: 100% !important;
  display:block;
  min-width: 0;
}

/* =========================================================
   PITTOGRAFIA — interlinea più stretta SOLO lì
   ========================================================= */
body.page-portfolio .project-description,
body.page-portfolio .project-description p{line-height:1.22;}
body.page-portfolio .project-description p{margin:0 0 .30rem 0;}
body.page-portfolio .project-description p + p{margin-top:0;}
body.page-portfolio .project-description p:last-child{margin-bottom:0;}

/* =========================================================
   RESPONSIVE — header/footer
   ========================================================= */
@media (max-width:768px){
  .site-header{padding:12px 20px;flex-direction:column;gap:10px;}
  .main-nav{flex-wrap:wrap;gap:18px;font-size:11px;}
  .site-footer,footer{padding:12px 20px 16px;}
}

/* (sezione GALLERIA + LIGHTBOX ripulita: vedi in fondo al file) */

/* =========================================================
   MOBILE SAFETY — evita sbordi orizzontali (specie in HOME)
   ========================================================= */
html, body{ overflow-x: hidden; }

@media (max-width: 768px){
  body.page-home .home-main{ max-width: 100%; }
  body.page-home .home-hero-overlay{ padding: 1.25rem; }
  body.page-home .home-hero-claim{ max-width: min(900px, 92vw); }
}

/* =========================================================
   MOBILE: dropdown "PROGETTI" non deve sovrapporsi al menu
   ========================================================= */
@media (max-width: 768px){

  /* il contenitore del dropdown resta nel flusso */
  .main-nav .nav-dropdown{
    position: relative !important;
  }

  /* il menu a tendina NON è assoluto: diventa un blocco sotto */
  .main-nav .dropdown-menu{
    position: static !important;
    display: none;                 /* chiuso di default */
    width: 100%;
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.92);  /* fondo pieno, niente trasparenze ambigue */
    border: 1px solid rgba(255,255,255,0.12);
    box-sizing: border-box;
  }

  /* quando apri (dd.is-open), lo mostri */
  .main-nav .nav-dropdown.is-open .dropdown-menu{
    display: block !important;
  }

  /* link del dropdown ben leggibili */
  .main-nav .dropdown-menu a{
    display: block;
    padding: 8px 0;
  }
}

/* =========================
   MOBILE HAMBURGER MENU
   ========================= */

/* default: hamburger nascosto su desktop */
.hamburger{
  display: none;
}

/* backdrop: nascosto di default, visibile SOLO quando menu-open */
.menu-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99998;
}

body.menu-open .menu-backdrop{
  display: block;
}

@media (max-width: 768px){

  /* Nascondi la nav desktop su mobile */
  .main-nav{ display: none !important; }

  /* Mostra hamburger (in alto a destra) */
  .hamburger{
    display: inline-flex;
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 3100;

    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;

    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .hamburger span{
    display:block;
    height: 2px;
    width: 26px;
    background: rgba(255,255,255,0.85);
  }

 /* Pannello menu */
.mobile-menu{

  display:block;
  position:fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(86vw, 360px);
  padding: 18px 16px;
  background: rgba(11,11,11,0.98);
  backdrop-filter: blur(12px);
  border-left: 1px solid rgba(255,255,255,0.12);
  transform: translateX(100%);
  transition: transform .22s ease;
  isolation:isolate;
  z-index: 99999;
  overflow-y: auto;
}

  /* Stato aperto */
body.menu-open .mobile-menu{
  transform: translateX(0);
}
  /* Link menu */
  .mobile-menu a,
  .mobile-subtoggle{
    display: block;
    width: 100%;
    padding: 12px 10px;
    margin: 2px 0;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    text-align: left;
    font-size: 1rem;
    font-family: inherit;

  }

 .mobile-subtoggle{ cursor: pointer; }

.mobile-submenu{
  padding-left:10px;
  margin-bottom:8px;
}


.mobile-submenu a{
  background: rgba(255,255,255,0.03);
}
}

/* ====== FIX: hamburger sempre sopra tutto (mobile) ====== */
.site-header{
  position: relative;
  z-index: 10;
}
.hamburger{
  pointer-events: auto;
}

/* (LIGHTBOX fullscreen overrides rimossi; vedi sezione finale) */


/* =========================================================
   GALLERIE + LIGHTBOX — BLOCCO UNICO (CLEAN)
   Obiettivi:
   - miniature coerenti (4→3→2→1)
   - lightbox stabile (overlay, X, frecce)
   - titolo SOLO su foto aperta: .lb-label (creato dal JS) 50% dentro / 50% fuori
   ========================================================= */

/* ---------- GALLERIA GRID ---------- */
.gallery-section{ padding: 1.5rem 0 2.5rem; }

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
@media (max-width: 1200px){
  .gallery-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 520px){
  .gallery-grid{ grid-template-columns: 1fr; gap: 14px; }
}

.gallery-item{ margin: 0; position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.gallery-item a{ display:block; width:100%; height:100%; }
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: 50% 20%;
  border-radius: 14px;
  transition: opacity .18s ease;
}
.gallery-item a:hover img{ opacity: .78; }

/* ---------- LIGHTBOX BASE ---------- */
.no-scroll{ overflow: hidden; }

.lightbox{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 10000;
}
.lightbox.is-open{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lightbox-dialog{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  height:100%;

  padding:4rem 1.25rem 2.25rem;

  box-sizing:border-box;
  z-index:10001;
}

/* contenitore immagine: deve “lasciare uscire” la barra titolo */
.lightbox-media{
  position:relative;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:auto;
  height:auto;

  margin:0 auto;

  overflow:visible !important;
}

/* immagine aperta */
#lightboxImg,
.lightbox-img{
  display:block;
  max-width: min(1100px, 92vw);
  max-height: min(80vh, 860px);
  width:auto;
  height:auto;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  background: rgba(255,255,255,.02);
}

/* X */
/* ===== LIGHTBOX CONTROLS ===== */

/* X chiusura */
.lightbox-close{
  position:absolute;

  top:12px;
  right:12px;

  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:none;
  border-radius:999px;

  background:rgba(0,0,0,.55);
  color:#fff;

  font-size:28px;
  line-height:1;

  cursor:pointer;
  z-index:10020;

  transition:background .18s ease;
}

.lightbox-close:hover{
  background:rgba(0,0,0,.78);
}

/* frecce */
.lightbox-nav{
  position:absolute;

  top:50%;
  transform:translateY(-50%);

  width:54px;
  height:54px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:none;
  border-radius:999px;

  background:rgba(0,0,0,.48);
  color:#fff;

  font-size:34px;
  line-height:1;

  cursor:pointer;
  z-index:10015;

  transition:
    background .18s ease,
    transform .18s ease;
}

.lightbox-nav:hover{
  background:rgba(0,0,0,.72);
}

/* ===== POSIZIONAMENTO CONTROLLI LIGHTBOX ===== */

/* desktop */
.lightbox-nav.prev{
  left:calc(50% - 590px);
}

.lightbox-nav.next{
  right:calc(50% - 590px);
}

.lightbox-close{
  position:fixed;

  top:36px;
  right:calc(50% - 390px);

  z-index:10030;
}

/* tablet + mobile */
@media (max-width: 1200px){

  .lightbox-dialog{
    padding:4rem .9rem 2rem;
  }

  .lightbox-nav.prev{
    left:18px;
  }

  .lightbox-nav.next{
    right:18px;
  }

  .lightbox-close{
    top:18px;
    right:18px;
  }
}
/* ---------- TITOLO (JS crea .lb-label) ---------- */
/* il JS aggiunge .lb-label dentro .lightbox-media */
.lightbox .lightbox-media .lb-label{
  position:absolute;
  left:50%;
  bottom:-18px;
  transform:translateX(-50%);

  display:flex;
  align-items:center;
  justify-content:center;

  min-width:140px;
  max-width:80%;

  padding:8px 16px;

  background:rgba(0,0,0,.72);
  color:#fff;

  border-radius:999px;

  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;

  white-space:nowrap;

  z-index:10020;

  opacity:1 !important;
}
/* evitare tagli quando la barra esce */
.lightbox,
.lightbox-dialog{
  overflow: visible !important;
}

/* =========================================================
   PITTOGRAFIA — MOBILE: 2 COLONNE (override sotto 520px)
   Nota: la griglia globale scende a 1 colonna sotto 520px.
   Qui la manteniamo a 2 SOLO per Pittografia.
   ========================================================= */
@media (max-width: 520px){
  body.page-portfolio .gallery-grid,
  body.page-pittografia .gallery-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

.page-contacts .comment-box{
  min-height:160px;
}
/* allineamento contatti email / instagram */

/* allineamento righe contatti */

.page-contacts .contact-meta .item{
  display:flex;
  align-items:center;
  gap:12px;
}

.page-contacts .contact-meta .label{
  width:70px;
}
/* miglior respiro nel form contatti */

.contact-form label{
  display:block;
  margin-bottom:22px;
}

.contact-form .thanks{
  margin:28px 0 14px;
  font-style:italic;
  opacity:.7;
}

.contact-form textarea{
  width:100%;
}

/* respiro verticale home */

/* FIX: immagine lightbox sempre piena */
.lightbox img,
#lightboxImg,
.lightbox-img{
  opacity: 1 !important;
  filter: none !important;
}
.lightbox img,
.lightbox.is-open img,
#lightboxImg{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.lightbox,
.lightbox-dialog,
.lightbox-media{
  opacity: 1 !important;
  filter: none !important;
}


/* disattiva vecchie caption dentro la lightbox */

.lightbox .hero-caption,
.lightbox #heroCaption{
  display:none !important;
}
/* FIX FINALE LIGHTBOX OPACITY */

.lightbox,
.lightbox.is-open,
.lightbox-dialog,
.lightbox-media,
#lightboxImg{
  opacity: 1 !important;
}
.lightbox-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.96);
  z-index: 10000;
}

.lightbox img{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;

}
/* =========================================================
   HOME — HERO + INTRO
   ========================================================= */

body.page-home .page-content.home-main{
  max-width:1080px;
  margin:0 auto;
  padding:0 22px 20px;
}
body.page-home .home-intro-text{
  width:min(780px, 100%);
  margin:56px auto 42px;
  padding:0;
  text-align:left;
}
/* =========================================================
   HOME — TESTO INTRO
   ========================================================= */

body.page-home .home-intro-title{
  font-size:16px;
  line-height:1.25;
  font-weight:300;
  letter-spacing:.14em;
  text-transform:uppercase;

  margin:0 auto 34px;

  color:var(--text);
}

body.page-home .home-intro-copy{
  font-size:15px;
  line-height:1.6;
  color:var(--text-soft);
}

body.page-home .home-intro-copy strong{
  color:var(--text);
  font-weight:600;
}


/* ---------- HERO IMAGE ---------- */

body.page-home .home-hero{
  width:100%;

  margin:0 auto;

  position:relative;
}

body.page-home .home-hero-inner{
  position:relative;
}

body.page-home .home-hero-img{
  width:100%;
  height:auto;

  max-height:62vh;

  object-fit:contain;
  object-position:center;

  display:block;
}

/* =========================================================
   TESTO SOPRA FOTO
   ========================================================= */

body.page-home .home-hero-overlay{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 24px;

  text-align:center;

  pointer-events:none;
}

body.page-home .home-hero-claim{
  max-width:900px;

  color:rgba(255,255,255,.92);

  font-size:clamp(16px,1vw,22px);
  line-height:1.32;
  font-weight:300;

  letter-spacing:.03em;

  text-shadow:0 2px 18px rgba(0,0,0,.9);
}

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

  body.page-home .home-hero-overlay{
    display:none !important;
  }

}

body.page-home .home-hero,
body.page-home .home-hero-inner,
body.page-home .home-hero-overlay{
  position:relative;
  z-index:0 !important;
}

body.page-home .home-hero{
  overflow:hidden;
}

@media (max-width:820px){

  body.page-about .about-grid{
    grid-template-columns:1fr;
    gap:28px;
  }

}