/* Matteo Menapace — portfolio
   Gran parte dello stile è inline nell'HTML (esportato da Claude Design).
   Qui: base, stati hover, header, menu mobile, zoom immagini. */

html{scroll-behavior:smooth}
body{margin:0;background:#F4F2ED;color:#171716;font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
a:hover{color:oklch(0.52 0.11 45)}
::selection{background:#171716;color:#F4F2ED}
:focus-visible{outline:2px solid oklch(0.52 0.11 45);outline-offset:3px}
input,textarea,button{font:inherit}
input:focus,textarea:focus{box-shadow:0 1px 0 0 #F4F2ED}

/* Header: si compatta quando si scorre */
.site-header.scrolled{border-bottom-color:#D9D6CF !important}
.header-inner{transition:padding .35s cubic-bezier(.2,.7,.2,1)}
.site-header.scrolled .header-inner{padding-top:12px !important;padding-bottom:12px !important}

/* Navigazione: desktop vs mobile (sotto 860px) */
.menu-btn{display:none !important}
#menu-mobile[hidden]{display:none !important}
@media (max-width:859px){
  .nav-desktop{display:none !important}
  .menu-btn{display:inline-block !important}
}
@media (min-width:860px){
  #menu-mobile{display:none !important}
}
body.menu-open{overflow:hidden}

/* Hover (dagli attributi style-hover di Claude Design) */
.f1:focus{top:16px !important}
.h2:hover{border-color:#171716 !important;color:#171716 !important}
.h3:hover{background:#2E2E2C !important;color:#F4F2ED !important}
.h4:hover{background:#2E2E2C !important;color:#F4F2ED !important;gap:20px !important}
.h5:hover{background:#171716 !important;color:#F4F2ED !important}
.h9:hover{padding-left:12px !important}
.h10:hover{padding-left:16px !important;padding-right:16px !important;color:#171716 !important}
.h11:hover{border-color:#F4F2ED !important;color:#F4F2ED !important}
.h12:hover{background:#FFFFFF !important;color:#171716 !important;gap:20px !important}
.h13:hover{background:#F4F2ED !important;color:#171716 !important}
.h14:hover{color:#F4F2ED !important}

/* Immagini dei progetti: cliccabili per lo zoom */
.zoomable{cursor:zoom-in;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .3s}
.zoomable:hover{transform:scale(1.03)}
.zoomable:focus-visible{outline-offset:-4px}

/* Galleria Palleggia: su schermi stretti le due schermate app vanno sotto, affiancate */
@media (max-width:560px){
  .pall-row{flex-wrap:wrap}
  .pall-row > figure:first-child{flex:1 1 100% !important}
}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:56px 16px 24px;background:rgba(23,23,22,.94);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:min(100%,1600px);max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);width:auto;height:auto;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.4);transform:scale(.97);transition:transform .3s cubic-bezier(.2,.7,.2,1);cursor:zoom-out}
.lightbox.open img{transform:none}
.lightbox p{margin:0;max-width:760px;text-align:center;font-family:'Geist Mono',monospace;font-size:12px;line-height:1.5;color:#C9C6BE}
.lb-btn{position:absolute;background:none;border:1px solid #6B6A66;color:#F4F2ED;min-width:44px;min-height:44px;padding:0 14px;font-family:'Geist Mono',monospace;font-size:13px;cursor:pointer;transition:border-color .25s,background .25s}
.lb-btn:hover{border-color:#F4F2ED;background:rgba(244,242,237,.08)}
.lb-close{top:12px;right:16px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}
@media (max-width:700px){
  .lb-prev,.lb-next{top:auto;bottom:16px;transform:none}
  .lightbox{padding-bottom:76px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
  .zoomable:hover{transform:none}
}